使用mpVue构建小程序

最新推荐文章于 2019-05-06 16:09:27 发布

weixin_33744854

最新推荐文章于 2019-05-06 16:09:27 发布

阅读量111

点赞数

文章标签： javascript runtime json ViewUI

原文链接：https://juejin.im/post/5aeab971f265da0b71561c8f

版权

mpVue是使用vue.js来开发小程序的一个前端框架。框架基于vue.js核心，改写了vue.js的runtime和compiler实现，使其可以运行在小程序环境中。

使用 mpvue 开发小程序，你将在相比开发原生小程序技术体系的基础上获取到这样一些能力：

彻底的组件化开发能力：提高代码复用性【比较大的一个好处是构建组件方便很多】
完整的 Vue.js 开发体验【对于本来熟悉vue.js的开发者来说会更容易上手】
方便的 Vuex 数据管理方案：方便构建复杂应用【这个其实跟小程序原生的globalData有点相类似，笔者觉得globalData或者setStorage()可能更好用】
快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
支持使用 npm 外部依赖【目前有很多插件都没有小程序版本的，用npm依赖还是比较方便的，但是要注意可能支持性不一定很好】
使用 Vue.js 命令行工具 vue-cli 快速初始化项目【小程序本身的初始化项目也比较快】
H5 代码转换编译成小程序目标代码的能力
可以使用sass，less等css扩展语言，提高样式书写效率

1、原生小程序生命周期

App()

onLaunch	Function	生命周期函数--监听小程序初始化	当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow	Function	生命周期函数--监听小程序显示	当小程序启动，或从后台进入前台显示，会触发 onShow
onHide	Function	生命周期函数--监听小程序隐藏	当小程序从前台进入后台，会触发 onHide
onError	Function	错误监听函数	当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
onPageNotFound	Function	页面不存在监听函数	当小程序出现要打开的页面不存在的情况，会带上页面信息回调该函数，详见下文
其他	Any		开发者可以添加任意的函数或数据到 Object 参数中，用 `this` 可以访问

全局的 getApp() 函数可以用来获取到小程序实例。

// other.js
var app= getApp()
console.log(app.globalData) // I am global data复制代码

Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

object 参数说明：

属性	类型	描述
data	Object	页面的初始数据
onLoad	Function	生命周期函数--监听页面加载
onReady	Function	生命周期函数--监听页面初次渲染完成
onShow	Function	生命周期函数--监听页面显示
onHide	Function	生命周期函数--监听页面隐藏
onUnload	Function	生命周期函数--监听页面卸载
onPullDownRefresh	Function	页面相关事件处理函数--监听用户下拉动作
onReachBottom	Function	页面上拉触底事件的处理函数
onShareAppMessage	Function	用户点击右上角转发
onPageScroll	Function	页面滚动触发事件的处理函数
onTabItemTap	Function	当前是 tab 页时，点击 tab 时触发
其他	Any	开发者可以添加任意的函数或数据到 object 参数中，在页面的函数中用 `this` 可以访问

2、vue.js生命周期

3、mpVue的生命周期

同 vue，不同的是我们会在小程序 onReady 后，再去触发 vue mounted 生命周期

除了 Vue 本身的生命周期外，mpvue 还兼容了小程序生命周期，这部分生命周期钩子的来源于微信小程序的 Page，除特殊情况外，不建议使用小程序的生命周期钩子。

注意点：

不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你做预期的 Vue 实例，且 this.a 或 this.myMethod 也会是未定义的。
微信小程序的页面的 query 参数是通过 onLoad 获取的，mpvue 对此进行了优化，直接通过 this.$root.$mp.query 获取相应的参数数据，其调用需要在 onLoad 生命周期触发之后使用，比如 onShow 等

转载于:https://juejin.im/post/5aeab971f265da0b71561c8f

关注