一、App声明周期
1.App()
app.js中的App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。
示例代码:
App({ onLaunch: function(options) { // Do something initial when launch. }, onShow: function(options) { // Do something when show. }, onHide: function() { // Do something when hide. }, onError: function(msg) { console.log(msg) }, globalData: 'I am global data' })
参数说明:
前台、后台定义: 当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。需要注意的是:只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。
onLaunch, onShow 参数
字段 | 类型 | 说明 |
---|---|---|
path | String | 打开小程序的路径 |
query | Object | 打开小程序的query |
scene | Number | 打开小程序的场景值,场景值 详见。 |
shareTicket | String | shareTicket,详见 获取更多转发信息 |
referrerInfo | Object | 当场景为由另一个小程序打开时,返回此字段 |
referrerInfo.appId | String | 来源小程序的 appId |
referrerInfo.extraData | Object | 来源小程序传过来的数据 |
2.getApp()
全局的 getApp()
函数,可以获取到小程序实例。
// other.js var appInstance = getApp() console.log(appInstance.globalData) // I am global data
注意:
App()
必须在 app.js
中注册,且不能注册多个。
不要在定义于 App()
内的函数中调用 getApp()
,使用 this
就可以拿到 app 实例。
不要在 onLaunch 的时候调用 getCurrentPages()
,此时 page 还没有生成。
通过 getApp()
获取实例之后,不要私自调用生命周期函数。
二、页面声明周期
1.Page()
每一个页面的.js文件中都会有一个Page()函数,接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。
示例代码:
//index.js Page({ data: { text: "This is page data." }, onLoad: function(options) { // Do some initialize when page load. }, onReady: function() { // Do something when page ready. }, onShow: function() { // Do something when page show. }, onHide: function() { // Do something when page hide. }, onUnload: function() { // Do something when page close. }, onPullDownRefresh: function() { // Do something when pull down. }, onReachBottom: function() { // Do something when page reach bottom. }, onShareAppMessage: function () { // return custom share data when user share. }, onPageScroll: function() { // Do something when page scroll }, // Event handler. viewTap: function() { this.setData({ text: 'Set some data for updating view.' }) }, customData: { hi: 'MINA' } })
object 参数说明:
声明周期函数:
onLoad: 页面加载
一个页面只会调用一次。
接收页面参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。
onShow: 页面显示
每次打开页面都会调用一次。
onReady: 页面初次渲染完成
一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
onHide: 页面隐藏
当navigateTo或底部tab切换时调用。
onUnload: 页面卸载
当redirectTo或navigateBack的时候调用。
页面相关事件处理函数
onPullDownRefresh: 下拉刷新
监听用户下拉刷新事件。
需要在config的window选项中开启enablePullDownRefresh。
当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
onReachBottom:上拉触底
监听用户上拉触底事件
onPageScroll
: 页面滚动
监听用户滑动页面事件。
参数为 Object,包含scrollTop字段(Number类型):页面在垂直方向已滚动的距离(单位px)
onShareAppMessage: 用户分享
只有定义了此事件处理函数,右上角菜单才会显示“分享”按钮
用户点击分享按钮的时候会调用
此事件需要 return 一个 Object,用于自定义分享内容
自定义分享字段
字段说明默认值
title分享标题当前小程序名称
desc分享描述当前小程序名称
path分享路径当前页面 path ,必须是以 / 开头的完整路径
三、数据绑定
在Page()函数中的data为页面初始数据,我们可以在其中设置一些初始值,显示在我们的页面上,相当于常量,不可变。但是如果这些值需要动态改变的时候,我们就需要用到setData()函数来绑定数据
setData()
setData() 函数接受一个对象,以 key,value 的形式表示将 this.data 中的 key 对应的值改变成 value。
其中 key 可以非常灵活,以数据路径的形式给出,如 array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义。
<view> {{name}} </view> <view> {{array[0]}}<br/> {{array[1]}} </view> Page({ data:{}, onLoad:function(){ this.setData({"name":"hi..."}); this.setData({"array":[0, 1 ,2]}); } })
生命周期
下图说明了 Page 实例的生命周期。