微信小程序發(fā)布新版本時(shí)自動(dòng)提示用戶更新的方法【轉(zhuǎn)】
如圖,當(dāng)小程序發(fā)布新的版本后,用戶如果之前訪問過該小程序,通過已打開的小程序進(jìn)入(未手動(dòng)刪除),則會彈出這個(gè)提示,提醒用戶更新新的版本。用戶點(diǎn)擊確定就可以自動(dòng)重啟更新,點(diǎn)擊取消則關(guān)閉彈窗,不再更新。
const updateManager = 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中,只有最基本的更新提示,并未做異常處理。而且官方也說了這個(gè)功能基礎(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.jsApp({ onLaunch: function(options) { this.autoUpdate() }, autoUpdate:function(){ console.log(new Date()) var self=this // 獲取小程序更新機(jī)制兼容 if (wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() //1. 檢查小程序是否有新版本發(fā)布 updateManager.onCheckForUpdate(function (res) { // 請求完新版本信息的回調(diào) if (res.hasUpdate) { //2. 小程序有新版本,則靜默下載新版本,做好更新準(zhǔn)備 updateManager.onUpdateReady(function () { console.log(new Date()) 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() } else if (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() } else if (res.cancel) { //重新回到版本更新提示 self.autoUpdate() } } }) } } }) }) updateManager.onUpdateFailed(function () { // 新的版本下載失敗 wx.showModal({ title: '已經(jīng)有新版本了喲~', content: '新版本已經(jīng)上線啦~,請您刪除當(dāng)前小程序,重新搜索打開喲~', }) }) } }) } else { // 如果希望用戶在最新版本的客戶端上體驗(yàn)?zāi)男〕绦?,可以這樣子提示 wx.showModal({ title: '提示', content: '當(dāng)前微信版本過低,無法使用該功能,請升級到最新微信版本后重試。' }) } } })
更新版本的模擬測試:
1. 微信開發(fā)者工具上可以通過「編譯模式」下的「下次編譯模擬更新」開關(guān)來調(diào)試;
2. 小程序開發(fā)版/體驗(yàn)版沒有「版本」概念,所以無法在開發(fā)版/體驗(yàn)版上測試更版本更新情況;
對于開發(fā)者工具,可以這樣驗(yàn)證測試:
點(diǎn)擊編譯模式設(shè)置下拉列表,然后點(diǎn)擊“添加編譯模式”,在自定義編譯條件彈窗界面,點(diǎn)擊下次編譯時(shí)模擬更新,然后點(diǎn)擊確定,重新編譯就OK了。
需要注意的是,這種方式模擬更新一次之后就失效了,后邊再測試仍需要對這種編譯模式進(jìn)行重新設(shè)置才可以。
更新提示有延遲?
在開發(fā)者工具上測試驗(yàn)證的時(shí)候,更新提示彈窗在小程序界面加載出來五六秒之后才彈出來,這是由于小程序在檢測到有新版本之后,調(diào)用 UpdateManager.onUpdateReady(function callback) 進(jìn)行版本更新監(jiān)聽,此時(shí)客戶端主動(dòng)觸發(fā)下載(無需開發(fā)者觸發(fā)),下載成功后回調(diào)。也就是說我們上邊的更新提示彈窗是在小程序檢測到新版本并完成新版本下載之后彈出的,所以就有了這幾秒的時(shí)間差。這樣的話就很有必要進(jìn)行再次改善了,至少應(yīng)該在小程序編譯時(shí)檢測到有新版本就應(yīng)該先給出更新提示,至于新版本下載的準(zhǔn)備工作,可以在用戶點(diǎn)擊確認(rèn)按鈕之后進(jìn)行,代碼改造如下:
App({ onLaunch: function(options) { this.autoUpdate() }, autoUpdate: function() { var self = this // 獲取小程序更新機(jī)制兼容 if (wx.canIUse('getUpdateManager')) { const updateManager = 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) } else if (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 { // 如果希望用戶在最新版本的客戶端上體驗(yàn)?zāi)男〕绦颍梢赃@樣子提示 wx.showModal({ title: '提示', content: '當(dāng)前微信版本過低,無法使用該功能,請升級到最新微信版本后重試。' }) } }, /** * 下載小程序新版本并重啟應(yīng)用 */ downLoadAndUpdate: function (updateManager){ var self=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é)果的時(shí)間(開發(fā)者工具測試有2~3秒),雖說還是有一點(diǎn)延遲,但目前也只能這樣了。
總結(jié):
綜上,無論如何,使用小程序版本更新檢測功能都是需要一定時(shí)間的(一兩秒的時(shí)間已經(jīng)不算短了哈),如果在檢測這一兩秒中內(nèi)用戶進(jìn)行了操作,那么更新提示彈窗則會打斷用戶的操作。但畢竟不是頻繁更新版本,所以這方面還是可以接受的。
另外,下載新的版本包的時(shí)候建議loading,這樣用戶就知道是在下載,然后下載完成自動(dòng)重啟,這樣整個(gè)流程就順暢多了。
梳理了下,整了份思維導(dǎo)圖,可以輔助理解:
其他注意事項(xiàng):
基礎(chǔ)庫最低版本設(shè)置:
如果不想做API支持判斷,那么可以給小程序設(shè)置最低版本支持。
打開小程序管理后臺-設(shè)置-基礎(chǔ)庫最低版本設(shè)置,根據(jù)現(xiàn)有小程序的訪問情況或者小程序官方提供的數(shù)據(jù),設(shè)置一個(gè)比較大眾化的基礎(chǔ)庫版本就好了,這樣就能進(jìn)了盡量減少API兼容性判斷,也能促使用戶更新微信版本,以支持小程序正常運(yùn)行,體驗(yàn)小程序一些高級功能。
原文地址:https://www.cnblogs.com/sjw-dmwz/p/11576653.html