原文鏈接:https://blog.csdn.net/xiaobo060/article/details/101521906
如圖症副,當小程序發(fā)布新的版本后店雅,用戶如果之前訪問過該小程序,通過已打開的小程序進入(未手動刪除)贞铣,則會彈出這個提示闹啦,提醒用戶更新新的版本。用戶點擊確定就可以自動重啟更新辕坝,點擊取消則關(guān)閉彈窗窍奋,不再更新。
官方給的示例代碼:
constupdateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function(res){
// 請求完新版本信息的回調(diào)
console.log(res.hasUpdate)
})
updateManager.onUpdateReady(function(){
? wx.showModal({
title:'更新提示',
content:'新版本已經(jīng)準備好酱畅,是否重啟應用琳袄?',
? ? success(res) {
if(res.confirm) {
// 新的版本已經(jīng)下載好,調(diào)用 applyUpdate 應用新版本并重啟
? ? ? ? updateManager.applyUpdate()
? ? ? }
? ? }
? })
})
updateManager.onUpdateFailed(function(){
// 新版本下載失敗
})
官方提供的demo中纺酸,只有最基本的更新提示窖逗,并未做異常處理。而且官方也說了這個功能基礎(chǔ)庫 1.9.90 開始支持吁峻,低版本需做兼容處理滑负,那么就需要對著端代碼進行改進了。
另一方面用含,如果當前版本更新有重大調(diào)整矮慕,一定需要用戶更新,那么可以在用戶點擊取消的回調(diào)中給出提示啄骇,并重新進入版本提示流程痴鳄。如下圖,在上邊的更新提示中缸夹,用戶點擊取消痪寻,則彈出下面提示彈窗,用戶點擊確定虽惭,則更新版本橡类,點擊取消,則重新調(diào)用上邊的更新提示芽唇」嘶總之取劫,用戶只有更新了,才能正常訪問小程序(如非必須研侣,建議慎用)谱邪。
改善后的代碼:
//app.js
App({
onLaunch:function(options){
this.autoUpdate()
? },
autoUpdate:function(){
console.log(newDate())
varself=this
// 獲取小程序更新機制兼容
if(wx.canIUse('getUpdateManager')) {
constupdateManager = wx.getUpdateManager()
//1. 檢查小程序是否有新版本發(fā)布
updateManager.onCheckForUpdate(function(res){
// 請求完新版本信息的回調(diào)
if(res.hasUpdate) {
//2. 小程序有新版本,則靜默下載新版本庶诡,做好更新準備
updateManager.onUpdateReady(function(){
console.log(newDate())
? ? ? ? ? ? wx.showModal({
title:'更新提示',
content:'新版本已經(jīng)準備好惦银,是否重啟應用?',
success:function(res){
if(res.confirm) {
//3. 新的版本已經(jīng)下載好末誓,調(diào)用 applyUpdate 應用新版本并重啟
? ? ? ? ? ? ? ? ? updateManager.applyUpdate()
}elseif(res.cancel) {
//如果需要強制更新扯俱,則給出二次彈窗,如果不需要基显,則這里的代碼都可以刪掉了
? ? ? ? ? ? ? ? ? wx.showModal({
title:'溫馨提示~',
content:'本次版本更新涉及到新的功能添加蘸吓,舊版本無法正常訪問的哦~',
success:function(res){
? ? ? ? ? ? ? ? ? ? ? self.autoUpdate()
return;
//第二次提示后,強制更新? ? ? ? ? ? ? ? ? ? ?
if(res.confirm) {
// 新的版本已經(jīng)下載好撩幽,調(diào)用 applyUpdate 應用新版本并重啟
? ? ? ? ? ? ? ? ? ? ? ? updateManager.applyUpdate()
}elseif(res.cancel) {
//重新回到版本更新提示
? ? ? ? ? ? ? ? ? ? ? ? self.autoUpdate()
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? ? })
updateManager.onUpdateFailed(function(){
// 新的版本下載失敗
? ? ? ? ? ? wx.showModal({
title:'已經(jīng)有新版本了喲~',
content:'新版本已經(jīng)上線啦~库继,請您刪除當前小程序,重新搜索打開喲~',
? ? ? ? ? ? })
? ? ? ? ? })
? ? ? ? }
? ? ? })
}else{
// 如果希望用戶在最新版本的客戶端上體驗您的小程序窜醉,可以這樣子提示
? ? ? wx.showModal({
title:'提示',
content:'當前微信版本過低宪萄,無法使用該功能,請升級到最新微信版本后重試榨惰。'
? ? ? })
? ? }
? }
})
更新版本的模擬測試:
1. 微信開發(fā)者工具上可以通過「編譯模式」下的「下次編譯模擬更新」開關(guān)來調(diào)試拜英;
2. 小程序開發(fā)版/體驗版沒有「版本」概念,所以無法在開發(fā)版/體驗版上測試更版本更新情況琅催;
對于開發(fā)者工具居凶,可以這樣驗證測試:
點擊編譯模式設(shè)置下拉列表,然后點擊“添加編譯模式”藤抡,在自定義編譯條件彈窗界面侠碧,點擊下次編譯時模擬更新,然后點擊確定缠黍,重新編譯就OK了弄兜。
需要注意的是,這種方式模擬更新一次之后就失效了瓷式,后邊再測試仍需要對這種編譯模式進行重新設(shè)置才可以替饿。
更新提示有延遲?
在開發(fā)者工具上測試驗證的時候贸典,更新提示彈窗在小程序界面加載出來五六秒之后才彈出來视卢,這是由于小程序在檢測到有新版本之后,調(diào)用UpdateManager.onUpdateReady(function callback)進行版本更新監(jiān)聽廊驼,此時客戶端主動觸發(fā)下載(無需開發(fā)者觸發(fā))据过,下載成功后回調(diào)颊埃。也就是說我們上邊的更新提示彈窗是在小程序檢測到新版本并完成新版本下載之后彈出的,所以就有了這幾秒的時間差蝶俱。這樣的話就很有必要進行再次改善了,至少應該在小程序編譯時檢測到有新版本就應該先給出更新提示饥漫,至于新版本下載的準備工作榨呆,可以在用戶點擊確認按鈕之后進行,代碼改造如下:
App({
onLaunch:function(options){
? ? this.autoUpdate()
? },
autoUpdate:function(){
varself= this
// 獲取小程序更新機制兼容
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. 用戶確定下載更新小程序竿拆,小程序下載及更新靜默進行
self.downLoadAndUpdate(updateManager)
}elseif(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){
varself=this
? ? wx.showLoading();
//靜默下載更新小程序新版本
updateManager.onUpdateReady(function(){
? ? ? wx.hideLoading()
//新的版本已經(jīng)下載好淹朋,調(diào)用 applyUpdate 應用新版本并重啟
? ? ? updateManager.applyUpdate()
? ? })
updateManager.onUpdateFailed(function(){
// 新的版本下載失敗
? ? ? wx.showModal({
title:'已經(jīng)有新版本了喲~',
content:'新版本已經(jīng)上線啦~笙各,請您刪除當前小程序,重新搜索打開喲~',
? ? ? })
? ? })
? }
})
如上础芍,在檢測到小程序有新版本之后杈抢,就給出彈窗提示用戶下載新版并重啟小程序,用戶點擊確定按鈕后進行小程序新版本的下載和更新者甲。也為了調(diào)用方便春感,將新版本下載及小程序的重啟應用單獨封裝起來。
這樣虏缸,從小程序加載到彈出版本更新彈窗只需要耗費調(diào)用新版本檢測API并返回結(jié)果的時間(開發(fā)者工具測試有2~3秒)鲫懒,雖說還是有一點延遲,但目前也只能這樣了刽辙。