微信小程序強制更新

原創

2020-06-24 04:02

（如果想直接使用，可直接拉到最底部5.2，有比較全的代碼）

1.場景：隨着這些年的不斷完善，移動端的產品在往小程序傾斜，以前是小程序爲app倒流，現在小程序不斷完善app能做到的功能，小程序基本都能做到，而是小程序屬於輕應用，無需下載，用完即走，也可添加到桌面快捷方式，使用起來非常方便，深受廣大用戶的喜愛；而且發佈審覈的週期也比較短，功能更新發布也比較迅速。所以公司在大力開發，推廣使用小程序。小程序版本更新比較頻繁，但新版本覆蓋率比較慢，因爲小程序的更新機制是異步的，部分用戶不會馬上應用上新版本。

而我們這次改版，改動的比較大，例如以前進詳情頁需要帶入（city,物業類型，id...）參數，這次新加的詳情頁功能還要要求新增參數，這就導致路徑攜帶太多參數，這樣不好。我們這次改版就想着，只帶city和一個id，把其餘的參數都幹掉，但老版本的小程生成的二維碼已經被推廣出去了，而且會一直存在...；頁面中也新增了許多全局變量；緩存中新增了許多緩存變量；接口也做了調整...說了這麼多，總之一句話，我們必須得強制更新。然後查了一些官方資料和博客，找了一些方法。做一下總結歸納。

2.涉及的知識點

2.1小程序的冷熱啓動

2.1.1 分類：冷啓動，熱啓動

2.1.2 冷啓動：用戶首次打開小程序，或者小程序被主動銷燬，此時小程序需要重新加載啓動。

2.1.3 熱啓動：用戶已經打開小程序，在一定時間內（且沒銷燬關閉，進入後臺運行），此時只需將後臺小程序切換到前臺即可。

2.2 小程序的更新機制

小程序的異步更新發生在冷啓動過程，當發現新版本後，會異步下載新版本的代碼包，但不會馬上應用上最新版本，需要等小程序下一次冷啓動，纔會應用上新版本。（摘自官方）

3. 官方提供了四種解決思路

3.1. 同步檢查更新（放棄）：可能是最直接的解決思路，但主要問題是會影響小程序的啓動速度，當下小程序的更新迭代是非常頻繁的，部分用戶可能每次啓動都命中更新，如果需要同步檢查更新+同步下載新的版本，那將會影響這部分用戶的啓動體驗。

3.2. 模塊熱替換（放棄）：從技術上來說，這是最好的方案，小程序運行起來後，在打開新頁面時，馬上應用新版本里的頁面，但這就會存在新舊邏輯、頁面共存問題，對於開發者來說，反而更不好處理，特別是涉及到全局變量時，情況會更復雜，對於我們已有的框架來說，也是一個大挑戰，不過這個也是我們之後努力的方向。

3.3. 定時 check 新版本（目前方案）：6.6.3 及以上版本的客戶端，會定時 check 最近使用過的小程序是否有發佈新版本；如果有，下次打開的時候會同步更新新版本再打開。這可以保證在新版本發佈 24 小時後，所有小程序都能使用最新版本。（這部分是微信客戶端自身優化，開發者無需關心）

3.4. 異步更新 + 強制更新（目前方案）：同步檢查更新與模塊熱替換兩者之間的折衷方案，即還是維持異步更新機制，在異步下載完小程序代碼包後，提供重啓小程序的能力，這樣在遇到緊急問題時可以馬上解決。

4. 結合官方的思路，加上我們當前的場景，我們只能啓用3.4的思路，會涉及wx.getUpdateManager 方法，可以點擊參考官方說明。

5.代碼部分

5.1代碼思路：首先判斷該方法是否可用（因爲對微信版本有限制，如果不可用，提示用戶升級微信版本，如果可用該方法，再執行後續操作），其次判斷是否有新版本，然後當新版本下載完畢showModal提示用戶更新。

5.2代碼更新代碼放在app.js的onLaunch生命週期中

onLaunch: function () {
    if (wx.canIUse('getUpdateManager')) {
      const updateManager = wx.getUpdateManager()
      updateManager.onCheckForUpdate(function (res) {
        console.log('onCheckForUpdate====', res)
        // 請求完新版本信息的回調
        if (res.hasUpdate) {
          console.log('res.hasUpdate====')
          updateManager.onUpdateReady(function () {
            wx.showModal({
              title: '更新提示',
              content: '新版本已經準備好，是否重啓應用？',
              success: function (res) {
                console.log('success====', res)
                if (res.confirm) {
                  // 新的版本已經下載好，調用 applyUpdate 應用新版本並重啓
                  updateManager.applyUpdate()
                }
              }
            })
          })
          updateManager.onUpdateFailed(function () {
            // 新的版本下載失敗
            wx.showModal({
              title: '已經有新版本了喲~',
              content: '新版本已經上線啦~，請您刪除當前小程序，重新搜索打開喲~'
            })
          })
        }
      })
    }
  },

5.3 調試