小程序模块化小程序入门与实战十一

上一章节我们讲了分页数据的处理，setData 数据限制的解决办法，模板字符串以及触底分页获取数据。

那么这一章节我们学习小程序的模块化。

可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。

模块只有通过 module.exports 或者 exports 才能对外暴露接口。通过 require 方式引入

exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。
小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中，或者使用小程序支持的 npm 功能。

同时小程序是支持 ES6 的 export 来暴露接口的，模块引入通过 import。

在 src/es6 目录下新建一个 sandBox.js 文件

export const sandBox = {get({api, data, header}){return new Promise((resolve, reject) => {

            wx.request({
                url:"https://guojiang.club/"+api,
                header:header,
                data:data,
                method:'GET',
                success:res => {resolve(res)
                },
                fail:rej => {reject(rej)
                }
            })
        })
    },
    post({api, data, header}){return new Promise((resolve, reject) => {
            wx.request({
                url:"https://guojiang.club/"+api,
                data:data,
                header:header,
                method:'POST',
                success:res => {resolve(res)
                },
                fail:rej => {reject(rej)
                }
            })
        })
    }
};
或者第二种暴露模块的方式：//module.exports.sandBox = sandBox
// 需要去掉 export

在 src/es6 目录新建一个 myapp.js 文件，主要用来放各个 js 模块。

# myapp.js
<!-- 使用 -->
let sandBox = require('./sandbox.js')
// 或者
import {sandBox} from './sandbox.js';

export {sandBox}

上面代码介绍了两种暴露模块的方式：

第一种使用小程序官方介绍的 module.exports 暴露模块，require 引入模块。
第二种是 ES6 的 export 暴露模块，import 引入模块。

然后在 index.js 中怎么使用呢?

有咩有盆友刚开始是这样子想的

<!--index.js-->
import {sandBox} from "../../es6/myapp.js";

就会报错

你在思考为什么会报错呢？

我们先来看看我们一直拿开发者工具跑的 dist 里面的 src 目录。

并没有 es6 这个目录。是因为我们在 webpack.base.config 这个文件的这一段代码：

context: path.join(__dirname, 'src/es6'),
    entry: {myapp:'./myapp.js'},
    output: {path: path.join(__dirname, 'dist/src/lib'),
        filename: '[name].js',
        libraryTarget: 'umd'
    },

将 src/es6 目录下的 myapp.js 文件输出在 dist/src/lib 目录下，文件名为 myapp.js

所以我们在 index.js 中引入 sandBox.js，需要这样子引入：

import {sandBox} from "../../lib/myapp.js";

然后在调用我们封装的 sandBox 方法发送请求：

 // 获取首页数据信息
    getIndexCard(page){
        sandBox.get({
            api:'api/sir/card',
            data:{page:page}
        }).then(res=>{
            res = res.data;
            if(res.status){
                let pages = res.meta.pagination; // 获取后台分页的分页数据 pagination
                let current_page = pages.current_page;// 获取当前是那一页
                let total_pages = pages.total_pages;// 获取总页面数
                // 下面我们来赋值，这里会用到 es6 的模板字符串, 有不懂得我们下面详细讲解
                this.setData({[`cardList[${page-1}]`]:res.data,
                    page:current_page,
                    has_more:current_page < total_pages
                })
            } else {
            // 显示模态对话框
               wx.showModal({
                   content:res.message || '服务器开了小差，请重试',
                   showCancel: false
               })
            }
        }).catch(rej=>{
        // 显示模态对话框
            wx.showModal({
                content:rej.message || '内部错误',
                showCancel: false
            })
        })
    }

显示模态对话框

在上面的代码中，我们看到了 wx.showModal , 这是微信小程序的 API , 是用来界面交互反馈的。

content 是“提示的内容”
showCancel 是“是否显示取消按钮”

小程序模块化
使用 ES6 promise 封装 wx.request，并使用
界面交互反馈模态框 wx.showModal

下一章节我们讲解项目开发过程中在开发环境，生产环境设置不同的请求接口域名。

本文由博客群发一文多发等运营工具平台 OpenWrite 发布

小程序模块化小程序入门与实战十一

模块化

封装 wx.request

使用

wx.showModal(Object object)

总结