一、配置
通过mpvue创建项目开发者应当注意,mpvue在onReady后触发
mounted方法。除了vue自身生命周期外,mpvue对小程序生命周期事件都做相应支持。
app 部分:
onLaunch | 初始化 |
onShow | 当小程序启动,或从后台进入前台显示 |
onHide | 当小程序从前台进入后台 |
page 部分:
onLoad | 监听页面加载 |
onShow | 监听页面显示 |
onReady | 监听页面初次渲染完成 |
onHide | 监听页面隐藏 |
onUnload | 监听页面卸载 |
onPullDownRefresh | 监听用户下拉动作 |
onReachBottom | 页面上拉触底事件的处理函数 |
onShareAppMessage | 用户点击右上角分享 |
onPageScroll | 页面滚动 |
onTabItemTap | 当前是 tab 页时,点击 tab 时触发 (mpvue 0.0.16 支持) |
如果写过小程序朋友是不是很熟悉的味道?是的,它们都是小程序事件。
传值
开发者注意小程序中页面之间相互传递参数时,通常:
wx.navigateTo({
url: 'url/?key=' + key
})
在mpvue你需要 this.$root.$mp.query 这样使用,从onLoad接受。
new Vue({
onLoad ($data) {
console.log($data)
}
})
不受mpvue支持模板语法
几乎全支持 官方文档:模板语法,
mpvue
由于微信小程序的能力限制(数据绑定),所以无法支持复杂的 JavaScript 表达式。
- 不支持v-html指令
- 不支持模板中使用复杂函数,如 .split(”).reverse().join(”)
- 不支持过滤器
- 不支持在 template 内使用 methods 中的函数。
- 不支持 官方文档:Class 与 Style 绑定 中的
classObject
和styleObject
语法。 - 暂不支持在组件上使用 Class 与 Style 绑定
移植项目
遗憾的是mpvue无法逆向开发( 从小程序编译为h5 ),因此开发者在构建新项目时是否考虑使用mpvue因有考虑。