写在前面
其实在简书上记录一些心情、分享一些技术已经很久了，但半年前不知为何我的简书账号被封了，所有文章也就跟着消失了，不过无所谓，世事无常嘛！今天开始就继续和有缘人一起分享一些所得。
为什么是mpvue
使用小程序原生语言写小程序也有一年多了，最初涉及的都是些小规模项目，但随着项目日益扩大，原生小程序带来的问题越来越多
1.编写每个页面都需要来回切换3个文件
2.小程序官方编辑器经常卡死、空白、各种bug
3.引用的第三方组件更新迭代混乱
4.小程序本身语法局限，很多时髦功能不支持
5.和h5几乎没有任何关系，转成h5几乎不可能
因此我开始考虑采用其他流行框架，查一查主要就是wepy和mpvue了，之所以选用mpvue，第一是最近自己正好在研究vue，第二是mpvue生态圈相对成熟一些。
使用体验
编辑器自然是万年最爱的Sublimetext 3 ，装一些vue高亮插件、html排版插件即可
sublime
由于不熟悉这个框架，我并没有从0新建项目，而是从github中选择了一个最简单的案例clone了下来，然后删掉它的pages，开始写自己的page
随机就遇到一些问题，由于小程序和vue接口存在大量区别，导致原本很多方法无法使用。
最后查了半天采用如下方案：
flyio作为网络请求库
自己写了个global来简单替代小程序globaldata，下方会给出代码
ui框架采用vant小程序版 Github地址 该框架mpvue完全支持
比较坑爹的是小程序开发工具会随着每次保存刷新，因此经常保存几个文件刷新好几遍，尽量一次性保存全部：command+option+s
Vue体验最好的还是组件化，虽然小程序本身也支持组件化，但是体验还是有差距，但是“瑜不掩瑕”，mpvue还不算成熟，还有很多坑，官方已经声明了一些，如：不支持复杂js表达式、不支持filter，除此之外，个人在开发过程中还遇到一些问题：
页面缓存问题
同一页面多次加载的时候会残留上一次数据，即页面不会destroy，这个问题非常验证，github上已经有无数讨论，目前我采用手动清空数据的方法，勉强解决，方法就是在每个页面加入如下代码（比较蠢，也可以采用github上某位大神写的框架，但由于版本差异我没敢用）
const dataArr = []
export default {
onLoad() {
Object.assign(this.$data, this.$options.data())
dataArr.push({ ...this.$data })
},
onUnload() {
dataArr.pop()
const dataNum = dataArr.length
if (!dataNum) return
Object.assign(this.$data, dataArr[dataNum - 1])
},
}
上面提到的globaldata问题
当然可以用vuex做，只是我不是很熟悉这个，也不想搞那么费劲，毕竟我只想储存下用户信息
在utils文件夹中新建和一个js
global.js
再在main.js中增加两句代码
main.js
这样，在任意一个页面都可以用
this.$global.token //访问和修改这些全局的值了
总结
项目顺利完成，vant的组件效果还不错。mpvue除了页面切换这个大坑外，其余体验还算不错，后续会继续采用，期待框架作者早日更新。
效果图
网友评论