mpvue写小程序初体验

为什么是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除了页面切换这个大坑外，其余体验还算不错，后续会继续采用，期待框架作者早日更新，小程序开发定制vx：arsenetech。