微信小程序——生命周期详解（代码解读）

✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页：Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
💞当前专栏：微信小程序学习分享
✨特色专栏：国学周更-心性养成之路
🥭本文内容：微信小程序——使用 Vant 组件实现 Popup 弹出层（各位置弹出详细代码分享）

一、生命周期分类

  小程序中的生命周期函数可以分为两类：应用生命周期和页面生命周期。

1、应用生命周期

  定义： 小程序的生命周期函数是在app.js中调用，通过App(Object)函数用来注册一个小程序，指定其小程序的生命周期回调。

• onLaunch： 小程序初始化时触发，只执行一次。可以做一些全局的初始化操作。
• onShow： 小程序启动或从后台进入前台时触发。可以在此进行页面状态的更新或数据的初始化。
• onHide： 小程序从前台进入后台时触发。可以在此做一些资源释放或数据保存的操作。
• onError： 小程序发生脚本错误或 API 调用失败时触发。

  在应用生命周期中，onLaunch是小程序初始化的入口函数，而onShow和onHide则是用来处理小程序的前后台切换。onError用于处理小程序中的错误，比如脚本错误或 API 调用失败等。

2、页面生命周期

• onLoad： 页面加载时触发，只执行一次。可以在此进行页面初始化的操作，比如发送网络请求获取数据。
• onShow： 页面被显示时触发，可以用来进行页面状态更新。
• onReady： 页面初次渲染完成时触发，表示页面已经准备好，可以和视图层进行交互。
• onHide： 页面被隐藏时触发，可以做一些资源释放或数据保存的操作。
• onUnload： 页面被关闭时触发，可以做一些清理工作。

  在页面生命周期中，onLoad和onReady是页面的初始化阶段，onShow和onHide用于在页面显示和隐藏时进行响应，而onUnload则是在页面被完全关闭时触发。

二、生命周期案例详解

1、应用生命周期函数案例

• onLaunch：
  该函数在小程序初始化时触发，只执行一次。
  可以在此进行全局的初始化操作，比如获取用户信息、登录等。

示例代码：

App({onLaunch: function() {// 小程序初始化时执行的操作console.log("小程序初始化");// 获取用户信息wx.getUserInfo({success: function(res) {console.log(res.userInfo);}});}
})

• onShow：
  该函数在小程序启动或从后台进入前台时触发。
  可以在此进行页面状态的更新或数据的初始化。

示例代码：

App({onShow: function() {// 小程序启动或从后台进入前台时执行的操作console.log("小程序显示");// 更新用户状态this.globalData.isLogin = true;}
})

• onHide：
  该函数在小程序从前台进入后台时触发。
  可以在此做一些资源释放或数据保存的操作。

示例代码：

App({onHide: function() {// 小程序从前台进入后台时执行的操作console.log("小程序隐藏");// 保存数据wx.setStorageSync('data', this.globalData.data);}
})

• onError：
  该函数在小程序发生脚本错误或 API 调用失败时触发。
  可以在此做错误处理或日志记录。

示例代码：

App({onError: function(err) {// 小程序发生错误时执行的操作console.log("小程序出错", err);// 记录日志wx.reportAnalytics('error', {message: err.message,stack: err.stack});}
})

2、页面生命周期函数案例

• onLoad：
  该函数在页面加载时触发，只执行一次。
  可以在此进行页面初始化的操作，比如发送网络请求获取数据。

示例代码：

Page({onLoad: function(options) {// 页面加载时执行的操作console.log("页面加载");// 发送网络请求wx.request({url: 'https://api.example.com/data',success: function(res) {console.log(res.data);}});}
})

• onShow：
  该函数在页面被显示时触发。
  可以用来进行页面状态更新。

示例代码：

插入代码
复制代码
Page({onShow: function() {// 页面显示时执行的操作console.log("页面显示");// 更新页面状态this.setData({isReady: true});}
})

• onReady：
  该函数在页面初次渲染完成时触发。
  表示页面已经准备好，可以和视图层进行交互。

示例代码：

Page({onReady: function() {// 页面初次渲染完成时执行的操作console.log("页面渲染完成");// 执行交互操作wx.showToast({title: "页面已加载"});}
})

• onHide：
  该函数在页面被隐藏时触发。
  可以做一些资源释放或数据保存的操作。

示例代码：

插入代码
复制代码
Page({onHide: function() {// 页面隐藏时执行的操作console.log("页面隐藏");// 释放资源this.data.list = null;}
})

• onUnload：
  该函数在页面被关闭时触发。
  可以做一些清理工作。

示例代码：

插入代码
复制代码
Page({onUnload: function() {// 页面被关闭时执行的操作console.log("页面关闭");// 清理工作wx.removeStorageSync('data');}
})

---

  码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识，点击关注博主，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。