上一章节我们讲了分页数据的处理， setData数据限制的解决办法，模板字符串以及触底分页获取数据。
那么这一章节我们学习小程序的模块化。
模块化
可以将一些公共的代码抽离成为一个单独的js文件，作为一个模块。
模块只有通过 module.exports 或者 exports 才能对外暴露接口。通过 require方式引入
exports是module.exports的一个引用，因此在模块里边随意更改exports的指向会造成未知的错误。所以更推荐开发者采用module.exports来暴露模块接口，除非你已经清晰知道这两者的关系。- 小程序目前不支持直接引入
node_modules, 开发者需要使用到node_modules时候建议拷贝出相关的代码到小程序的目录中，或者使用小程序支持的 npm 功能。
同时小程序是支持 ES6 的 export 来暴露接口的，模块引入通过 import。
封装 wx.request
在 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(Object object)
显示模态对话框
在上面的代码中，我们看到了 wx.showModal , 这是微信小程序的 API , 是用来界面交互反馈的。
content是 “提示的内容”showCancel是 “是否显示取消按钮”
总结
- 小程序模块化
- 使用 ES6 promise 封装
wx.request，并使用 - 界面交互反馈模态框
wx.showModal
下一章节我们讲解项目开发过程中在开发环境，生产环境设置不同的请求接口域名。
本文由博客群发一文多发等运营工具平台 OpenWrite 发布