mpvue-编写微信小程序总结

一、写在前面：

.....最近在写一个微信小程序项目，在看完官方微信小程序开发文档后，有一种直接想“放弃”的念头；

.....使用微信小程序原生框架可以快速，方便，简洁的搭建项目，同时微信提供了新的一套‘语义化’标记语言wxml,以及独立出来的wxss样式表，并且js的交互逻辑支持ES6的语法，包括使用Promise等；除去框架本身之外，小程序还提供了一些常用的组件，包括Picker,slider，canvas,form表单等，能极大的提高开发者的效率，丰富的API完全能满足工作需求，如果你在没有接触类似 VUE 等MVVM主流前端框架之前，微信小程序原生框架无疑是最佳选择；

......但是，使用过vue后，你会发现小程序原生框架的数据绑定方式非常“臃肿”，代码编写不优雅简洁，语义化标签以及丰富的属性设置会大大增加学习成本，另一方面微信小程序开发者工具的IDE表现也总是差强人意，反应迟钝，wxml,wxss,js之间来回切换不流畅，导致开发效率低下......

......由于以上种种，我开始寻找新的框架编写小程序项目，首先找到的框架是圈内较热门的wepy，其次就是最近才发布的mpvue;

简介

......wepy 是腾讯开源的一套语法接近vue.js，快速开发小程序的框架，开源的较早，网上有很多资源，也有一些大厂使用。可想而知，原生小程序框架在设计上还是有一定的缺陷

......mpvue也就是今天要介绍的主角，是美团开源的一套快速开发小程序的前端框架，__按官网说可以实现小程序与H5界面使用一套代码，mpvue 继承自 Vue.js。并且，其技术规范和语法特点与 Vue.js 保持一致。对毫无小程序开发经验的同学来说无疑是大大的福利。mpvue官网

二、优势比较

值得注意的是，mpvue提供vuex进行数据状态管理，能满足复杂应用状态管理需求，这是其他框架都不具备的！

三、新建项目

通过 Vue.js 命令行工具 vue-cli，你只需在终端窗口输入几条简单命令，即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目
创建完之后，在命令行执行：

npm run dev

编译成功后，用微信开发者工具打开webpack打包后的dist文件，即可进行开发了；
项目文件结构：

小提示：

安装mpvue项目利用vue-cli脚手架工具，选择了对应的mpvue的模板，在安装过程中，cli脚手架工具会提醒您是否需要安装Vuex，，我建议您根据项目需求确认是否添加该配置，因为这里安装Vuex，工具根据vue模板会帮你自动搭建依赖关系并且转义后兼容小程序，如果您想在项目开发中添加Vux就要注意了，在安装过程中极有可能报错，由于mpvue开源时间较短，参考资料也很有限，为了避免不必要的麻烦，建议在搭建项目时就安装Vuex。

四、生命周期比较

vue生命周期

beforeCreate————————在实例初始化之后，数据观测事件配置之前被调用
created ————————在实例创建完成后被立即调用
beforeMount ————————在挂载开始之前被调用
mounted ————————el 被新创建的 vm.$el 替换挂载到实例上去之后调用该钩子
beforeUpdate
updated
activated ————————keep-alive 组件激活时调用。
deactivated
beforeDestroy
destroyed

注意：vue的create,mounted等生命周期钩子函数只执行一次，当组件创建并被挂载到DOM上以后，就不会执行了；

小程序生命周期

app 部分：

onLaunch，初始化
onShow，当小程序启动，或从后台进入前台显示
onHide，当小程序从前台进入后台

page 部分：

onLoad，监听页面加载
onShow，监听页面显示
onReady，监听页面初次渲染完成
onHide，监听页面隐藏
onUnload，监听页面卸载
onPullDownRefresh，监听用户下拉动作
onReachBottom，页面上拉触底事件的处理函数
onShareAppMessage，用户点击右上角分享
onPageScroll，页面滚动
onTabItemTap, 当前是 tab 页时，点击 tab 时触发（mpvue 0.0.16 支持）

这是生命周期的调用关系和顺序图。

五、使用总结

（1）生命周期钩子函数

mpvue团队建议开发者在mpvue中尽可能的不使用小程序的生命周期，实际工作中使用小程序的生命周期钩子函数也无大碍，有的程序员为了减少页面初始化时尽快的请求到服务器端的数据，故意将ajax请求写在onShow钩子函数里，而不是vue 的 mounted函数里；

我们来看看这样一个需求，下图所示的页面

（2）路由

在mpvue中没有继续延用vue路由的写法，而是继承小程序的一套解决方案，在工作中我们经常通过路由来传递参数，比如下面代码所示：

//在index页面，我们想跳转到apply页面，并传递id参数

let id = 10

const url = '/pages/apply/main?id=' + id

wx.navigateTo({ url})

小程序方法获取id

// 在apply.vue页面中

onLoad (options) {

	let id = options.id

}

//注意：必须是在onLoad钩子函数往后的生命周期中获取

onShow (options) {

	let id = options.id

}