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

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

文章目录

• [关于 uni-app 与原生微信小程序中的生命周期 ------ 一次"生命旅程"的解读](#关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读)
• • 引言
  • 生命周期的作用
  • [uni-app 的生命周期](#uni-app 的生命周期)
  • • [🔹 应用生命周期](#🔹 应用生命周期)
    • [🔹 页面生命周期](#🔹 页面生命周期)
  • 微信小程序的生命周期
  • • [🔹 应用生命周期](#🔹 应用生命周期)
    • [🔹 页面生命周期](#🔹 页面生命周期)
  • [uni-app 与 微信小程序生命周期对比](#uni-app 与 微信小程序生命周期对比)
  • 实际应用场景举例
  • 总结
  • [① 应用生命周期（App 级别）](#① 应用生命周期（App 级别）)
  • [② 页面生命周期（Page 级别）](#② 页面生命周期（Page 级别）)
  • [③ uni-app & 微信小程序对比小结（简图）](#③ uni-app & 微信小程序对比小结（简图）)
  • [③ uni-app & 微信小程序对比小结（简图）](#③ 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 启动啦！");
    // 例如：检查本地是否有 token
    const 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