微信小程序-生命周期

原创已于 2025-02-22 14:56:30 修改 · 1.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

于 2025-02-07 18:49:00 首次发布

微信小程序开发专栏收录该内容

5 篇文章

订阅专栏

文章目录

注：本文章只描述一些重点，详情使用方法见官方文档：
微信开放文档/开发-小程序生命周期
微信开放文档/开发-页面生命周期
微信开放文档/开发-组件生命周期

一、小程序运行机制

小程序共有以下几种运行状态：
1、冷启动：如果用户首次打开，或者小程序销毁后被用户再次打开，此时小程序需要重新加载启动
2、热启动：如果用户已经打开过某小程序，过一定时间内再次打开，此时小程序未被销毁，只是从后台状态进入前台状态
3、挂起：小程序进行后台状态5秒后，微信停止小程序 JS 线程执行，小程序进入挂起状态。若开发者使用了后台播放音乐、地理位置等能力时，小程序会持续在后台运行，不会挂起
4、销毁：如用户很久没有使用小程序或系统资源过于紧张，小程序就会被销毁，即完全终止运行。当小程序挂起30分钟后小程序会被销毁；当小程序占用系统资源过高，可能会被系统销毁或者被微信客户端主动回收

小程序运行状态切换流程图：

二、小程序更新机制

在访问小程序时，微信会将小程序的代码包缓存到本地，在开发者发布了新的小程序版本后，微信客户端会检查本地缓存的小程序有没有新版本，并进行小程序代码包的更新。
小程序的更新机制有两种：
1、启动时同步更新：微信运行时，会定期检查最近使用的小程序是否有更新。如果有更新，下次小程序启动时会同步进行更新，更新到最新版本后再打开小程序。如果用户长时间未打开小程序，会强制同步检查版本更新。
2、启动时异步更新：在启动前没有发现更新，小程序每次冷启动时，都会异步检查是否有更新版本。如果发现有新版本，将会异步下载新版本的代码包，将小程序的新版本在下次冷启动时使用。在启动时异步更新情况下，如果开发者希望可以立即版本更新，可以使用 wx.getUpdateManager API 进行处理，在有新版本时提示用户重启小程序更新版本。

如何模拟版本更新： 微信开发者工具->添加编辑模式->勾选”下次编辑时模拟更新“
注：若未生效，则清除缓存或者重启当前项目，再勾选”下次编辑时模拟更新“

app.js 文件代码示例：

App({
  // onLaunch 是小程序的钩子函数，这个函数在冷启动时会执行
  // 当小程序冷启动时，微信后台会自动请求新版本的信息，若有新版本会立即下载
  onLaunch () {
    // 使用 getUpdateManager 方法监听下载的状态
    const updateManager = wx.getUpdateManager()
    // 当下载新版本完成后，会触发 onUpdateReady 回调函数
    updateManager.onUpdateReady (function () {
      wx.showModal({
        title: '更新提示',
        content: '新版本已下载完成，是否重启小程序？',
        complete: (res) => {
          if (res.cancel) {
          }
          if (res.confirm) {
            //重启小程序使用新版本
            updateManager.applyUpdate()
          }
        }
      })
    })
  }
})

三、小程序生命周期

应用的生命周期是指应用程序进程从创建到消亡的整个过程；小程序的生命周期是指小程序从启动到销毁的整个过程。
一个小程序的完整生命周期是由应用生命周期、页面生命周期、组件生命周期三部分组成。

小程序的生命周期伴随着一些函数，这些函数是由小程序框架本身提供，称为生命周期函数，生命周期函数会按照顺序依次自动触发调用。帮助程序员在特定的时机执行特定的操作，辅助程序员完成一些比较复杂的逻辑。

1、应用生命周期：

应用生命周期是指一个小程序从启动->运行->销毁的整个过程，应用生命周期伴随着一些函数，称为应用生命周期函数，这些函数需要在 app.js 文件的 App() 方法中进行定义，App() 方法必须在 app.js 中进行调用，主要用来注册小程序
应用生命周期函数由 onLaunch、on Show、onHide 三个函数组成：
当小程序初始化完成时，会触发 onLaunch（全局只触发一次即只有冷启动触发）
当小程序启动，或从后台进入前台显示，会触发 onShow（冷启动和热启动都会触发）
当小程序从前台进入后台，会触发 onHide

注：从小程序生命周期角度来看，一般讲的【启动】专指冷启动，热启动一般称为后台切前台。

2、页面生命周期：

页面生命周期是指小程序页面从加载->运行->销毁的整个过程，页面生命周期伴随着一些函数，称为页面生命周期函数，这些函数需要在 Page() 方法中进行定义

1、onLoad：在页面创建时执行，一个页面只执行一次
2、onShow：页面展示时执行，从后台进入前台时也执行
3、onReady：页面初次渲染完成时执行，代表页面已准备妥当，可以与视图层进行交互，一个页面只执行一次
4、onHide：页面隐藏时执行，在当前小程序进入后台时也会触发执行
5、onUnload：页面被销毁或卸载时执行
注：
1、tabBar 页面之间相互切换，页面不会被销毁，只会被隐藏
2、点击左上角，返回上一页面，当前页面会被销毁

3、组件生命周期：

组件的生命周期，指的是组件自身的一些钩子函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
组件的生命周期函数需要在 lifetimes 字段内进行声明，组件的生命周期函数有五个： created attached ready moved detached，最重要的生命周期是 created attached detached
custom06.js 文件代码示例：

Component({
  // 组件生命周期声明对象
  lifetimes: {
    // created：组件实例被创建好以后执行，在组件实例刚刚被创建时执行，注意此时不能调用 setData
    created () {
      console.log("组件 created")
      // 通过 this 的方式给组件添加一些自定义属性
      this.test = '测试'
    },
    // attached：组件被初始化完毕，模板解析完成，已经把组件挂载到页面上，一般页面的交互会在此函数中执行
    attached () {
      console.log("组件 attached")
      console.log(this.test)
    },
    // detached：组件被销毁时触发执行
    detached () {
      console.log("组件 detached")
    }
  }
})

page.wxml 文件代码示例：

//自定义组件的生命周期
<custom06 wx:if="{{ number === 1 }}" />
<button type="warn" bind:tap="detachedComponents">销毁自定义组件</button>

page.js 文件代码示例：

// pages/cart/cart.js
Page({
  detachedComponents() {
    this.setData({
      number: this.data.number + 1
    })
  },
    /**
 - 页面的初始数据
   */
  data:{
      number: 1
  }
})

4、组件所在页面的生命周期：

还有一些特殊的生命周期，它们并非与组件有很强的关联，主要用于组件内部监听父组件的展示、隐藏状态，从而方便组件内部执行一些业务逻辑的处理，这样的生命周期称为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义。其中可用的生命周期包括 4 个：

生命周期	参数	描述
show	无	组件所在的页面被展示时执行
hide	无	组件所在的页面被隐藏时执行
resize	Object Size	组件所在的页面尺寸变化时执行
routeDone	Object Size	组件所在页面路由动画完成时执行
注意：自定义 tabBar 的 pageLifetime 不会触发。

custom06.js 文件代码示例：

Component({
  // 组件所在页面的生命周期声明对象
  pageLifetimes: {
    // 监听组件所在的页面展示（后台切前台）状态
    show () {
      console.log("组件所在的页面展示")
    },
    // 监听组件所在的页面隐藏（前台切后台、点击 tabBar）状态
    hide () {
      console.log("组件所在的页面隐藏")
    }
  }
})