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

上一章节我们讲了分页数据的处理, 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";

就会报错

image

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

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

image

并没有 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 是 “是否显示取消按钮”

image

总结

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

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