关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读

引言

如果把一个小程序的运行比作一个人的一生：

• 从出生（创建页面） → 到成长（页面渲染） → 到学习工作（与用户交互） → 到离开（页面销毁）。
  这就是所谓的 生命周期。

在 uni-app 和 原生微信小程序 中，都有一套生命周期函数来管理页面的“起承转合”。理解这些生命周期，就像知道什么时候吃饭、什么时候睡觉一样重要。否则你可能在不该吃饭的时候硬塞一口，结果报错 🤣。

---

生命周期的作用

生命周期的主要作用是：

1. 让我们在合适的时间做合适的事情
   • 页面刚出现：检查登录状态、拉取服务器数据。
   • 页面即将消失：保存草稿、停止定时器。
2. 提高代码结构清晰度
   • 不用把所有逻辑都写在一个地方，而是分阶段执行。
3. 避免性能问题和 Bug
   • 在正确的生命周期调用接口，可以避免“白屏”“数据没加载到”等情况。

---

uni-app 的生命周期

uni-app 的生命周期有两大类：

• 应用级别生命周期（整个 App，从打开到退出）
• 页面级别生命周期（单个页面，从进入到离开）

🔹 应用生命周期

生命周期函数	触发时机	作用举例
onLaunch	App 初始化时触发（只触发一次）	适合做 登录态检查、初始化全局数据
onShow	App 前台运行时触发	适合统计用户使用时长、进入页面埋点
onHide	App 进入后台时触发	停止音乐播放、保存用户输入

示例代码：

// App.vue
export default {// 应用启动时（只触发一次）onLaunch() {console.log("App 启动啦！");// 例如：检查本地是否有 tokenconst token = uni.getStorageSync("token")if (!token) {console.log("未登录，跳转到登录页")uni.redirectTo({ url: "/pages/login/login" })}},// 应用进入前台onShow() {console.log("App 回到前台");// 例如：重新刷新首页数据},// 应用进入后台onHide() {console.log("App 进入后台");// 例如：停止音乐播放}
}

---

🔹 页面生命周期

生命周期函数	触发时机	作用举例
onLoad	页面加载时	拉取接口数据、获取参数
onShow	页面显示时	每次进入页面时刷新数据
onReady	页面首次渲染完成时	页面渲染完成后操作 DOM 或加载动画
onHide	页面隐藏时	停止定时器、暂停视频
onUnload	页面卸载时	清理数据、释放资源

示例代码：

// pages/home/home.vue
export default {// 页面加载时onLoad(query) {console.log("页面加载，参数：", query);// 拉取服务器数据this.getPageData()},// 页面显示时onShow() {console.log("页面显示");// 例如：刷新用户消息数量},// 页面渲染完成onReady() {console.log("页面渲染完成");// 例如：开启动画},// 页面隐藏onHide() {console.log("页面隐藏");// 停止定时器clearInterval(this.timer)},// 页面卸载onUnload() {console.log("页面卸载");// 清理缓存数据},methods: {getPageData() {uni.request({url: "https://api.example.com/home",success: (res) => {console.log("首页数据：", res.data)}})}}
}

---

微信小程序的生命周期

微信小程序生命周期与 uni-app 大同小异，但写法上略有区别。

🔹 应用生命周期

生命周期函数	触发时机	作用举例
onLaunch	小程序初始化（只一次）	初始化登录态
onShow	小程序进入前台	埋点统计、页面更新
onHide	小程序进入后台	停止音乐、保存状态

// app.js
App({onLaunch() {console.log("小程序启动")},onShow() {console.log("小程序进入前台")},onHide() {console.log("小程序进入后台")}
})

---

🔹 页面生命周期

生命周期函数	触发时机	作用举例
onLoad	页面加载	获取页面参数、请求数据
onShow	页面显示	每次进入时刷新数据
onReady	页面首次渲染完成	操作 DOM、执行动画
onHide	页面隐藏	暂停视频/音乐
onUnload	页面卸载	释放资源

// pages/home/home.js
Page({onLoad(query) {console.log("页面加载", query)this.getPageData()},onShow() {console.log("页面显示")},onReady() {console.log("页面渲染完成")},onHide() {console.log("页面隐藏")},onUnload() {console.log("页面卸载")},getPageData() {wx.request({url: "https://api.example.com/home",success(res) {console.log("首页数据：", res.data)}})}
})

---

uni-app 与 微信小程序生命周期对比

场景	uni-app	微信小程序	建议做的事
应用启动	onLaunch	onLaunch	检查登录、初始化全局数据
应用进入前台	onShow	onShow	埋点统计、刷新首页
页面加载	onLoad	onLoad	拉取接口数据、获取路由参数
页面显示	onShow	onShow	刷新页面数据
页面渲染完成	onReady	onReady	开启动画、处理 UI
页面隐藏	onHide	onHide	暂停定时器/视频
页面卸载	onUnload	onUnload	清理缓存、释放资源

---

实际应用场景举例

1. 查看登录情况
   • 放在 应用 onLaunch：只需要检查一次。
2. 调用服务器页面初始数据
   • 放在 页面 onLoad：页面加载就拉取数据。
3. 刷新页面数据（比如消息未读数）
   • 放在 页面 onShow：因为用户可能多次进入页面，需要更新。
4. 开启动画、获取页面元素大小
   • 放在 页面 onReady：确保页面渲染完成。
5. 定时器、视频播放
   • 在 onShow 启动，在 onHide 清除。

---

总结

生命周期就像是舞台剧的流程表：

• 灯亮了（onLoad）：演员入场，布置舞台。
• 演出中（onShow）：和观众互动，唱歌跳舞。
• 幕布落下（onHide）：暂停，后台准备。
• 演出结束（onUnload）：清理道具，撤场。

掌握它们，你就能在正确的时机安排代码，让小程序运行流畅自然。

被着急退出，有彩蛋！！！

① 应用生命周期（App 级别）

启动小程序 / 打开App↓onLaunch (只执行一次)↓onShow (每次进入前台都会执行)↓
[用户切到后台] → onHide↓
[用户重新打开] → onShow↓
[彻底关闭小程序] → 生命周期结束

👉 适合做的事：

• onLaunch：检查登录状态、初始化全局变量。
• onShow：刷新首页、埋点统计。
• onHide：保存草稿、停止音乐。

---

② 页面生命周期（Page 级别）

进入页面↓onLoad (页面加载, 获取参数/请求数据)↓onShow (页面显示, 每次进入都会执行)↓onReady (首次渲染完成, 操作UI/动画)↓
[用户切换页面] → onHide (页面隐藏)↓
[再次进入页面] → onShow (重新触发)↓
[彻底关闭页面] → onUnload (页面销毁)

👉 适合做的事：

• onLoad：获取路由参数，请求接口数据。
• onShow：刷新消息、更新数据。
• onReady：开启动画、操作 DOM。
• onHide：暂停视频、停止定时器。
• onUnload：清理缓存、释放资源。

---

③ uni-app & 微信小程序对比小结（简图）

【App 启动】↓App.onLaunch → App.onShow↓
【进入页面】↓Page.onLoad → Page.onShow → Page.onReady↓
【页面切换】↓Page.onHide → Page.onShow↓
【退出页面】↓Page.onUnload↓
【App 进入后台】↓App.onHide

e`：暂停视频、停止定时器。

• onUnload：清理缓存、释放资源。

---

③ uni-app & 微信小程序对比小结（简图）

【App 启动】↓App.onLaunch → App.onShow↓
【进入页面】↓Page.onLoad → Page.onShow → Page.onReady↓
【页面切换】↓Page.onHide → Page.onShow↓
【退出页面】↓Page.onUnload↓
【App 进入后台】↓App.onHide