小程序的生命周期分为 app.js 管理的生命周期、每个page的生命周期。
app.js 管理的生命周期
App() 函数用来注册一个小程序。接收一个object参数，指定生命周期函数。App() 只能在app.js里面注册且只能注册一个。
object 参数说明：
| 属性 | 描述 | 触发机制 |
|---|---|---|
| onLaunch | 监听小程序初始化 | 当小程序初始化完成时，触发一次。（全局只触发一次） |
| onShow | 监听小程序显示 | 初始化完成 或 后台进入前台显示，触发onShow |
| onHide | 监听小程序隐藏 | 前台进入后台会触发onHide（点击后退按钮 或 Home键返回桌面） |
| 其他 | 可以添加任意的函数或者数据到object中 | 用 this 可以访问 |
小程序quickStart，在app.js自动生成的App函数:
//app.js
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
注意事项：
- 必须在app.js中注册，只能注册一个
- 不要在定义于app()内函数中调用 getApp()，使用 this 就可以拿到app实例
- 不要在onLaunch的时候调用 getCurrentPage，此时page还没生效
- 通过 getApp() 获取实例后，不要自己调用生命周期函数
页面的生命周期
Page() 函数用来注册一个页面。接受一个 object 参数，实现页面的初始数据、生命周期函数、事件处理函数等。
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
生命周期函数：
- 对页面的设置（如wx.setNavigationBarTitle）在 onReady 之后设置。
- onLoad函数中，参数可以获取 wx.navigationTo 和 wx.redirectTo 及 <navigator/> 中的 query 。
| 函数 | 说明 |
|---|---|
| onLoad | 页面加载，一个页面加载一次 |
| onShow | 页面显示，每次打开页面时调用 |
| onReady | 页面初次渲染完成，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。 |
| onHide | 页面隐藏，当navigationTo或底部tab切换时调用。 |
| onUnload | 页面卸载，当redirectTo和navigateBack时调用。 |
页面相关事件处理函数
-
onPullDownRefresh： 需要在window选项中添加 enablePullDownRefresh。当处理完数据刷新后，wx.stopPullDownRefresh 可以停止当前页面的下拉刷新。
-
onReachBottom： 上拉刷新事件。页面上拉触及底部的事件处理。
-
onShareAppMessage： 用户点击右上角转发事件。只有定义了这个事件左上角才会有转发Button，事件需要return一个 object ，用于自定义转发内容。自定义转发 title 和 path ，path 必须是以 / 开头的完整路径。
-
onPageScroll： 页面滚动触发事件的处理函数，参数是scrollTo(Number类型)，表示页面在垂直方向已滚动距离（单位：px）。
使用代码如下：
Page(
{
onPullDownRefresh: function () {
console.log("onPullDownRefresh" + new Date())
},
stopPullDownRefresh: function () {
wx.stopPullDownReferesh({
complete: function (res) {
console.log(res + new Date() )
}
})
},
onShareAppMessage: function () {
return
{
title: '自定义转发标题',
path: '/page/user?id=123'
}
},
}
)
事件处理函数
在渲染层可以在组件中加入事件绑定，当达到触发事件时，就会执行 Page 中定义的事件处理函数。
- Page.prototype.route： 获取当前页面路径。
- Page.prototype.setData： 改变 this.data 的值，单次设置的数据不超过1024k，尽量避免一次设置过多的数据。
-
文件作用域和模块化：
- js页面文件中声明的变量和函数值在该文件中有效，不同的文件中可以声明相同名字的变量和函数，不会相互影响。
- 全局数据可以在App()中设置。
- 提供函数给其他页面使用，小程序 js 模块只有通过 moudle.exports 暴露接口，其他 js 页面才可以引入引用。
在 util.js 里面有exports的应用
网友评论