uniapp 小程式新版本釋出提示使用者更新
阿新 • • 發佈:2022-01-13
小程式釋出新版本因為發版本是非同步執行,所以要再一段時間後新版本才會覆蓋舊版本。
小程式的啟動方式分為兩種,冷啟動與熱啟動:
冷啟動:使用者首次開啟或小程式被使用者刪除後再次開啟時小程式需要重新載入啟動。
熱啟動:使用者已經開啟過某小程式,然後在一定時間內再次開啟該小程式,不會重新載入啟動,只是將後臺狀態的小程式切換到前臺狀態。
uniapp提供了版本更新管理器物件的API: uni.getUpdateMansger
平臺差異說明
App | H5 | 微信小程式 | 支付寶小程式 | 百度小程式 | 位元組跳動小程式、飛書小程式 | QQ小程式 | 快手小程式 |
---|---|---|---|---|---|---|---|
x | x | √ | √ | √ | √ | √ | √ |
官方案例程式碼:
const updateManager = uni.getUpdateManager(); updateManager.onCheckForUpdate(function (res) { // 請求完新版本資訊的回撥 console.log(res.hasUpdate); }); updateManager.onUpdateReady(function (res) { uni.showModal({ title: '更新提示', content: '新版本已經準備好,是否重啟應用?', success(res) { if (res.confirm) { // 新的版本已經下載好,呼叫 applyUpdate 應用新版本並重啟 updateManager.applyUpdate(); } } }); }); updateManager.onUpdateFailed(function (res) { // 新的版本下載失敗 });
updateManager 物件的方法列表:
方法 | 引數 | 說明 |
---|---|---|
onCheckForUpdate | callback | 當向小程式後臺請求完新版本資訊,會進行回撥 |
onUpdateReady | callback | 當新版本下載完成,會進行回撥 |
onUpdateFailed | callback | 當新版本下載失敗,會進行回撥 |
applyUpdate | 當新版本下載完成,呼叫該方法會強制當前小程式應用上新版本並重啟 |
onCheckForUpdate(callback) 回撥結果說明:
屬性 | 型別 | 說明 |
---|---|---|
hasUpdate | Boolean | 是否有新的版本 |
把官方程式碼調整後放在 App.vue檔案的onLaunch事件裡
onLaunch(){
//定義更新方法 function VersionUpdate() { // 判斷應用的 getUpdateManager 是否在當前版本可用 if (uni.canIUse('getUpdateManager')) { const updateManager = uni.getUpdateManager() // 向小程式後臺請求完新版本資訊 updateManager.onCheckForUpdate(function(res) { if (res.hasUpdate) { //小程式有新版本,靜默下載新版本,新版本下載完成 updateManager.onUpdateReady(function() {
//模態彈窗(確認、取消) uni.showModal({ title: '更新提示', content: '小程式已釋出新版本,是否重啟?', success: function(res) {
//使用者點選確定 if (res.confirm) { //當新版本下載完成,呼叫該方法會強制當前小程式應用上新版本並重啟 updateManager.applyUpdate() }
//使用者點選取消
else if (res.cancel) { //強制使用者更新,彈出第二次彈窗 uni.showModal({ title: '提示', content: '小程式已釋出新版本,是否重啟', showCancel: false, //隱藏取消按鈕 success: function(res) { //第二次提示後,強制更新 if (res.confirm) { // 當新版本下載完成,呼叫該方法會強制當前小程式應用上新版本並重啟 updateManager.applyUpdate() } else if (res.cancel) { //重新回到版本更新提示 VersionUpdate() } } }) } } }) }) // 當新版本下載失敗 updateManager.onUpdateFailed(function() { uni.showModal({ title: '提示', content: '請您刪除當前小程式,重新開啟小程式', }) }) } }) } else { // 提示使用者在最新版本的客戶端上體驗 uni.showModal({ title: '溫馨提示', content: '當前微信版本過低,可能無法使用該功能,請升級到最新版本後重試。' }) } }
//呼叫定義的更新方法 VersionUpdate(); },
測試版本更新效果:
微信開發者工具 —— 選擇新增編譯模式 —— 編譯設定 —— 下次編譯時模擬更新 —— 更新狀態