uniapp中實現(xiàn)App自動檢測版本升級的示例代碼
更新時間：2023年01月03日 15:17:02 作者：我的代碼果然有問題
本文主要介紹了uniapp中實現(xiàn)App自動檢測版本升級的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
前言
目前手里接到個項目需要用到uniapp來開發(fā)一款平板應用，既然是應用，自然是少不了自動版本升級的功能了，本來想插件市場看有沒有現(xiàn)成的用一用，發(fā)現(xiàn)都需要使用云端基于 uniCloud 云函數實現(xiàn)，對于我們這種有專門后端服務的肯定是不希望再搞一個服務出來，于是還是決定自己動手寫一些，也方便后續(xù)調整
思路
梳理了一下大致有這么三個流程
- 獲取本地版本號
- 獲取服務端最新版本號
- 提示升級安裝這
下面我們就按這三個流程來進行開發(fā)
開發(fā)
初始化
這里我們設計一個版本升級的類，邏輯盡可能簡單，方便復用
class Upgrade {
constructor() {
this.downloadUrl = ''
// ...
}
// ...
}
?
export default Upgrade獲取本地版本號
uniapp在應用端使用H5+標準，故可以使用plus相關的api獲取應用的版本號
getLocalVersion = () => {
return new Promise((resolve, reject) => {
plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
const version = widgetInfo.version
resolve(version)
})
}).catch(err => {
console.err(err);
})
}獲取服務端最新版本號
這里只做了個簡單的封裝，最新的版本號根據接口請求從服務端獲取，最好順帶把下載地址也返回了
getLatestVersion = () => {
return new Promise((resolve, reject) => {
// 相關接口
const version = '0.0.0'
this.downloadUrl = 'XXX'
resolve(version)
}).catch(err => {
console.err(err);
})
}比較版本號
關于新老版本號的比較，看過很多資料都是通過parseInt(widgetInfo.version.split('.').join(''))轉為純數字進行對比的，我這里就不搞那么復雜了，默認服務端的就是最新的，只要不是跟客戶端保持一致，就提示更新，簡單粗暴點
checkVersion = async () => {
const localVersion = await this.getLocalVersion()
const latestVersion = await this.getLatestVersion()
if (localVersion === latestVersion) {
return true
} else {
return false
}
}提示更新
給個友好的提示
updatePackage = () => {
uni.showModal({
title: '檢測到有版本更新！',
content: '請升級app到最新版本！',
cancelText: '暫不升級',
confirmText: '立即升級',
success: res => {
console.log('下載');
// ...
}
})
}更新安裝包
如果上一步點擊立即升級，那么這里就創(chuàng)建下載任務下載我們的安裝包，并讓它下載完畢后自動安裝
downloadPackage = () => {
const task = plus.downloader.createDownload(this.downloadUrl, {},
(res, status) => {
if (status === 200) {
plus.runtime.install(res.filename)
}
})
?
task.start()
}下載進度提示
為了友好的用戶體驗，可以顯示下載進度，這里就簡單暴露一個進度屬性progress出來，實際場景可以根據自己的設計稿自定義組件
onProgress = (task) => {
task.addEventListener('statechanged', e => {
if (e && e.downloadedSize > 0) {
const progress = ((e.downloadedSize / e.totalSize) * 100).toFixed(2)
this.progress.value = progress
}
}, false)
}加入更新方法中
downloadPackage = () => {
const task = plus.downloader.createDownload(this.downloadUrl, {},
(res, status) => {
if (status === 200) {
plus.runtime.install(res.filename)
}
})
this.onProgress(task)
?
task.start()
}這樣就可以在下載過程中看到下載進度啦
頁面中調用
import { toRefs } from "vue"
import Upgrade from '@/pages/index/upgrade.js'
const upgrade = new Upgrade()
// 進度屬性可直接與模板綁定
const {
progress
} = toRefs(upgrade)
// 檢查版本并更新
upgrade.checkVersion().then(isLatest => {
if (!isLatest) {
upgrade.updatePackage()
}
})至此整個更新程序的功能已基本開發(fā)完成，樣式部分只需要根據自己的需要調整就可以了，功能代碼如下,有需要的同學自取
完整代碼
import { ref } from "vue"
?
class Upgrade {
constructor() {
this.downloadUrl = 'https:XXXXX.apk'
this.progress = ref(0)
}
?
getLocalVersion = () => {
return new Promise((resolve, reject) => {
plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
const version = widgetInfo.version
resolve(version)
})
}).catch(err => {
console.err(err);
})
}
?
getLatestVersion = () => {
return new Promise((resolve, reject) => {
// 相關接口
const version = '1.0.1'
resolve(version)
}).catch(err => {
console.err(err);
})
}
?
checkVersion = async () => {
const localVersion = await this.getLocalVersion()
const latestVersion = await this.getLatestVersion()
if (localVersion === latestVersion) {
return true
} else {
return false
}
}
?
updatePackage = () => {
uni.showModal({
title: '檢測到有版本更新！',
content: '請升級app到最新版本！',
cancelText: '暫不升級',
confirmText: '立即升級',
success: res => {
console.log('下載');
if (res.confirm) {
this.downloadPackage()
}
}
})
}
?
downloadPackage = () => {
const task = plus.downloader.createDownload(this.downloadUrl, {},
(res, status) => {
if (status === 200) {
plus.runtime.install(res.filename)
}
})
this.onProgress(task)
?
task.start()
}
?
onProgress = (task) => {
task.addEventListener('statechanged', e => {
if (e && e.downloadedSize > 0) {
const progress = ((e.downloadedSize / e.totalSize) * 100).toFixed(2)
this.progress.value = progress
}
}, false)
}
}
?
export default Upgrade到此這篇關于uniapp中實現(xiàn)App自動檢測版本升級的示例代碼的文章就介紹到這了,更多相關uniapp App自動檢測版本升級內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了JS實現(xiàn)勻速運動的代碼實例，有需要的朋友可以參考一下2013-11-11
使用JavaScript可以實現(xiàn)代碼的延時執(zhí)行，也就是說當一個函數被調用時不立即執(zhí)行某些代碼，而是等一段指定的時間后再執(zhí)行，這就叫做計時事件。2014-06-06
這篇文章主要給大家介紹了關于利用JS判斷元素是否為數組的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
本文主要講訴了使用js實現(xiàn)網站功能兼容IE6，非常的實用的小技巧，有需要的朋友可以參考下2014-09-09
這篇文章主要為大家詳細介紹了如何通過微信小程序實現(xiàn)canvas電子簽名功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-10-10
這篇文章主要介紹了JS實現(xiàn)同一個網頁布局滑動門和TAB選項卡效果,通過簡單的自定義切換函數setTab實現(xiàn)頁面元素的遍歷及屬性切換的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
第一步點擊需要拖動的元素,在點擊下的元素被選中，進行move移動,當鼠標彈起的時候，停止動作.點擊元素oDIV的時候，可用的是oDIV區(qū)域，而move和up則是全局區(qū)域2013-03-03
JS中ESModule和commonjs介紹及使用區(qū)別
這篇文章主要介紹了JS中ESModule和commonjs介紹及使用區(qū)別,文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-07-07
如何使用 Intl.RelativeTimeFormat 在 JavaScript&nbs
Intl.RelativeTimeFormat是JavaScript提供的一個國際化API,用于格式化相對時間,如"3天前"或"2年后",支持多種語言和配置選項,適用于社交媒體時間戳和事件提醒等場景,它簡化了國際化的相對時間顯示,使開發(fā)者能夠根據用戶的語言和區(qū)域設置輕松實現(xiàn)時間格式化2024-09-09
JavaScript原生開發(fā)視頻播放器的實現(xiàn)代碼
這篇文章我們將一起探索一份自定義的視頻播放器實現(xiàn)代碼，甚至還可以實現(xiàn)有彈幕功能，文中的示例代碼講解詳細，感興趣的可以了解一下2023-06-06