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

为何选 mpVue ?

搭配使用： 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都是回调的，这两种语法是王道啊
下回再更啦。