小程序開發(fā)：基礎封裝（二）

1氛琢、快速上手

支持通過可視化界面喊递、vue-cli命令行兩種方式快速創(chuàng)建項目。

2阳似、啟動服務

項目創(chuàng)建后我們啟動項目骚勘，通過 HBuilderX 可視化界面的直接點擊上面菜單的運行到小程序。通過vue-cli命令的創(chuàng)建的項目撮奏，通過npm run dev:mp-weixin（npm run build:mp-weixin）啟動（打包）俏讹。
由于習慣使用vscode，所以我選擇的是vue-cli方式創(chuàng)建項目畜吊。

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頁面的請求就執(zhí)行了哈肖，所以我們需要在onLaunch中拿到cookie后吻育，再去執(zhí)行頁面的請求。
那么如何保證onLaunch中異步的函數請求完后淤井，才去執(zhí)行page頁面中的請求呢布疼？
1、定義兩個全局的變量loginLoading币狠，callbackEvent游两，不管你是定義在globalData中還是定義在vuex中都可以，只要是全局的就行漩绵，我這里定義在globalData中贱案；
2、在獲取cookie的接口請求成功時加個判斷

// 等到onLaunch中的異步函數請求完成后再去執(zhí)行page頁面的
if (this.globalData.callbackEvent) {
  this.globalData.callbackEvent();
}

3止吐、重點來了宝踪，在page頁面的onLoad中做如下處理

onLoad() {
  const app = getApp();
  // 如果onLaunch中的異步函數執(zhí)行完成后才觸發(fā)頁面的onLoad，那么正常流程碍扔，直接調用該頁面的請求
  if (app.globalData.loginLoading) {
    // 調用接口
  } else {
    // 如果onLaunch中的異步函數還未執(zhí)行完成就已經觸發(fā)頁面的onLoad瘩燥，那么給callbackEvent重新賦值，等到onLaunch中的異步函數請求完成后再去執(zhí)行page頁面的
    app.globalData.callbackEvent = () => {
      // 調用接口
    }
  }
}

5不同、md5厉膀、rsa加密

由于登錄、注冊的密碼需要加碼二拐，在這里也坑了一天服鹅，由于小程序沒有window對象，所以插件的js需要改造百新，這里md5.js文件和jsencrypt.js大家可以直接使用企软，親測有用，小程序已上線吟孙。

6澜倦、表單校驗

手機端的表單校驗不像pc端封裝的那么豐富，這里找了個WxValidate.js文件杰妓，具體如何使用后面再講。??我感覺移動端表單就是坑碘勉，登錄巷挥、注冊是躲不過，能不用表單就盡量少用表單吧验靡。還有小程序input輸入框一大堆問題倍宾。

到這里框架的搭建和封裝就差不多了雏节，接下來可以進入開發(fā)階段了，快速傳送高职，查看代碼钩乍。

?著作權歸作者所有,轉載或內容合作請聯系作者