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

更新問題

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

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

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

實現方案

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