uniapp中實(shí)現(xiàn)App自動檢測版本升級的示例代碼
前言
目前手里接到個(gè)項(xiàng)目需要用到uniapp
來開發(fā)一款平板應(yīng)用,既然是應(yīng)用,自然是少不了自動版本升級的功能了,本來想插件市場看有沒有現(xiàn)成的用一用,發(fā)現(xiàn)都需要使用云端基于 uniCloud 云函數(shù)實(shí)現(xiàn),對于我們這種有專門后端服務(wù)的肯定是不希望再搞一個(gè)服務(wù)出來,于是還是決定自己動手寫一些,也方便后續(xù)調(diào)整
思路
梳理了一下大致有這么三個(gè)流程
- 獲取本地版本號
- 獲取服務(wù)端最新版本號
- 提示升級安裝這
下面我們就按這三個(gè)流程來進(jìn)行開發(fā)
開發(fā)
初始化
這里我們設(shè)計(jì)一個(gè)版本升級的類,邏輯盡可能簡單,方便復(fù)用
class Upgrade { constructor() { this.downloadUrl = '' // ... } // ... } ? export default Upgrade
獲取本地版本號
uniapp
在應(yīng)用端使用H5+
標(biāo)準(zhǔn),故可以使用plus
相關(guān)的api獲取應(yīng)用的版本號
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ù)端最新版本號
這里只做了個(gè)簡單的封裝,最新的版本號根據(jù)接口請求從服務(wù)端獲取,最好順帶把下載地址也返回了
getLatestVersion = () => { return new Promise((resolve, reject) => { // 相關(guān)接口 const version = '0.0.0' this.downloadUrl = 'XXX' resolve(version) }).catch(err => { console.err(err); }) }
比較版本號
關(guān)于新老版本號的比較,看過很多資料都是通過parseInt(widgetInfo.version.split('.').join(''))
轉(zhuǎn)為純數(shù)字進(jìn)行對比的,我這里就不搞那么復(fù)雜了,默認(rèn)服務(wù)端的就是最新的,只要不是跟客戶端保持一致,就提示更新,簡單粗暴點(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: '檢測到有版本更新!', content: '請升級app到最新版本!', cancelText: '暫不升級', confirmText: '立即升級', success: res => { console.log('下載'); // ... } }) }
更新安裝包
如果上一步點(diǎn)擊立即升級,那么這里就創(chuàng)建下載任務(wù)下載我們的安裝包,并讓它下載完畢后自動安裝
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)度,這里就簡單暴露一個(gè)進(jìn)度屬性progress
出來,實(shí)際場景可以根據(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)度啦
頁面中調(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: '檢測到有版本更新!', 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
到此這篇關(guān)于uniapp中實(shí)現(xiàn)App自動檢測版本升級的示例代碼的文章就介紹到這了,更多相關(guān)uniapp App自動檢測版本升級內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
SWFUpload多文件上傳及文件個(gè)數(shù)限制的方法
這篇文章主要介紹了SWFUpload多文件上傳及文件個(gè)數(shù)限制的方法,較為詳細(xì)的分析了SWFUpload組件實(shí)現(xiàn)多文件上傳的原理、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-05-05Input文本框隨著輸入內(nèi)容多少自動延伸的實(shí)現(xiàn)
下面小編就為大家?guī)硪黄狪nput文本框隨著輸入內(nèi)容多少自動延伸的實(shí)現(xiàn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02仿iPhone通訊錄制作小程序自定義選擇組件的實(shí)現(xiàn)
這篇文章主要介紹了仿iPhone通訊錄制作小程序自定義選擇組件的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05Javascript優(yōu)化技巧之短路表達(dá)式詳細(xì)介紹
這篇文章主要介紹了Javascript優(yōu)化技巧之短路表達(dá)式詳細(xì)介紹,本文講解了什么是短路表達(dá)式,并給出了一些示例,需要的朋友可以參考下2015-03-03JavaScript中改變this指向的三種方式總結(jié)
this?指向的值是可以通過手動方式去改變的,比如call、bind、apply方法,本文主要為大家介紹了這三種方式的具體實(shí)現(xiàn)步驟,需要的可以參考下2023-12-12Javascript動態(tài)綁定事件的簡單實(shí)現(xiàn)代碼
Javascript事件綁定的方法很多,很靈活。不過,作為比較簡單的動態(tài)綁定,下面的代碼看似正確,但得不到預(yù)期的效果。2010-12-12實(shí)現(xiàn)div內(nèi)部滾動條滾動到底部和頂部的代碼
下面筆者就為大家分享一篇實(shí)現(xiàn)div內(nèi)部滾動條滾動到底部和頂部的代碼,代碼簡潔,具有很好的參考價(jià)值,希望對大家有所幫助2017-11-11