uniapp项目中小程序的生命周期

1. 小程序生命周期

这些生命周期函数是全局的，适用于整个小程序的运行过程。

1.1 onLaunch

• 触发时机：小程序初始化完成时触发，全局只触发一次。
• 用途：适合用于初始化操作，如获取用户信息、设置全局变量等。
• 示例代码：

App({
    onLaunch: function () {
        console.log('小程序初始化完成');
        // 初始化操作
    }
});

1.2 onShow

• 触发时机：小程序启动，或从后台进入前台显示时触发。
• 用途：适合用于更新数据或恢复状态。

App({
   onShow: function (options) {
       console.log('小程序进入前台');
       // options 是小程序启动时的参数
       console.log(options);
   }
});

1.3 onHide

• 触发时机：小程序从前台进入后台时触发。
• 用途：适合用于清理不需要的资源或暂停某些操作。
• 示例代码：

App({
    onHide: function () {
        console.log('小程序进入后台');
        // 暂停操作或清理资源
    }
});

1.4 onError

• 触发时机：小程序发生脚本错误或 API 调用失败时触发。
• 用途：适合用于记录错误日志或进行错误处理。
• 示例代码：

App({
    onError: function (msg) {
        console.log('小程序发生错误', msg);
        // 错误处理
    }
});

1.5 onPageNotFound

• 触发时机：用户访问了一个不存在的页面时触发。
• 用途：适合用于处理页面未找到的情况，如跳转到错误页面。
• 示例代码：

App({
    onPageNotFound: function (info) {
        console.log('页面未找到', info);
        // 跳转到错误页面
        uni.redirectTo({
            url: '/pages/error/error'
        });
    }
});

2. 页面生命周期

页面生命周期函数是针对单个页面的，每个页面都可以定义自己的生命周期函数。

2.1 onLoad

• 触发时机：页面加载时触发，每次页面加载都会触发一次。
• 用途：适合用于获取页面参数、初始化页面数据等。
• 示例代码：

Page({
    onLoad: function (options) {
        console.log('页面加载', options);
        // 初始化页面数据
    }
});

2.2 onShow

• 触发时机：页面显示时触发，每次页面显示都会触发一次。
• 用途：适合用于更新页面数据或恢复页面状态。
• 示例代码：

Page({
    onShow: function () {
        console.log('页面显示');
        // 更新页面数据
    }
});

2.3 onHide

• 触发时机：页面隐藏时触发，每次页面隐藏都会触发一次。
• 用途：适合用于清理页面资源或暂停某些操作。
• 示例代码：

Page({
    onHide: function () {
        console.log('页面隐藏');
        // 暂停操作或清理资源
    }
});

2.4 onUnload

• 触发时机：页面卸载时触发，每次页面卸载都会触发一次。
• 用途：适合用于清理页面资源。
• 示例代码：

Page({
    onUnload: function () {
        console.log('页面卸载');
        // 清理页面资源
    }
});

2.5 onReachBottom

• 触发时机：页面上拉触底时触发。
• 用途：适合用于加载更多数据
• 示例代码：

Page({
    onReachBottom: function () {
        console.log('页面上拉触底');
        // 加载更多数据
    }
});

3. 组件生命周期

组件也有自己的生命周期函数，用于管理组件的加载、显示、隐藏等状态。

3.1 created

• 触发时机：组件实例被创建时触发
• 用途：适合用于初始化组件数据。
• 示例代码：

Component({
    created: function () {
        console.log('组件创建');
        // 初始化组件数据
    }
});

3.2 attached

• 触发时机：组件被插入页面节点树时触发。
• 用途：适合用于获取页面数据或进行页面操作。
• 示例代码：

Component({
    attached: function () {
        console.log('组件插入页面');
        // 获取页面数据
    }
}

3.3 ready

• 触发时机：组件布局完成后触发。
• 用途：适合用于操作组件的 DOM 元素。
• 示例代码：

Component({
    ready: function () {
        console.log('组件布局完成');
        // 操作组件的 DOM 元素
    }
});

3.4 detached

• 触发时机：组件从页面节点树中移除时触发。
• 用途：适合用于清理组件资源。
• 示例代码：

Component({
    detached: function () {
        console.log('组件移除');
        // 清理组件资源
    }
});

4. 生命周期的优先级

• 全局生命周期 （onLaunch、onShow、onHide 等）的触发优先级高于 页面生命周期 （onLoad、onShow、onHide 等）。
• 页面生命周期 的触发优先级高于 组件生命周期 （created、attached、ready 等）。