uniapp實(shí)現(xiàn)app熱更新的方法
更新時(shí)間：2023年01月03日 10:06:52 作者：清慕
本文主要介紹了uniapp實(shí)現(xiàn)app熱更新的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
啊~時(shí)隔多月終于閑下來了。最近整理了下資料發(fā)現(xiàn)熱更新在app開發(fā)是經(jīng)常見的，基本必備而且確實(shí)很方便，所以就總結(jié)了點(diǎn)東西給大家看看，有問題可以一起討論
一、實(shí)現(xiàn)熱更新需要那些東西
需要服務(wù)器存放更新包資源，后端提供接口用于檢測當(dāng)前版本是否為最新版本。（增刪改查） 熱更新的流程其實(shí)很簡單，如下圖所示
二、具體流程代碼
1.獲取當(dāng)前應(yīng)用app版本
// 保存 app 版本信息
// #ifdef APP-PLUS
plus.runtime.getProperty(plus.runtime.appid, (widgetInfo)=> {
// console.log('widgetInfo', widgetInfo);
this.version = widgetInfo.version;
});
// #endif2.獲取服務(wù)器上更新包的資源（包含下載鏈接，更新包版本），比較當(dāng)前版本是否為最新版本，不是則彈出提示更新最新版本
checkWgtFun() {
//loginApi.getPatchManage() 獲取更新包接口
loginApi.getPatchManage().then(res=> {
console.log('檢查更新包', res);
if(res.code == 200) {
let result = res.data.versionNum // 更新包版本
if(this.version.substr(0, 3) * 1 >= result.substr(0, 3) * 1){
this.$toast('當(dāng)前為最新版本');
return
}
if(this.version.replace(/\./g, "") * 1 >= result.replace(/\./g, "") * 1){
this.$toast('當(dāng)前為最新版本');
return
}
uni.showModal({
title: '提示',
content: '發(fā)現(xiàn)有新版本可以升級(jí)',
cancelText: '取消更新',
confirmText: '立即更新',
success: res1 => {
if (res1.confirm) {
console.log('用戶點(diǎn)擊確定');
// 補(bǔ)丁下載安裝
// this.versionNum=res.data.versionNum
this.downWgt(res.data.patchUrl)
} else if (res1.cancel) {
console.log('用戶點(diǎn)擊取消');
}
},
fail: (err) => {
console.log('下載失敗', err);
}
});
} else {
this.$toast(res.msg);
}
})
},3.用戶選擇更新版本下載更新包
// 下載補(bǔ)丁
// patchUrl 更新包下載路徑
downWgt(patchUrl) {
let _this=this
this.downloadTask = uni.downloadFile({
url:patchUrl,
success: (downloadResult) => {
if (downloadResult.statusCode === 200) {
// 安裝應(yīng)用
plus.runtime.install(
downloadResult.tempFilePath,
{force: false},
()=> {
plus.nativeUI.toast('最新版本下載完成')
// 安裝成功之后關(guān)閉應(yīng)用重啟app
plus.runtime.restart();
}, (e)=> {
plus.nativeUI.toast("補(bǔ)丁安裝失敗")// 常見問題：版本號(hào)，appId
});
}
},
fail: (err) => {
plus.nativeUI.toast("補(bǔ)丁下載失敗")
}
})
},
// 用戶取消更新，中斷下載
cancel() {
if(this.downloadTask) {
this.$toast('取消下載安裝!')
this.downloadTask.abort()
this.downloadTask = null
}
},到此就完成了熱更新的功能，看著不難吧，最后貼出我寫的完整的代碼，最好封裝成一個(gè)組件
<template>
<view>
<view @click="checkApp" v-if="verShow">
<u-cell-item title="檢查新版本" :value='version' :arrow='false'></u-cell-item>
</view>
<u-mask :show="show">
<view class="warp">
<view class="version">
<view class="new-version">發(fā)現(xiàn)新版本</view>
<view style="color: #fff;">v {{versionNum}}</view>
<view class="be-updating">正在更新</view>
<u-line-progress
:percent='schedule.progress'
:show-percent='false'
active-color='#4B86FE'
striped
striped-active>
</u-line-progress>
<view class="down-prog">{{schedule.totalBytesWritten}}/{{schedule.totalBytesExpectedToWrite}}
</view>
<view class="cancel" @click="cancel">取消升級(jí)</view>
</view>
</view>
</u-mask>
</view>
</template>
<script>
import {mineApi,loginApi} from '@/api/myAjax.js'
import filters from '@/common/filters.js'
export default {
props:{
verShow:{
type:Boolean,
default:true
},
},
data() {
return {
versionNum:'',
schedule:{},
show: false,
downloadTask:null,
time:10,
isCheck:false
// versionText:''
};
},
computed:{
version() {
// 獲取版本號(hào)（在其他地方需要用到所以存了全局變量）
return getApp().globalData.version
}
},
methods:{
// 檢查補(bǔ)丁更新
checkWgtFun() {
//loginApi.getPatchManage 為更新包的請(qǐng)求接口方法
loginApi.getPatchManage().then(res=> {
console.log('檢查補(bǔ)丁更新包', res);
console.log('<this.globalData.version>', uni.getStorageSync('appVersion'));
if(res.code == 200) {
let result = res.data.versionNum
if(this.version.substr(0, 3) * 1 > result.substr(0, 3) * 1){
if(this.verShow){
this.$toast('當(dāng)前為最新版本');
}
return
}
if(this.version.replace(/\./g, "") * 1 >= result.replace(/\./g, "") * 1){
if(this.verShow){
this.$toast('當(dāng)前為最新版本');
}
return
}
uni.showModal({
title: '提示',
content: '發(fā)現(xiàn)有新版本可以升級(jí)',
cancelText: '取消更新',
confirmText: '立即更新',
success: res1 => {
if (res1.confirm) {
console.log('用戶點(diǎn)擊確定');
console.log(res);
// 補(bǔ)丁下載安裝
this.versionNum=res.data.versionNum
this.downWgt(res.data.patchUrl)
} else if (res1.cancel) {
console.log('用戶點(diǎn)擊取消');
}
},
fail: (err) => {
console.log('下載失敗', err);
}
});
} else {
this.isCheck = false
}
})
},
// 下載補(bǔ)丁
downWgt(patchUrl) {
let _this=this
console.log(patchUrl);
this.isCheck = false
this.show = true
this.downloadTask = uni.downloadFile({
url:patchUrl,
success: (downloadResult) => {
if (downloadResult.statusCode === 200) {
// 安裝應(yīng)用
plus.runtime.install(downloadResult.tempFilePath, {force: false}, ()=> {
_this.show =false
plus.nativeUI.toast('最新版本下載完成')
// 安裝成功之后重啟
plus.runtime.restart();
}, (e)=> {
_this.show =false
plus.nativeUI.toast("補(bǔ)丁下載失敗")
});
}
},
fail: (err) => {
_this.show =false
plus.nativeUI.toast("補(bǔ)丁下載失敗")
}
})
this.downloadTask.onProgressUpdate((res) => {
// 當(dāng)前下載進(jìn)度
if(this.time%10==0){
this.schedule=res
this.schedule.totalBytesExpectedToWrite=filters.sizeMB(res.totalBytesExpectedToWrite)
this.schedule.totalBytesWritten=filters.sizeMB(res.totalBytesWritten)
}
this.time+=1
});
},
// 關(guān)閉蒙層 中斷下載
cancel() {
if(this.downloadTask) {
this.$toast('取消下載安裝!')
this.downloadTask.abort()
this.downloadTask = null
this.show=false
this.schedule={}
}
},
}
}
</script>
<style lang="scss" scoped>
.version{
width: 521rpx;
height: 583rpx;
font-size: 24rpx;
padding: 207rpx 44rpx 33rpx;
background: url(/static/mine/gxt.png) no-repeat;
background-size: 100% 100%;
.new-version{
font-size: 30rpx;
color: #fff;
margin-bottom: 7rpx;
height: 45rpx;
line-height: 45rpx;
}
.be-updating{
margin-top: 96rpx;
margin-bottom: 14rpx;
}
.down-prog{
margin: 14rpx 0;
}
.cancel{
text-align: right;
color: #2CA6F8;
}
}
</style>filters.js文件
function sizeMB(size){
if(size<1024){
return size+'B';
}else if(size/1024>=1 && size/1024/1024<1){
return Math.floor(size/1024*100)/100+'KB';
}else if(size/1024/1024>=1){
return Math.floor(size/1024/1024*100)/100+'MB';
}
}
export default {
sizeMB
}最后在附上如何打包更新包，這個(gè)也簡單，跟打包安裝包一樣
選擇制作wgt包，然后點(diǎn)擊生成就可以了，然后就等待打包，更新包一般比安裝包快且沒有次數(shù)限制
還有值得注意的是記得每次打包記得更改版本號(hào)跟版本名稱這兩個(gè)地方哦
到此這篇關(guān)于uniapp實(shí)現(xiàn)app熱更新的方法的文章就介紹到這了,更多相關(guān)uniapp app熱更新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用JavaScript實(shí)現(xiàn)圖片放大鏡功能
圖片放大鏡（Image?Zoom）效果在許多電子商務(wù)網(wǎng)站、在線畫廊和產(chǎn)品展示頁面中得到廣泛應(yīng)用,它允許用戶通過鼠標(biāo)懸停在圖片上,查看圖片的詳細(xì)局部放大效果,本文將詳細(xì)介紹如何使用?JavaScript?實(shí)現(xiàn)一個(gè)基本的圖片放大鏡功能,需要的朋友可以參考下2024-12-12
document.createElement("A")比較不錯(cuò)的屬性
document.createElement("A")比較不錯(cuò)的屬性...2007-08-08
BootStrap智能表單實(shí)戰(zhàn)系列(八)表單配置json詳解
這篇文章主要介紹了BootStrap智能表單實(shí)戰(zhàn)系列(八)表單配置json詳解的相關(guān)資料,本章節(jié)屬于高級(jí)部分，介紹一些表單中的配置知識(shí)，非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
開發(fā) Internet Explorer 右鍵功能表(ContextMenu)
本篇介紹如何開發(fā) Internet Explorer 右鍵功能表(ContextMenu)，以 0rz.tw 縮短網(wǎng)址列為范例2013-07-07
Javascript中的this,bind和that使用實(shí)例
這篇文章主要介紹了Javascript中的this,bind和that使用實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
為JavaScript類型增加方法的實(shí)現(xiàn)代碼(增加功能)
大家在js開發(fā)過程中有些功能已經(jīng)滿足不了我們的需求，或沒有我們需要的功能，那么我們就可以自己擴(kuò)展下，個(gè)性化js2011-12-12
ionic+html5+API實(shí)現(xiàn)雙擊返回鍵退出應(yīng)用
這篇文章主要為大家詳細(xì)介紹了ionic+html5+API實(shí)現(xiàn)雙擊返回鍵退出應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
小程序canvas手寫簽名適配PC實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了小程序canvas手寫簽名適配PC實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
javascript(js)的小數(shù)點(diǎn)乘法除法問題詳解
本篇文章主要是對(duì)javascript(js)中的小數(shù)點(diǎn)乘法除法問題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-03-03
利用uni-app和uView實(shí)現(xiàn)多圖上傳功能全過程
最近在使用uniapp開發(fā)的微信小程序中使用了圖片上傳功能,下面這篇文章主要給大家介紹了關(guān)于利用uni-app和uView實(shí)現(xiàn)多圖上傳功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03