mpvue食用踩坑指南

写在前面

习惯了vue带来的方便之后，再来写原生的微信小程序总是有一些说不出的别扭（比如修改数据要用setData，没有计算属性等等），于是搜索发现有wepy、mpvue等好几个框架，简单看了下网上的评价之后，自然选择基于vue的mpvue，原因不用多说，可以减少学习时间嘛～

但是两个项目之后，坑也没有少踩，于是在这里记下踩坑的血泪史。。。

食用之前需要准备：
1、Vue基础
https://cn.vuejs.org/v2/guide/
2、mpvue基础
http://mpvue.com/mpvue/#_12

1、富文本解析

mpvue的文档里特意说明了：

小程序里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用。

• 如何填坑

那我们应该如何解析富文本？其实很简单，使用小程序的 rich-text 指令即可。

<rich-text nodes="{{nodes}}" ></rich-text>

• 跳坑之路

按网上搜索的结果，特地下载了wxParse库来帮助解析，绕了一大圈子，结果小程序现在已经支持rich-text组件了。。。

2、小程序中的特殊事件

mpvue对小程序的常用事件都做了映射处理，比如小程序中常见的

<view bindtap="tap" ></view>

我们在mpvue中还是按vue的写法即可，无需变化：

<view @click="tap" ></view>

但有些事件方法，比如video组件中的bindplay，在mpvue的事件映射表中是找不到的，那我们该如何绑定事件呢？

• 如何填坑
  将事件名中的bind修改为@即可：

<video @play="play" ></video>

其它还有一些细节，还需要仔细阅读mpvue手册中的事件处理器章节的踩坑注意。

3、生命周期

这里主要是小程序和vue生命周期是有区别，在mpvue里，你会惊奇的发现：

1. data中初始化的数据在小程序初始化的时候就全部执行了一次；
2. 页面关闭再次打开的时候，data中的数据不会再进行初始化；

• 如何填坑
  mpvue兼容了小程序的所有生命周期，并且不建议使用小程序的生命周期钩子，但在实际使用中，如果不是为了兼容h5，我们还是习惯性的使用小程序的生命周期。

  那么我们需要根据实际情况，在onShow／onLoad，或者onHide／onUnload事件中，对数据进行初始化处理。

  另外需要注意的是，页面的query参数，是在onLoad生命周期触发后，通过this.$root.$mp.query获取，如：

onLoad() {
	this.newsId = this.$root.$mp.query.id;
}

4、新增页面需要重新编译

这个问题比较简单，但有时候也比较容易忘记，动态编译的时候，在新增页面后，需要重新执行npm run dev编译后才能生效，否则会提示找不到该页面。这里建议开始就将规划好的页面一次性全部写完，省的多次编译。

5、Vue组件和小程序组件

1. vue组件在mpvue中有很多功能是不支持的，使用前需要仔细看一遍mpvue手册组件中的介绍，以免不小心就入坑了；
2. 小程序的原生组件，直接使用即可。
3. 特别需要注意的事，如果是需要获取小程序组件对象，需要通过“this.$mp.page.selectComponent(’#id’)”（这里#id表示组件上的id属性值）获得，比如需要调用小程序组件中的方法：

this.$mp.page.selectComponent('#chart').init();

特别需要说明这里还有一个坑中坑，this.$mp.page只有在页面中才能获得，如果在页面中使用了vue组件，这个组件的代码中，是获取不到this.$mp.page对象的，只能靠触发事件上报到页面处理，或者将page对象通过props传递到组件。

6、在计算属性中刷新动态样式

mpvue文档中特地说明了，不支持 官方文档：Class 与 Style 绑定 中的 classObject 和 styleObject 语法。

这样的话，如果我们需要根据列表数据渲染不同的样式就比较麻烦，好在这里我们还有计算属性，可以通过computed 方法生成 class 或者 style 字符串，插入到页面中，这一点文档中是有说明的。

注：在某些极为特殊的场景下，某些计算属性的对象虽然刷新，但是界面并没有跟着刷新，可以用深拷贝复制一个对象，再将其返回给计算属性，这里界面能够刷新（具体原因还需要再研究）

7、网络请求

在mpvue里使用原生的wx.request方法自然是没有问题的，但在vue中，我们经常使用推荐的axios对网络请求进行了封装处理，但遗憾的是，在小程序中不能使用。

不过好在我们还有另外一个库可以使用：fly.js，使用起来和axios差不多，详情可参见：
https://www.npmjs.com/package/flyio

另外需要注意的是，小程序的调试里，mock.js是不起作用的。

8、ui库

除了原生的样式外，我们也可以使用一些其它的ui库，比如we-ui（https://weui.io/ ），但有时候ui库的样式需要微调，同时库中的样式有些是写在伪类中的，但是目前微信的调试器还看不到伪类，所以调试起来会比较麻烦，是在不行可以在浏览器查看官网的样式进行参考。
实际使用中感觉ui库使用的并不会很多，很多需要微调，自己写其实也并不麻烦。

9、图表

在vue中，我们经常使用echarts（https://echarts.baidu.com/ ）来绘制图表，但在小程序中，我们是不能直接使用的。好在已经github上已经有同学造好了轮子，封装了一个组件ec-canvas，通过它我们可以方便的使用echarts中的图表了。

这里有两点需要注意：

1. 刷新图表的时候需要调用组件的init方法，这里就需要用到我们之前在小程序组件中提到的：

this.$mp.page.selectComponent('#chart').init();

2. 小程序上传有体积要求，一般不能超过2m，而echart.js的体积还是比较大的，但我们可以在https://echarts.baidu.com/builder.html中根据自己的实际使用场景定制下载echart.js，这样可以大大缩小文件的体积。

10、分包

当小程序体积过大的时候，也可以使用分包加载。在mpvue中，分包的使用方法和小程序文档中介绍的基本一致，在app.js中添加如下代码：

"subPackages": [
  {
    "root": "pages/sub/",
    "pages":[
      "search2/main"
    ]
  }
],

这里需要注意的是root的路径，其中sub是pages文件夹下的新建的一个子文件夹，末尾的“／”不能丢。

尾声

以上是个人在最近mpvue实际使用中踩过的一些坑，总体来说，mpvue使用起来还是相当方便的，不过本人水平有限，加上有些问题可能已经过时，如果有错误，请大家帮忙指正～