目录
1. 小程序生命周期介绍
一个小程序完整的生命周期由 应用生命周期、页面生命周期 和 组件生命周期 三部分来组成。
应用生命周期：是指应用程序进程从创建到消亡的整个过程。
小程序的生命：周期指的是小程序从启动到销毁的整个过程。
小程序生命周期伴随着一些函数，这些函数由小程序框架本身提供，被称为生命周期函数，生命周期函数会按照顺序依次自动触发调用。帮助程序员在特定的时机执行特定的操作，辅助程序员完成一些比较复杂的逻辑。
2. 应用生命周期
应用生命周期通常是指一个小程序从启动→运行→销毁的整个过程。
应用生命周期伴随着一些函数，我们称为应用生命周期函数，应用生命周期函数需要在app.js 文件的App()方法中进行定义，App() 方法必须在 app.js 中进行调用，主要用来注册小程序。
应用生命周期函数由onLaunch、onShow、onHide三个函数组成。
找到app.js文件，将之前app.js文件代码注释掉或者删掉，输入app，选择带有方框的APP：
这样能快速填充我们所要需要编写的内容：
编写代码：
// 将之前app.js文件代码注释掉或者删掉
App({
/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
*/
onLaunch: function () {
console.log('onLaunch 小程序初始化完成时')
},
/**
* 当小程序启动，或从后台进入前台显示，会触发 onShow
*/
onShow: function (options) {
console.log('onShow 小程序启动，或从后台进入前台显示')
},
/**
* 当小程序从前台进入后台，会触发 onHide
*/
onHide: function () {
console.log('onHide 当小程序从前台进入后台')
},
/**
* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
*/
onError: function (msg) {
}
})
点击编译，首先我们会发现，数据打印出来了，但是内容还有系统本身打印的内容，我们可以进行如下操作：
这样可以屏蔽到系统打印的内容，若想返回可以点击叉号，进行将系统打印显示出来：
可以看到此时，只触发了“onLaunch”和“onShow”，那是因为“onHide”是当小程序从前台进入后台触发的，所以我们可以点击：
会发现此时触发了“onHide”：
可以任意点击黄色框选部分，返回之前页面：
会发现：
当进行冷启动时，才会触发 onLaunch 钩子函数
如果是热启动，不会触发 onLaunch 钩子函数，会触发 onShow 钩子函数
因此 onLaunch 全局只触发一次
3. 页面生命周期
页面生命周期就是指小程序页面从 加载 → 运行 → 销毁的整个过程。
页面生命周期函数需要在 Page() 方法进行定义。
小程序中的页面生命周期包括以下几个主要阶段：
① onLoad：页面加载时触发，一般在这个阶段可以进行页面初始化操作，如数据加载、初始化变量等。
② onShow：页面显示时触发，每次打开页面都会触发。在这个阶段可以进行页面数据的刷新操作，如从后台切换回前台时需要更新数据。
③ onReady：页面初次渲染完成时触发，表示页面已经准备好，可以和视图层进行交互。一般在这个阶段可以进行页面渲染完毕后的操作。
④ onHide：页面隐藏时触发，当navigateTo或底部tab切换时会触发。可以在这个阶段进行一些页面隐藏时需要执行的操作，如清除定时器、暂停音视频播放等。
⑤ onUnload：页面卸载时触发，当redirectTo或navigateBack时会触发。在这个阶段可以进行页面卸载前的清理工作，如清除定时器、释放资源等。
⑥ onPullDownRefresh：用户下拉页面时触发，在这个阶段可以进行下拉刷新操作，一般用于实现页面的下拉刷新功能。
⑦ onReachBottom：页面上拉触底时触发，一般用于实现页面的上拉加载更多功能。
⑧ onShareAppMessage：用户点击分享按钮或右上角菜单分享时触发，可以自定义分享内容和链接。
⑨ onPageScroll：页面滚动时触发，可以获取页面滚动的位置信息，实现一些滚动相关的效果。
⑩ onResize：页面尺寸变化时触发，一般用于监听页面尺寸的变化，如横竖屏切换时触发。
主要触发流程：
找到首页，找到“index.js”文件，将page文件内容删除：
输入page，找到带有方框的page：
其会帮我们自动填充代码：
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})将app.js的文件注释掉或者删除，在index.js文件中编写代码：
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log('onLoad 页面创建的时候执行')
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log('onReady 页面初次渲染完成的时候执行，代表页面已经准备妥当，可以和视图层来进行交互')
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log('onShow 页面在前台展示的时候执行')
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log('onHide 页面隐藏的时候执行')
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
console.log('onUnload 页面卸载的时候执行')
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})此时代码运行结果：
使用<navigator> 组件，用于实现页面跳转到列表页面并且采用重定向（redirect）方式跳转。
redirect：销毁当前页面，跳转到下一个页面。
<navigator url="/pages/list/list" open-type="redirect">跳转到列表页面</navigator>
点击“跳转到列表页面”：
使用<navigator> 组件，用于实现页面跳转到列表页面并且采用navigate方式跳转。
navigate：保留当前页面，跳转到下一个页面
编写代码：
<navigator url="/pages/list/list" open-type="navigate">navigate 跳转到列表页面</navigator>
点击“navigate 跳转到列表页面”：
点击：
出现：
扫一扫
2923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
