mpvue 趟坑之旅

公司开发一个新的微信小程序项目，技术方面没有要求。选择的时候主要就是从 wepy 和 mpvue ，综合各自的特点之后选择了 mpvue 。日常用的就是 Vue 敲代码比较习惯，同时可以使用 Vuex 还是很方便的。这张图还是比较明显的把各自的特点列出来了。如果想知道具体的就看看各自的文档，每个人的喜好都不同。
补充： wepy 是可以使用 redux 的，相关 https://juejin.im/post/5b067f6ff265da0de02f3887
常见问题先去仓库看看： https://github.com/Meituan-Dianping/mpvue/issues
组件库： https://github.com/mpvue/awesome-mpvue

坑~

1、 class 和 style 绑定的问题：按正常的习惯 ‘:’ 左侧为布尔值，但是 mpvue 中是反过来的。(这应该是我踩的最气的坑，所以开发之前要好好看看文档)

2、background-image 图片引用的问题：设置比较小的图片是没有影响的，但是比较大的图片就会发现没有效果。原因~

在 webpack.base.conf.js 中 url-loader 的相关设置对图片大小有限制。可以取消这个限制，同时使用绝对路径访问就会避免这个问题了。一般其实是放在 src/assets 目录下，然后通过 ~@/assets/xxx 这样引用的。
Ps：因为小程序对大小有限制(多个包最大4M，单个2M)，所以尽量不要使用本地图片。

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
         limit: 100,
         name: utils.assetsPath('img/[name].[ext]')
    }
},

3、bind style 后设置 backgroundImage 的 url ：最后以这种方式实现了效果，但是会报错...

4、小程序事件绑定的写法：错把 bindgetuserinfo 当成了一个属性...设置了半天都不好用，哈哈哈~

点击登录 // 小程序
点击登录  // mpvue

5、获取表单 formId ：获取事件 event 对象的值时，在 event 后加一个 mp。

  


formSubmit (e) {
    let formId = e.mp.detail.formId // mpvue
    let formId = e.detail.formId // 小程序
}

6、获取页面跳转链接拼接的 query 时，mpvue 进行了优化，通过 this.$root.$mp.query 来获取。

7、在实现双向数据绑定的时候尽量使用 v-model.lazy ，以优化性能减去出现 bug 的可能性。

8、页面的刷新问题：因为小程序是没办法 window.reload 的所以在 onLoad 或者 onShow 的时候去调用数据接口就可以了。

常见问题：

创建完成后引入 not find ，样式修改不生效啊~~~ bulabula...的问题。统一姿势~删除 dist 重新 start。
还有一个比较 low 的问题，因为小程序对项目大小的限制。所以我毫不犹豫去看小程序分包和 webpack 优化等等~ 但是实际上你再上传前 build 一下就会小很多。这个问题。。。貌似身边好多小伙伴都忘记了....哈哈哈