[小程序] mpVue 踩坑

伴随着我司小程序 v1.0.0审核通过、上线，此处应该有一篇mpVue踩坑经历。每一次had been not approved都是个悲剧，555

为何选`mpVue`?

支持VueX；
用mpVue-Router-Patch可使用 Vue-Router书写方式实现页面跳转
熟悉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 = []

   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都是回调的，这两种语法是王道啊

下回再更啦。