1. 應用的生命周期

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

//app.js
App({
    /* 
      1.  應用第一次啟動的時候就會觸發(fā)的事件 onLaunch
    */

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

    /**
     * 2. 應用被用戶看到
     */
    onShow() {
        // 對應用的數(shù)據(jù)或者頁面效果重置
        console.log("onShow");
    },

    /**
     * 3. 應用被隱藏
     */
    onHide() {
        // 暫驼铰玻或清除定時器
        console.log("onHide");
    },

    /**
     * 4. 應用的代碼發(fā)生報錯的時候就會觸發(fā)
     */
    onError(e) {
        console.log("onError", e);
    },

    /**
     * 5. 當應用啟動的時候找不到啟動界面
     */
    onPageNotFound() {
        // 如果頁面不存在通過js的方式重新跳轉到頁面，重新跳轉到第二個首頁
        /*  console.log("not found...");
         wx.navigateTo({
             url: '/pages/demo08/demo08'
         }) */
    }
})

1. 設置應用啟動默認加載的頁面

設置應用啟動默認加載的應用

2. 頁面生命周期方法

1. 官方參考文檔:

頁面生命周期官網(wǎng)圖解

2. 官網(wǎng)配置響應區(qū)域變化 : 官網(wǎng)配置響應區(qū)域變化

3. 配置完成屏幕響應區(qū)域之后工具上方會多出下面圖標支持橫豎屏切換:

橫豎屏切換配置

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

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

    /**
     * 頁面的初始數(shù)據(jù)
     */
    data: {

    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面加載
     */
    onLoad: function(options) {
        // 用于頁面初始數(shù)據(jù) 
        console.log('初始化頁面..', 'onLoad');
    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面顯示
     */
    onShow: function() {
        console.log('onShow...');
    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
     */
    onReady: function() {
        console.log('onReady');
    },


    /**
     * 生命周期函數(shù)--監(jiān)聽頁面隱藏
     */
    onHide: function() {
        console.log('onHide...');
    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面卸載
     */
    onUnload: function() {
        // 實現(xiàn)頁面重定向的時候頁面就會關閉 關閉就會寫在頁面 open-type 的屬性值為 navigateBack 和 reLaunch 、redirect的時候即可實現(xiàn)頁面卸載
        /* <navigator url="/pages/demo17/demo17"  open-type="redirect">
                demo17
            </navigator> 
        */
        console.log('onUnload....');
    },

    /**
     * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
     */
    onPullDownRefresh: function() {
        // 需要在 app.json 文件中配置了下拉刷新   "enablePullDownRefresh": true
        console.log('onPullDownRefresh');
    },

    /**
     * 頁面上拉觸底事件的處理函數(shù)
     */
    onReachBottom: function() {
        // 需要頁面達到一定的高度實現(xiàn)頁面的滾動觸底的時候才會觸發(fā)
        console.log('onReachBottom');
    },

    /**
     * 用戶點擊右上角分享
     */
    onShareAppMessage: function() {
        console.log('onShareAppMessage');
    },

    /**
     * 當頁面尺寸發(fā)生改變的時候觸發(fā)基茵，常見橫豎屏切換的時候 奋构，橫豎屏切換需要設置，全局設置在app.json 中 單頁面設置在自己的頁面的json文件中配置
     * 官網(wǎng)配置響應區(qū)域變化 : 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');
    }
})