mpvue 小程序

（先在脑海里有个印象）

wx小程序与 vue 差异

1. 不能用的可参考： https://www.jianshu.com/p/579035fc9c18 && http://mpvue.com/mpvue/
   1.1. 小程序里所有的 BOM／DOM 都不能用，因此v-html、v-text不能用, this.$refs 同样无法用，代替方法往下看
   1.2. style, class 属性不能绑定对象， 可用计算属性
   1.3. v-for 必须有 index 索引
   1.4. 不支持在 template 内使用 methods 中的函数
   1.5. slot 不支持
   1.6. {{}} 里面不能做 js 复杂运算， 如下（应先处理好数据再显示)

2. 没有路由， 只有 a 标签 & wx.navigateTo， 路径传参， 如： <a href="/pages/index/main?seach='firstname'"/>
   - 在所有 页面 的组件内，获取参数：this.$root.$mp.query
   - 在所有 的组件内，获取参数：this.$root.$mp.appOptions

3. 没有axios, 只有 wx.request

4. vuex: this.$store 无法直接访问： 可以单独建立单独引用（推荐） 或者 vue.prototype.$store = store

5. 建议开发过程中直接使用 微信小程序：表单组件 （ https://developers.weixin.qq.com/miniprogram/dev/component/button.html ）

6. 不用单独引用 eruda， 手机调试，自带 vconsole 功能

mpvue 踩坑

1. 网络请求只接受 https

2. image， 图片变形，设置 mode 属性

3. image 错误时设置默认图片，和官网有点不一样(
   （binderror ----> link: https://developers.weixin.qq.com/miniprogram/dev/component/image.html 写成
   error ----> link: https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Image.html)

   <image :src="item.url" class="slide-image" @error="errorImage(index) mode="aspectFill"></image>
   

   errorImage (index) {
   	this.swiperList[index].url = '/static/images/swiper-01.png'
   }
   

4. background-image 不能用，不能找到对应图片， 可用 base64 或者 image 标签