腳本之家服務器常用軟件

快捷導航

一文詳解如何清除手機上小程序緩存

更新時間：2022年08月16日 10:35:54 作者：閆小樣

大家在使用微信小程序的時候會有緩存,雖然小程序的緩存數值相比APP要少的多,下面這篇文章主要給大家介紹了關于如何清除手機上小程序緩存的相關資料,需要的朋友可以參考下

前言

原來真的有人，刪掉手機里所有的娛樂軟件，不管不顧任何東西，沒日沒夜的學習，就只是為了回到原來那個眼里有光被賦予希望的自己。你要堅信每一個你想學習的念頭，都是未來在向你求救！

懶惰是一個特別奇怪的東西，它使你以為安逸是休息，是福氣，它實際上給你帶來了是無聊，是倦怠，是消沉，它剝奪你對前途的希望，隔斷你和別人之間的友情，使你的心胸日益狹窄，對人生也越來越懷疑！

一、提出問題：

當小程序發(fā)布了新的版本后，用戶如果之前訪問過該小程序，通過已打開的小程序進入(未動手刪除)，則會發(fā)現小程序中修改后提交的內容并沒有生效，這是什么原因造成的呢？

二、分析問題：

我們微信小程序開發(fā)工具本地是可以正常顯示的，這就排除了代碼有誤的猜想；
新用戶(第一次訪問該小程序的用戶)是可以正常訪問的，這就排除了配置有誤的猜想；
那么看來肯定是跟緩存有關的，因為上次訪問過小程序有緩存的內容，所以再次訪問小程序時新修改的內容并沒有生效。

三、解決問題：

那么我們該如何清理緩存呢？

首先想到了兩種方式：一種是手動清理；另一種是自動清理。

1.手動清理：進入微信首頁，屏幕上下拉拖出小程序，找到自己使用的小程序選中不松手直接拖動到下方提示的 “拖動到此處刪除”。

注意：刪除掉之后再次點擊小程序進入，可以發(fā)現此時小程序就是最新的版本了。

如果通過這種方式還是沒有刪除的話，那就需要通過清理微信緩存的方式了。

方法如下：

總結：這種方法是可以達到清除緩存的目的，但我們也發(fā)現了，你不能保證所有用戶都會按照這種方法來清理緩存，這種方式既不方便，也不利于客戶的體驗。所以，我們需要通過一種方式去自動清理緩存，只有這樣才能讓客戶獲得好的體驗并做出好的產品。

2.自動清理

首先，我們肯定是去小程序官網查閱相關的api，是否有提供的方法讓我們可以很好的解決這個問題。

查看官網找到了一個方法 UpdateManager.onUpdateReady 是用來監(jiān)聽小程序有版本更新事件?？蛻舳酥鲃佑|發(fā)下載(無需開發(fā)者觸發(fā))，下載成功后回調。可見官網地址：UpdateManager.

接著我們把官網提供的代碼測試下看看是否可行。

(1) 微信小程序發(fā)布新版本時自動提示用戶更新的方法

如同所示，小程序發(fā)布新的版本后，用戶如果之前訪問過該小程序，通過已經打開的小程序進入(未手動刪除)，則會彈出這個提示，提醒用戶更新新的版本。用戶點擊確定就可以自動重啟更新，點擊取消則關閉彈窗，不再更新。

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 () {
  // 新版本下載失敗
})

官方提供的demo中，只有最基本的更新提示，并沒有做異常處理。而且官方也說了這個功能基礎庫1.9.90 開始支持，低版本需要做兼容處理，那么就需要對前端代碼進行改進了。另一方面，如果當前版本更新有重大調整，一定需要用戶更新，那么可以在用戶點擊取消的回調函數中給出提示，并重新進入版本提示流程。如下圖所示，在上邊的更新提示中，用戶點擊取消，則彈出下面提示彈框，用戶點擊確定，則更新版本，點擊取消，則重新調用上邊的更新提示?？傊?，用戶只有更新了，才能正常訪問小程序。

//app.js

App({
  onLaunch: function(options) {
    this.autoUpdate()
  },
  autoUpdate:function(){
    console.log(new Date())
    var self=this
    // 獲取小程序更新機制兼容
    if (wx.canIUse('getUpdateManager')) {
      const updateManager = wx.getUpdateManager()
      //1. 檢查小程序是否有新版本發(fā)布
      updateManager.onCheckForUpdate(function (res) {
        // 請求完新版本信息的回調
        if (res.hasUpdate) {
          //2. 小程序有新版本，則靜默下載新版本，做好更新準備
          updateManager.onUpdateReady(function () {
            console.log(new Date())
            wx.showModal({
              title: '更新提示',
              content: '新版本已經準備好，是否重啟應用？',
              success: function (res) {
                if (res.confirm) {
                  //3. 新的版本已經下載好，調用 applyUpdate 應用新版本并重啟
                  updateManager.applyUpdate()
                } else if (res.cancel) {
                  //如果需要強制更新，則給出二次彈窗，如果不需要，則這里的代碼都可以刪掉了
                  wx.showModal({
                    title: '溫馨提示~',
                    content: '本次版本更新涉及到新的功能添加，舊版本無法正常訪問的哦~',
                    success: function (res) {     
                      self.autoUpdate()
                      return;                 
                      //第二次提示后，強制更新                      
                      if (res.confirm) {
                        // 新的版本已經下載好，調用 applyUpdate 應用新版本并重啟
                        updateManager.applyUpdate()
                      } else if (res.cancel) {
                        //重新回到版本更新提示
                        self.autoUpdate()
                      }
                    }
                  })
                }
              }
            })
          })
          updateManager.onUpdateFailed(function () {
            // 新的版本下載失敗
            wx.showModal({
              title: '已經有新版本了喲~',
              content: '新版本已經上線啦~，請您刪除當前小程序，重新搜索打開喲~',
            })
          })
        }
      })
    } else {
      // 如果希望用戶在最新版本的客戶端上體驗您的小程序，可以這樣子提示
      wx.showModal({
        title: '提示',
        content: '當前微信版本過低，無法使用該功能，請升級到最新微信版本后重試。'
      })
    }
  }
})

(2) 更新版本的測試

微信開發(fā)工具上可以通過 {編譯模式} 下的 {下次編譯模擬更新} 開關來調試；小程序開發(fā)版 / 體驗版沒有 {版本} 的概念，所以無法在開發(fā)版 / 體驗版上測試版本的更新情況，必須在部署后的正式版查看；

對于開發(fā)者工具，可以通過如下的方式驗證測試：

點擊編譯模式設置下拉列表，然后點擊"添加編譯模式"，在自定義編譯條件彈窗界面，點擊下次編譯時模擬更新，然后點擊確定，重新編譯就可以了。

需要注意：這種方式模擬更新一次之后就失效了，后邊再測試仍需要對這種編譯模式進行重新設置才可以。

(3) 更新提示有延遲

我們在開發(fā)者工具上測試驗證的時候，更新提示彈窗在小程序界面加載出來五六秒之后才彈出來，這是由于小程序在檢測到有新版本之后，調用 updateManager.onUpdateReady(function callback) 進行版本更新監(jiān)聽，此時客戶端主動觸發(fā)下載(無需開發(fā)者觸發(fā))，下載成功后回調。也就是說我們上邊的更新提示彈窗是在小程序檢測到新版本并完成了新版本下載之后彈出的，所以就有了這幾秒的時間差。這樣的話就很有必要進行再次改善，至少應該在小程序編譯時檢測到有新版本就應該先給出更新提示，至于新版本下載的準備工作，可以在用戶點擊確認按鈕之后進行，所以對代碼進行改造如下：

App({
  onLaunch: function(options) {
    this.autoUpdate()
  },
  autoUpdate: function() {
    var self = this
    // 獲取小程序更新機制兼容
    if (wx.canIUse('getUpdateManager')) {
      const updateManager = wx.getUpdateManager()
      //1. 檢查小程序是否有新版本發(fā)布
      updateManager.onCheckForUpdate(function(res) {
        // 請求完新版本信息的回調
        if (res.hasUpdate) {
          //檢測到新版本，需要更新，給出提示
          wx.showModal({
            title: '更新提示',
            content: '檢測到新版本，是否下載新版本并重啟小程序？',
            success: function(res) {
              if (res.confirm) {
                //2. 用戶確定下載更新小程序，小程序下載及更新靜默進行
                self.downLoadAndUpdate(updateManager)
              } else if (res.cancel) {
                //用戶點擊取消按鈕的處理，如果需要強制更新，則給出二次彈窗，如果不需要，則這里的代碼都可以刪掉了
                wx.showModal({
                  title: '溫馨提示',
                  content: '本次版本更新涉及到新的功能添加，舊版本無法正常訪問的哦',
                  showCancel:false,//隱藏取消按鈕
                  confirmText:"確定更新",//只保留確定更新按鈕
                  success: function(res) {
                    if (res.confirm) {
                      //下載新版本，并重新應用
                      self.downLoadAndUpdate(updateManager)
                    }
                  }
                })
              }
            }
          })
        }
      })
    } else {
      // 如果希望用戶在最新版本的客戶端上體驗您的小程序，可以這樣子提示
      wx.showModal({
        title: '提示',
        content: '當前微信版本過低，無法使用該功能，請升級到最新微信版本后重試。'
      })
    }
  },
  /**
   * 下載小程序新版本并重啟應用
   */
  downLoadAndUpdate: function (updateManager){
    var self=this
    wx.showLoading();
    //靜默下載更新小程序新版本
    updateManager.onUpdateReady(function () {
      wx.hideLoading()
      //新的版本已經下載好，調用 applyUpdate 應用新版本并重啟
      updateManager.applyUpdate()
    })
    updateManager.onUpdateFailed(function () {
      // 新的版本下載失敗
      wx.showModal({
        title: '已經有新版本了喲~',
        content: '新版本已經上線啦~，請您刪除當前小程序，重新搜索打開喲~',
      })
    })
  }
})

如代碼所示，在檢測到小程序有新版本之后，就給出彈窗提示用戶下載新版本并重啟小程序，用戶點擊確定按鈕后進行小程序新版本的下載和更新。也為了調用方便，將新版本下載及小程序的應用單獨封裝起來。

這樣，小程序加載到彈出版本更新彈窗只需要耗費調用新版本檢測API并返回結果的時間(開發(fā)者工具測試有2~3秒)。

總結：

無論如何，使用小程序版本更新檢測功能都是需要一定時間的，如果在檢測這一兩秒中內用戶進行了操作，那么更新提示彈窗則會打斷用戶的操作。但畢竟不是頻繁的更新版本，所以這方面是可以接受的。下載新的版本包的時候建議loading，這樣用戶就知道是在下載，然后下載完成后自動重啟，這樣整個流程就順暢的多。

整理的思維導圖如下：

其他注意事項：

(1) 基礎庫最低版本設置：

微信開發(fā)者工具基礎庫設置：打開項目-工具欄右上角的詳情-本地設置-調試基礎庫選擇版本號。選擇占比最大的版本號，然后點擊推送。

后臺基礎庫設置：打開小程序管理后臺-設置-基本設置-基礎庫最低版本設置，根據現有小程序的訪問情況或者小程序官方提供的數據，設置一個比較大眾化的基礎庫版本就好了，這樣就能盡量減少API兼容性判斷，也能促使用戶更新微信版本，以支持小程序正常運行，體驗小程序一些高級功能。

微信開發(fā)者工具基礎庫設置

后臺基礎庫設置

(2) 查看基礎庫版本：

wx.getSystemInfo({
  success: function(res) {
    var version = res.SDKVersion;
    console.log(version);
    //如果要做版本比較
    version = version.replace(/\./g, "")
    if(version<280){  //如果基礎庫版本低于2.8.0
    	...
    }
  },
})