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