小程序开发：基础封装（二）

1、快速上手

支持通过可视化界面、vue-cli命令行两种方式快速创建项目。

2、启动服务

项目创建后我们启动项目，通过 HBuilderX 可视化界面的直接点击上面菜单的运行到小程序。通过vue-cli命令的创建的项目，通过npm run dev:mp-weixin（npm run build:mp-weixin）启动（打包）。
由于习惯使用vscode，所以我选择的是vue-cli方式创建项目。

3、基础功能封装

拿来主义，这里直接copy了掘金大佬的一些封装
uni-app网络请求的封装
uni-app路由的封装
uni-app缓存器的封装
由于小程序不支持cookie携带问题，所以我这里通过 response.header["Set-Cookie"] 拿到cookie的值，然后存到localstorage，在request的拦截处获取localstorage的cookie值并设置request的header['cookie']，这样就解决了cookie问题。

4、异步问题

有这样一个需求问题，在小程序启动时，在onLaunch中调用接口，获取cookie，后面所有页面的请求都需携带上这个cookie。
但是由于异步问题，onLaunch中获取cookie的请求还没完成，page页面的请求就执行了，所以我们需要在onLaunch中拿到cookie后，再去执行页面的请求。
那么如何保证onLaunch中异步的函数请求完后，才去执行page页面中的请求呢？
1、定义两个全局的变量loginLoading，callbackEvent，不管你是定义在globalData中还是定义在vuex中都可以，只要是全局的就行，我这里定义在globalData中；
2、在获取cookie的接口请求成功时加个判断

// 等到onLaunch中的异步函数请求完成后再去执行page页面的
if (this.globalData.callbackEvent) {
  this.globalData.callbackEvent();
}

3、重点来了，在page页面的onLoad中做如下处理

onLoad() {
  const app = getApp();
  // 如果onLaunch中的异步函数执行完成后才触发页面的onLoad，那么正常流程，直接调用该页面的请求
  if (app.globalData.loginLoading) {
    // 调用接口
  } else {
    // 如果onLaunch中的异步函数还未执行完成就已经触发页面的onLoad，那么给callbackEvent重新赋值，等到onLaunch中的异步函数请求完成后再去执行page页面的
    app.globalData.callbackEvent = () => {
      // 调用接口
    }
  }
}

5、md5、rsa加密

由于登录、注册的密码需要加码，在这里也坑了一天，由于小程序没有window对象，所以插件的js需要改造，这里md5.js文件和jsencrypt.js大家可以直接使用，亲测有用，小程序已上线。

6、表单校验

手机端的表单校验不像pc端封装的那么丰富，这里找了个WxValidate.js文件，具体如何使用后面再讲。我感觉移动端表单就是坑，登录、注册是躲不过，能不用表单就尽量少用表单吧。还有小程序input输入框一大堆问题。

到这里框架的搭建和封装就差不多了，接下来可以进入开发阶段了，快速传送，查看代码。