mpvue-编写微信小程序总结

---

1、写在前面：

.....最近在写一个微信小程序项目，在看完官方微信小程序开发文档后，有一种直接想“放弃”的念头；
.....使用微信小程序原生框架能够快速，方便，简洁的搭建项目，同时微信提供了新的一套‘语义化’标记语言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官网_

---

2、优点比较

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

3、新建项目

1. 经过 Vue.js 命令行工具 vue-cli，你只需在终端窗口输入几条简单命令，便可快速建立和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目
2. 建立完以后，在命令行执行：
   npm run dev
   编译成功后，用微信开发者工具打开webpack打包后的dist文件，便可进行开发了；
3. 项目文件结构：
   
   ------------

小提示：

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

4、生命周期比较

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 支持）

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

5、使用总结

（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
}