微信小程序案例 3.3 生命周期函数

一、作业需求

1. 在案例 3.2 已完成项目基础上进行修改，不需要新建项目，保留原有的 5 个 tab 标签页面：首页、贾潮江、朱培娟、莫日发、朱言春，页面 UI、文字内容全部沿用。
2. 在app.js编写小程序应用生命周期：onLaunch、onShow、onHide。
3. 在 5 个页面的.js文件编写页面生命周期：onLoad、onReady、onShow、onHide、onUnload，使用console.log()输出日志信息。
4. 通过 Console 控制台观察日志输出，理解 tabBar 页面切换的生命周期执行规律。

二、开发实现过程

1. 项目准备

复制案例 3.2 整个项目文件夹，作为案例 3.3 的工程。

• app.json、全部 wxml 页面、app.wxss全局样式完全不修改，保留底部 tabBar 配置、卡片布局、感动人物完整文本。
• 只修改app.js以及 5 个页面的 js 脚本文件。

2. 编写应用生命周期 app.js

App({
  onLaunch() {
    console.log('app.js 中的 onLaunch 函数被调用了 -- 监听小程序初始化');
  },
  onShow() {
    console.log('app.js 中的 onShow 函数被调用了 -- 监听小程序启动或切前台');
  },
  onHide() {
    console.log('app.js 中的 onHide 函数被调用了 -- 监听小程序切后台');
  }
})

onLaunch：小程序打开只执行一次；onShow、onHide在前台后台来回切换反复触发。

3. 编写页面生命周期

以 index.js 为例，其余 4 个页面 js 参照同样格式，修改打印日志里的页面名称。

Page({
  onLoad() {
    console.log('index页面的 onLoad 函数被调用了 -- 监听页面加载');
  },
  onReady() {
    console.log('index页面的 onReady 函数被调用了 -- 监听页面初次渲染完成');
  },
  onShow() {
    console.log('index页面的 onShow 函数被调用了 -- 监听页面显示');
  },
  onHide() {
    console.log('index页面的 onHide 函数被调用了 -- 监听页面隐藏');
  },
  onUnload() {
    console.log('index页面的 onUnload 函数被调用了 -- 监听页面卸载');
  }
})

4. 测试操作步骤

1. 保存全部代码，清除缓存，重新编译小程序，打开调试器切换到Console控制台面板。
2. 小程序初次启动：观察打印顺序，先执行应用onLaunch，再执行首页页面onLoad → onShow → onReady。
3. 切换底部 tab 标签：切换到别的标签页，旧页面打印onHide，新页面打印onShow。
4. 模拟器模拟切后台：点击模拟器 Home 按键，小程序退后台，触发 app 的onHide；再切回小程序，触发 app 的onShow。

三、测试现象与结果

1. 切换 tab 标签页时，只会触发onShow和onHide，不会执行onUnload。

知识点：tabBar 页面常驻内存，页面只是隐藏，并不会销毁卸载；只有wx.navigateTo跳转打开的普通页面关闭时才会执行onUnload。

1. 黄色 Skyline 渲染模式警告，只是开发者工具版本提示，不属于程序错误，不影响程序运行和作业结果。
2. 小程序初始化时onLaunch仅执行一次；前台、后台切换会反复执行onShow、onHide。

控制台实际输出示例：

jiaxiangjiang页面的 onShow 函数被调用了 -- 监听页面显示
jiaxiangjiang页面的 onHide 函数被调用了 -- 监听页面隐藏

四、遇到的问题

表格

问题	原因	解决办法
控制台看不到打印日志	勾选控制台过滤，缓存没有清理	清除全部缓存重新编译，检查 Console 过滤条件选择Default levels
切换 tab 没有出现 onUnload	tabBar 页面机制，页面不会销毁	属于正常现象，记住 tab 页面生命周期特点即可
出现 Skyline 黄色警告	工具渲染版本提示	无需修改代码，不影响作业

五、心得体会

本次作业复用上一次 tab 标签项目，不用重新写页面布局，只添加生命周期回调函数。 我理解了小程序分为应用生命周期和页面生命周期两套回调函数。 特别注意 tabBar 页面的特性：标签切换页面不会被销毁，只会隐藏和显示，不会调用onUnload。通过控制台打印日志，可以直观看到代码执行先后顺序，帮助我们调试小程序程序逻辑。

拓展：普通跳转页面和 tabBar 页面生命周期行为不一样，写业务代码的时候，需要区分两者差异。