微信小程序有新版本時自動更新

原文鏈接:https://blog.csdn.net/xiaobo060/article/details/101521906


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


官方給的示例代碼:

constupdateManager = wx.getUpdateManager()

updateManager.onCheckForUpdate(function(res){

// 請求完新版本信息的回調(diào)

console.log(res.hasUpdate)

})

updateManager.onUpdateReady(function(){

? wx.showModal({

title:'更新提示',

content:'新版本已經(jīng)準(zhǔn)備好,是否重啟應(yīng)用?',

? ? success(res) {

if(res.confirm) {

// 新的版本已經(jīng)下載好,調(diào)用 applyUpdate 應(yīng)用新版本并重啟

? ? ? ? updateManager.applyUpdate()

? ? ? }

? ? }

? })

})

updateManager.onUpdateFailed(function(){

// 新版本下載失敗

})


官方提供的demo中,只有最基本的更新提示,并未做異常處理。而且官方也說了這個功能基礎(chǔ)庫 1.9.90 開始支持,低版本需做兼容處理,那么就需要對著端代碼進(jìn)行改進(jìn)了。

另一方面,如果當(dāng)前版本更新有重大調(diào)整,一定需要用戶更新,那么可以在用戶點(diǎn)擊取消的回調(diào)中給出提示,并重新進(jìn)入版本提示流程。如下圖,在上邊的更新提示中,用戶點(diǎn)擊取消,則彈出下面提示彈窗,用戶點(diǎn)擊確定,則更新版本,點(diǎn)擊取消,則重新調(diào)用上邊的更新提示??傊?,用戶只有更新了,才能正常訪問小程序(如非必須,建議慎用)。


改善后的代碼:

//app.js

App({

onLaunch:function(options){

this.autoUpdate()

? },

autoUpdate:function(){

console.log(newDate())

varself=this

// 獲取小程序更新機(jī)制兼容

if(wx.canIUse('getUpdateManager')) {

constupdateManager = wx.getUpdateManager()

//1. 檢查小程序是否有新版本發(fā)布

updateManager.onCheckForUpdate(function(res){

// 請求完新版本信息的回調(diào)

if(res.hasUpdate) {

//2. 小程序有新版本,則靜默下載新版本,做好更新準(zhǔn)備

updateManager.onUpdateReady(function(){

console.log(newDate())

? ? ? ? ? ? wx.showModal({

title:'更新提示',

content:'新版本已經(jīng)準(zhǔn)備好,是否重啟應(yīng)用?',

success:function(res){

if(res.confirm) {

//3. 新的版本已經(jīng)下載好,調(diào)用 applyUpdate 應(yīng)用新版本并重啟

? ? ? ? ? ? ? ? ? updateManager.applyUpdate()

}elseif(res.cancel) {

//如果需要強(qiáng)制更新,則給出二次彈窗,如果不需要,則這里的代碼都可以刪掉了

? ? ? ? ? ? ? ? ? wx.showModal({

title:'溫馨提示~',

content:'本次版本更新涉及到新的功能添加,舊版本無法正常訪問的哦~',

success:function(res){

? ? ? ? ? ? ? ? ? ? ? self.autoUpdate()

return;

//第二次提示后,強(qiáng)制更新? ? ? ? ? ? ? ? ? ? ?

if(res.confirm) {

// 新的版本已經(jīng)下載好,調(diào)用 applyUpdate 應(yīng)用新版本并重啟

? ? ? ? ? ? ? ? ? ? ? ? updateManager.applyUpdate()

}elseif(res.cancel) {

//重新回到版本更新提示

? ? ? ? ? ? ? ? ? ? ? ? self.autoUpdate()

? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? }

? ? ? ? ? ? })

? ? ? ? ? })

updateManager.onUpdateFailed(function(){

// 新的版本下載失敗

? ? ? ? ? ? wx.showModal({

title:'已經(jīng)有新版本了喲~',

content:'新版本已經(jīng)上線啦~,請您刪除當(dāng)前小程序,重新搜索打開喲~',

? ? ? ? ? ? })

? ? ? ? ? })

? ? ? ? }

? ? ? })

}else{

// 如果希望用戶在最新版本的客戶端上體驗?zāi)男〕绦?,可以這樣子提示

? ? ? wx.showModal({

title:'提示',

content:'當(dāng)前微信版本過低,無法使用該功能,請升級到最新微信版本后重試。'

? ? ? })

? ? }

? }

})


更新版本的模擬測試:

1. 微信開發(fā)者工具上可以通過「編譯模式」下的「下次編譯模擬更新」開關(guān)來調(diào)試;

2. 小程序開發(fā)版/體驗版沒有「版本」概念,所以無法在開發(fā)版/體驗版上測試更版本更新情況;

對于開發(fā)者工具,可以這樣驗證測試:

點(diǎn)擊編譯模式設(shè)置下拉列表,然后點(diǎn)擊“添加編譯模式”,在自定義編譯條件彈窗界面,點(diǎn)擊下次編譯時模擬更新,然后點(diǎn)擊確定,重新編譯就OK了。

需要注意的是,這種方式模擬更新一次之后就失效了,后邊再測試仍需要對這種編譯模式進(jìn)行重新設(shè)置才可以。

更新提示有延遲?

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

App({

onLaunch:function(options){

? ? this.autoUpdate()

? },

autoUpdate:function(){

varself= this

// 獲取小程序更新機(jī)制兼容

if(wx.canIUse('getUpdateManager')) {

constupdateManager = wx.getUpdateManager()

//1. 檢查小程序是否有新版本發(fā)布

updateManager.onCheckForUpdate(function(res){

// 請求完新版本信息的回調(diào)

if(res.hasUpdate) {

//檢測到新版本,需要更新,給出提示

? ? ? ? ? wx.showModal({

title:'更新提示',

content:'檢測到新版本,是否下載新版本并重啟小程序?',

success:function(res){

if(res.confirm) {

//2. 用戶確定下載更新小程序,小程序下載及更新靜默進(jìn)行

self.downLoadAndUpdate(updateManager)

}elseif(res.cancel) {

//用戶點(diǎn)擊取消按鈕的處理,如果需要強(qiáng)制更新,則給出二次彈窗,如果不需要,則這里的代碼都可以刪掉了

? ? ? ? ? ? ? ? wx.showModal({

title:'溫馨提示~',

content:'本次版本更新涉及到新的功能添加,舊版本無法正常訪問的哦~',

showCancel:false,//隱藏取消按鈕

confirmText:"確定更新",//只保留確定更新按鈕

success:function(res){

if(res.confirm) {

//下載新版本,并重新應(yīng)用

self.downLoadAndUpdate(updateManager)

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? })

? ? ? ? }

? ? ? })

}else{

// 如果希望用戶在最新版本的客戶端上體驗?zāi)男〕绦?,可以這樣子提示

? ? ? wx.showModal({

title:'提示',

content:'當(dāng)前微信版本過低,無法使用該功能,請升級到最新微信版本后重試。'

? ? ? })

? ? }

? },

/**

? * 下載小程序新版本并重啟應(yīng)用

? */

downLoadAndUpdate:function(updateManager){

varself=this

? ? wx.showLoading();

//靜默下載更新小程序新版本

updateManager.onUpdateReady(function(){

? ? ? wx.hideLoading()

//新的版本已經(jīng)下載好,調(diào)用 applyUpdate 應(yīng)用新版本并重啟

? ? ? updateManager.applyUpdate()

? ? })

updateManager.onUpdateFailed(function(){

// 新的版本下載失敗

? ? ? wx.showModal({

title:'已經(jīng)有新版本了喲~',

content:'新版本已經(jīng)上線啦~,請您刪除當(dāng)前小程序,重新搜索打開喲~',

? ? ? })

? ? })

? }

})


如上,在檢測到小程序有新版本之后,就給出彈窗提示用戶下載新版并重啟小程序,用戶點(diǎn)擊確定按鈕后進(jìn)行小程序新版本的下載和更新。也為了調(diào)用方便,將新版本下載及小程序的重啟應(yīng)用單獨(dú)封裝起來。

這樣,從小程序加載到彈出版本更新彈窗只需要耗費(fèi)調(diào)用新版本檢測API并返回結(jié)果的時間(開發(fā)者工具測試有2~3秒),雖說還是有一點(diǎn)延遲,但目前也只能這樣了。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容