[小程式] mpVue 踩坑

_加陽發表於2018-07-14
Vue

伴隨著我司小程式 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邏輯不一樣，如下圖

[小程式] mpVue 踩坑

產品邏輯需要考慮這一點，還好用VueX可選擇保留資料與否

3.富文字元件功能受限

小程式富文字外掛，會攔掉標籤的預設行為。需要一些外掛去解析，在回撥中執行一些簡單的操作，如a標籤跳轉，暫時使用mpVue-wxParse

還有一些在擔心的問題

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

因此，有由多個頁面操作才能完成的功能，有可能操作到一半，頁面棧滿了！會很尷尬啊，進退兩難。
如果需要使用者登入的時候，程式碼裡push一個使用者登入頁,結果沒反應那就...(應該用彈框，可參照MoBike)

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

收穫

1. 對VueX的使用

主要是四個概念，state、getters、commit、action, 個人感覺像一個簡易資料庫。 結合非同步、同步操作，外加可定義名稱空間，頁面資料共享簡單了很多。 用小程式語法的話，貌似是需要各種傳值的。

2. async await、 Promise

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

下回再更啦。

相關文章