【前端小程序】第十章 小程序生命周期

1. 应用的生命周期

属性	类型	默认值	必填	说明
onLaunch	function	否	监听⼩程序初始化。
onShow	function	否	监听⼩程序启动或切前台。
onHide	function	否	监听⼩程序切后台。
onError	function	否	错误监听函数。
onPageNotFound	function	否	⻚⾯不存在监听函数。

1.1 应用的生命周期在 app.js文件中进行配置

//app.js
App({
    /* 
      1.  应用第一次启动的时候就会触发的事件 onLaunch
    */

    onLaunch() {
        console.log("onLaunch...");
    },

    /**
     * 2. 应用被用户看到
     */
    onShow() {
        // 对应用的数据或者页面效果重置
        console.log("onShow");
    },

    /**
     * 3. 应用被隐藏
     */
    onHide() {
        // 暂停或清除定时器
        console.log("onHide");
    },

    /**
     * 4. 应用的代码发生报错的时候就会触发
     */
    onError(e) {
        console.log("onError", e);
    },

    /**
     * 5. 当应用启动的时候找不到启动界面
     */
    onPageNotFound() {
        // 如果页面不存在通过js的方式重新跳转到页面，重新跳转到第二个首页
        /*  console.log("not found...");
         wx.navigateTo({
             url: '/pages/demo08/demo08'
         }) */
    }
})

1. 设置应用启动默认加载的页面

设置应用启动默认加载的应用

2. 页面生命周期方法

1. 官方参考文档:

属性	类型	说明
data	Object	⻚⾯的初始数据
onLoad	function	⽣命周期回调—监听⻚⾯加载
onShow	function	⽣命周期回调—监听⻚⾯显⽰
onReady	function	⽣命周期回调—监听⻚⾯初次渲染完成
onHide	function	⽣命周期回调—监听⻚⾯隐藏
onUnload	function	⽣命周期回调—监听⻚⾯卸载
onPullDownRefresh	function	监听⽤⼾下拉动作
onReachBottom	function	⻚⾯上拉触底事件的处理函数
onShareAppMessage	function	⽤⼾点击右上⻆转发
onPageScroll	function	⻚⾯滚动触发事件的处理函数
onResize	function	⻚⾯尺⼨改变时触发，详⻅响应显⽰区域变化
onTabItemTap	function	当前是tab⻚时，点击tab时触发

页面生命周期官网图解

2. 官网配置响应区域变化 : 官网配置响应区域变化

3. 配置完成屏幕响应区域之后工具上方会多出下面图标支持横竖屏切换:

横竖屏切换配置

4. demo页面生命周期配置:

// pages/demo17/demo17.js
Page({

    /**
     * 页面的初始数据
     */
    data: {

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        // 用于页面初始数据 
        console.log('初始化页面..', 'onLoad');
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function() {
        console.log('onShow...');
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function() {
        console.log('onReady');
    },


    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function() {
        console.log('onHide...');
    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function() {
        // 实现页面重定向的时候页面就会关闭 关闭就会写在页面 open-type 的属性值为 navigateBack 和 reLaunch 、redirect的时候即可实现页面卸载
        /* 
                demo17
             
        */
        console.log('onUnload....');
    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {
        // 需要在 app.json 文件中配置了下拉刷新   "enablePullDownRefresh": true
        console.log('onPullDownRefresh');
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {
        // 需要页面达到一定的高度实现页面的滚动触底的时候才会触发
        console.log('onReachBottom');
    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {
        console.log('onShareAppMessage');
    },

    /**
     * 当页面尺寸发生改变的时候触发，常见横竖屏切换的时候 ，横竖屏切换需要设置，全局设置在app.json 中 单页面设置在自己的页面的json文件中配置
     * 官网配置响应区域变化 : https://developers.weixin.qq.com/miniprogram/dev/framework/view/resizable.html#%E5%B1%8F%E5%B9%95%E6%97%8B%E8%BD%AC%E4%BA%8B%E4%BB%B6
     */
    onResize: function() {
        console.log('onResize');
    },

    onTabItemTap: function() {
        console.log('onTabItemTap');
    }
})