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

下回再更啦。