公司开发一个新的微信小程序项目，技术方面没有要求。选择的时候主要就是从 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 中是反过来的。(这应该是我踩的最气的坑，所以开发之前要好好看看文档)
<div :class="{ myCradsListUp: listShow }">
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 ：最后以这种方式实现了效果，但是会报错...
<div :style="{backgroundImage: 'url(' + pictures.background + ')'}">
<div :style="{backgroundImage: `url(${pictures.exampleCard})`}"></div>
4、小程序事件绑定的写法：错把 bindgetuserinfo 当成了一个属性...设置了半天都不好用，哈哈哈~
<button open-type="getUserInfo" bindgetuserinfo="getInfo">点击登录</button> // 小程序
<button open-type="getUserInfo" @getuserinfo="getInfo">点击登录</button> // mpvue
5、获取表单 formId ：获取事件 event 对象的值时，在 event 后加一个 mp。
<form @submit="formSubmit" report-submit>
<button plain class="idBtn" form-type="submit" data-type="click"></button>
</form>
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 的可能性。
<input type="text" v-model.lazy:value="englishName" placeholder="请输入">
8、页面的刷新问题：因为小程序是没办法 window.reload 的所以在 onLoad 或者 onShow 的时候去调用数据接口就可以了。
常见问题：
创建完成后引入 not find ，样式修改不生效啊~~~ bulabula...的问题。统一姿势~删除 dist 重新 start。
还有一个比较 low 的问题，因为小程序对项目大小的限制。所以我毫不犹豫去看小程序分包和 webpack 优化等等~ 但是实际上你再上传前 build 一下就会小很多。这个问题。。。貌似身边好多小伙伴都忘记了....哈哈哈
网友评论