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
}
