【小程序】 版本自動更新的實現

更新問題

微信小程序遇到新版本發佈後，舊版本無法自動更新的困擾. 我之前進行開發的時候：

• 最笨的方法就是，刪除小程序後再重新搜索打開就好;

注意:準確來講，版本自動更新的方法越早進行補充越合理， 尤其適合前期使用人數較少的時候就做補充 以避免後期使用人數太多時而舊版本依然無法檢測更新及時替換的情況

實現方案

1.小程序的運行機制

• 熱啓動：小程序打開後在一段時間內（目前5分鐘）再次被打開，此時會將後臺的小程序切換到前臺。
• 冷啓動：小程序首次打開或者銷燬後重新打開

2.更新版本

• 冷啓動時，如果發現有新版本，將會異步下載新版本的代碼包，並同時用客戶端本地的包進行啓動，及新版本的小程序需要等下一次冷啓動纔會應用上； 如果馬上應用最新版本，使用wx.getUpdateManager API進行處理。

實現一：

// util.js

/**
 * 檢測當前的小程序
 * 是否是最新版本，是否需要下載、更新
 */
function checkUpdateVersion() {
    //創建 UpdateManager 實例
    const updateManager = wx.getUpdateManager();
    //檢測版本更新
    updateManager.onCheckForUpdate(function (res) {
        // 請求完新版本信息的回調
        if (res.hasUpdate) {
            //監聽小程序有版本更新事件
            updateManager.onUpdateReady(function () {
                wx.showModal({
                    title: "更新提示",
                    content: "新版本已經準備好，是否重啓應用？",
                    success(res) {
                        if (res.confirm) {
                            // 新的版本已經下載好，調用 applyUpdate 應用新版本並重啓
                            updateManager.applyUpdate();
                        }
                    },
                });
            });

            updateManager.onUpdateFailed(function () {
                // 新版本下載失敗
                wx.showModal({
                    title: "已經有新版本咯~",
                    content:
                        "請您刪除當前小程序，到微信 “發現-小程序” 頁，重新搜索打開呦~",
                });
            });
        }
    });
}

實現二：自動更新

爲了版本的統一化，當然是建議小程序可以自動更新，所以升級一下代碼如下：

// util.js
/**
 * 檢測當前的小程序
 * 是否是最新版本，是否需要下載、更新
 */
function checkUpdateVersion() {
    //判斷微信版本是否 兼容小程序更新機制API的使用
    if (wx.canIUse("getUpdateManager")) {
        //創建 UpdateManager 實例
        const updateManager = wx.getUpdateManager();
        //檢測版本更新
        updateManager.onCheckForUpdate(function (res) {
            // 請求完新版本信息的回調
            if (res.hasUpdate) {
                //監聽小程序有版本更新事件
                updateManager.onUpdateReady(function () {
                    //TODO 新的版本已經下載好，調用 applyUpdate 應用新版本並重啓 （ 此處進行了自動更新操作）
                    updateManager.applyUpdate();
                });
                updateManager.onUpdateFailed(function () {
                    // 新版本下載失敗
                    wx.showModal({
                        title: "已經有新版本嘍~",
                        content: "請您刪除當前小程序，到微信 “發現-小程序” 頁，重新搜索打開哦~",
                    });
                });
            }
        });
    } else {
        //TODO 此時微信版本太低（一般而言版本都是支持的）
        wx.showModal({
            title: "溫馨提示",
            content:"當前微信版本過低，無法使用該功能，請升級到最新微信版本後重試。",
        });
    }
}

具體使用

1. 在utils/util.js

module.exports = {
  checkUpdateVersion,
}

2.引入 app.js