[小程序] mpVue 踩坑

伴隨着我司小程序 v1.0.0審覈經過、上線，此處應該有一篇mpVue踩坑經歷。每一次had been not approved都是個悲劇，555

爲什麼選mpVue?

1. 支持VueX；
2. 用mpVue-Router-Patch可以使用 Vue-Router書寫方式實現頁面跳轉
3. 熟悉Vue語法（其實也是這個項目，才認識得更深入！）

搭配使用：VueX、mpVue-Router-Patch、mpVue-wxParse、Flyio

就 - 開始填坑之旅

1. mpVue與vue生命週期的區別

mpVue支持vue的生命週期、小程序的生命週期，經常使用beforeMount、mounted、onShow、onUnload。在beforeMount的時候，其實已是在小程序前幾個生命週期onLoad、onReady、onShow以後了。

一開始本着不混用mpVue和小程序生命週期的原則，踩了大坑。如

pages/A?id=1到pages/B 到 pages/A?id=2

從新返回到pages/A?id=1的時候發現，數據居然是pages/A?id=2的，一開始我將大部分數據放在VueX中，抽出來以後發現，並沒那麼簡單。

參考了官GitHub的多個Issues( #140、#215、#213、#233、#311、#140、#322... 就兩個星期的時間，相同緣由的Issues個數翻了幾倍，數不完 )。

在mpVue中，一個page就是一個Vue實例，關閉頁面並無銷燬，beforeDestroy、destroyed基本沒用，第二次打開同一個頁面的時候，data也不會是初始化的數據。

顯示是得填坑啊！最後採起的方式是：在頁面級組件定義數組dataArr，頁面onLoad（每次打開新頁面）時，將組件的data重置爲初始化的data並push到dataArr中，頁面onHide時，將當前的data存儲到對應的dataArr元素中，頁面onUnload時，將pop dataArr，相關代碼以下

let dataArr = []
   export default {
    ...,
    onLoad () {
        Object.assign(this.$data, this.$options.data())
        dataArr.push({})
    },
    onHide () {
        dataArr[dataArr.length - 1] = { ...this.$data }
    },
    onUnload () {   // 貌似要銷燬數據
        dataArr.pop()
        if (dataArr.length) {
            Object.assign(this.$data, dataArr[dataArr.length - 1])
        }
    },
    ...
   }
複製代碼

缺點：要在小程序運行期間，可能須要屢次打開的頁面中都加上這段處理，略繁瑣，應該是能夠抽出來配置使用的，暫時還沒想到什麼方法，555

官方稱：除特殊狀況外，不建議使用小程序的生命週期鉤子。
（ 心裏os：哪來的自信。別打我 ）

2. 並不能在點返回按鈕以前作些什麼

只要不是在第一個頁面，小程序的左上角都會有一個返回按鈕，如何監聽這個返回按鈕？
官方都稱：目前不支持對用戶的返回操做進行阻斷。

頁面onUnload時，頁面已經返回了！跟App邏輯不同，以下圖

產品邏輯須要考慮這一點，還好用VueX可選擇保留數據與否

3.富文本組件功能受限

小程序富文本插件，會攔掉標籤的默認行爲。須要一些插件去解析，在回調中執行一些簡單的操做，如a標籤跳轉，暫時使用mpVue-wxParse

還有一些在擔憂的問題

1. 小程序的頁面棧個數是有限的

所以，有由多個頁面操做才能完成的功能，有可能操做到一半，頁面棧滿了！會很尷尬啊，進退兩難。
若是須要用戶登陸的時候，代碼裏push一個用戶登陸頁,結果沒反應那就...(應該用彈框，可參照MoBike)

解決方式：
進入該功能流程前先判斷頁面棧的長度，提示用戶，手動操做，這固然不怎麼友好；
  或
將該功能抽出來作成另外一個小程序，小程序間的跳轉基本無感，還能夠。（用了一次全家小程序，退出的時候才發現用了3個，可怕。）不過，數據分析的時候，是否是也會困難一點呢。

收穫

1. 對VueX的使用

主要是四個概念，state、getters、commit、action, 我的感受像一個簡易數據庫。 結合異步、同步操做，外加可定義命名空間，頁面數據共享簡單了不少。 用小程序語法的話，貌似是須要各類傳值的。

2. async await、 Promise

小程序的n多API都是回調的，這兩種語法是王道啊

下回再更啦。