【微信小程序】小程序应用和页面生命周期_小程序页面的生命周期(1)

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

• 小程序的启动，表示生命周期的开始
• 小程序的关闭，表示生命周期的结束
• 中间小程序运行的过程，就是小程序的生命周期

生命周期的分类

在小程序中，生命周期分为两类，分别是:

• 应用生命周期
  特指小程序从启动->运行->销毁的过程
• 页面生命周期
  特指小程序中，每个页面的加载->渲染->销毁的过程

其中，页面的生命周期范围较小，应用程序的生命周期范围较大：

生命周期函数

生命周期函数:是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。

生命周期函数的作用:允许程序员在特定的时间点，执行某些特定的操作。例如，页面刚加载的时候，可以在onLoad生命周期函数中初始化页面的数据。

注意:生命周期强调的是时间段，生命周期函数强调的是时间点。

小程序中的生命周期函数分为两类，分别是:

• 应用的生命周期函数
  特指小程序从启动->运行-→>销毁期间依次调用的那些函数
• 页面的生命周期函数
  特指小程序中，每个页面从加载->渲染-→>销毁期间依次调用的那些函数

小程序的应用生命周期函数

小程序的应用生命周期函数需要在app.js 中进行声明。如：

App({
  /\*\*
 \* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
 \*/
  onLaunch: function () {
      console.log("小程序启动！");
  },
  /\*\*
 \* 当小程序启动，或从后台进入前台显示，会触发 onShow
 \*/
  onShow: function (options) {
      console.log('小程序正在前台运行！');
  },
  /\*\*
 \* 当小程序从前台进入后台，会触发 onHide
 \*/
  onHide: function () { 
      console.log("小程序进入后台运行！");
  },
  /\*\*
 \* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
 \*/
  onError: function (msg) {
    
  }
})

1. 用户首次打开小程序，触发 onLaunch（全局只触发一次）。
2. 小程序初始化完成后，触发onShow方法，监听小程序显示。
3. 小程序从前台进入后台，触发 onHide方法。
4. 小程序从后台进入前台显示，触发 onShow方法。
5. 小程序后台运行一定时间，或系统资源占用过高，会被销毁。

属性	类型	描述	触发时机
onLaunch	Function	监听小程序初始化	当小程序初始化完成时，会触发 onLaunch（全局只触发一次）。
onShow	Function	监听小程序显示	当小程序启动，或从后台进入前台显示，会触发 onShow
onHide	Function	监听小程序隐藏	当小程序从前台进入后台，会触发 onHide
onError	Function	错误监听函数	当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
其他	Any		开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问，上面的getPics就是函数， globalName是数据，这里面的函数和数据都是全局的。调用方式：在Pager中通过getApp()方法得到App对象并获得全局的数据和调用全局的函数

前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。

小程序的页面生命周期函数

小程序的页面生命周期函数需要在页面.js 中进行声明。如：

Page({
    /\*\*
 \* 页面的初始数据
 \*/
    data: {
    },

    /\*\*
 \* 生命周期函数--监听页面加载
 \*/
    onLoad(options) {
        console.log('本地生活页面加载完毕');
    },
    /\*\*
 \* 生命周期函数--监听页面初次渲染完成
 \*/
    onReady() {
        console.log("初次渲染完毕！");
    },
    /\*\*
 \* 生命周期函数--监听页面显示
 \*/
    onShow() {
        console.log("页面显示完成");
    },
    /\*\*
 \* 生命周期函数--监听页面隐藏
 \*/
    onHide() {
        console.log("页面已被隐藏！");
    },
    /\*\*
 \* 生命周期函数--监听页面卸载
 \*/
    onUnload() {
        console.log("GG");
    },

    /\*\*
 \* 页面相关事件处理函数--监听用户下拉动作
 \*/
    onPullDownRefresh() {


![img](https://img-blog.csdnimg.cn/img_convert/ae06dcdffe65f2e5f979008fbbdc4391.png)
![img](https://img-blog.csdnimg.cn/img_convert/97344dd5c26f9e8485ff2310c8a6e994.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.youkuaiyun.com/topics/618668825)**

课程，涵盖了95%以上C C++开发知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.youkuaiyun.com/topics/618668825)**