微信小程序运行原理揭秘：高效的更新机制

会思想的苇草i

已于 2023-12-02 12:22:17 修改

阅读量3.1k

点赞数 3

分类专栏：前端文章标签：微信小程序小程序微信 JavaScript 微信开放平台

于 2023-04-03 15:55:41 首次发布

本文链接：https://blog.csdn.net/ashiyi66/article/details/129930913

版权

前端专栏收录该内容

46 篇文章 9 订阅

订阅专栏

微信小程序运行原理揭秘：高效的更新机制

1、微信小程序运行机制
2、微信小程序更新机制
注意

1、微信小程序运行机制

微信小程序运行机制

在这里插入图片描述

官方文档描述的很详细，所以这里只介绍主要的相关概念。

1.1 前台和后台

小程序启动后，界面被展示给用户，此时小程序处于前台状态。
当用户点击右上角按钮关闭小程序，或者按了设备 Home 键离开微信时，小程序并没有完全终止运行，而是进入了后台状态，小程序还可以运行一小段时间。
当用户再次进入微信或再次打开小程序，小程序又会从后台进入前台。但如果用户很久没有再进入小程序，或者系统资源紧张，小程序可能被销毁，即完全终止运行。

1.2 小程序启动：冷启动和热启动

小程序启动可以分为两种情况，一种是冷启动，一种是热启动。

冷启动：如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动。
热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。

1.3 小程序销毁

通常，只有当小程序进入后台一定时间，或者系统资源占用过高，才会被销毁。具体而言包括以下几种情形：

当小程序进入后台，可以维持一小段时间的运行状态，如果这段时间内都未进入前台，小程序会被销毁。
当小程序占用系统资源过高，可能会被系统销毁或被微信客户端主动回收。

2、微信小程序更新机制

微信小程序更新机制
开发者在管理后台发布新版本的小程序之后，微信客户端会有若干个时机去检查本地缓存的小程序有没有新版本，并进行小程序的代码包更新。但如果用户本地有小程序的历史版本，此时打开的可能还是旧版本。

2.1 启动时同步更新

在以下情况下，小程序启动时会同步更新代码包。同步更新会阻塞小程序的启动流程，影响小程序的启动耗时。
如果更新失败或超时，为了保障小程序的可用性，还是会使用本地版本打开。

定期检查发现版本更新

微信运行时，会定期检查最近使用的小程序是否有更新。如果有更新，下次小程序启动时会同步进行更新，更新到最新版本后再打开小程序，尽可能保证用户能够尽快使用小程序的最新版本。

用户长时间未使用小程序

用户长时间未使用小程序时，为保障小程序版本的实时性，会强制同步检查版本更新，更新到最新版本后再打开小程序。
若用户处于弱网环境、下载最新版本失败等情况下，仍会启动本地的较低版本。

2.2 启动时异步更新

即使启动前未发现更新，小程序每次冷启动时，都会异步检查是否有更新版本。如果发现有新版本，将会异步下载新版本的代码包。但当次启动仍会使用客户端本地的旧版本代码，即新版本的小程序需要等下一次冷启动才会使用。

开发者手动触发更新

在启动时异步更新的情况下，如果开发者希望立刻进行版本更新，可以使用 wx.getUpdateManager API 进行处理。在有新版本时提示用户重启小程序更新新版本。
官方版本：

const updateManager = wx.getUpdateManager()

updateManager.onCheckForUpdate(function (res) {
  // 请求完新版本信息的回调
  console.log(res.hasUpdate)
})

updateManager.onUpdateReady(function () {
  wx.showModal({
    title: '更新提示',
    content: '新版本已经准备好，是否重启应用？',
    success(res) {
      if (res.confirm) {
        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
        updateManager.applyUpdate()
      }
    }
  })
})

updateManager.onUpdateFailed(function () {
  // 新版本下载失败
})

实际使用版本：

//app.js
App({
    onLaunch() {
        this.update()
    },
 
    // 版本更新
    update() {
        const updateManager = wx.getUpdateManager()
 
        updateManager.onCheckForUpdate(function (res) {
            // 请求完新版本信息的回调
            if(res.hasUpdate) {
 
                // 新版本下载成功
                updateManager.onUpdateReady(function () {
                    wx.showModal({
                        title: '更新提示',
                        content: '新版本已经准备好，请您重启应用，以确保正常使用。',
                        success: function (res) {
                            if (res.confirm) {
                                // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
                                updateManager.applyUpdate()
                            }
                        }
                    })
                })
 
                // 新版本下载失败
                updateManager.onUpdateFailed(function () {
                    wx.showModal({
                        title: '更新提示',
                        content: '检测到了新版本，但是下载失败了~'
                    })
                })
 
            }
        })
    }
})