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