uniapp實現app熱更新的方法

更新時間：2023年01月03日 10:06:52 作者：清慕

本文主要介紹了uniapp實現app熱更新的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

啊~時隔多月終于閑下來了。最近整理了下資料發(fā)現熱更新在app開發(fā)是經常見的，基本必備而且確實很方便，所以就總結了點東西給大家看看，有問題可以一起討論

一、實現熱更新需要那些東西

需要服務器存放更新包資源，后端提供接口用于檢測當前版本是否為最新版本。（增刪改查）熱更新的流程其實很簡單，如下圖所示

二、具體流程代碼

1.獲取當前應用app版本

// 保存 app 版本信息
// #ifdef APP-PLUS
plus.runtime.getProperty(plus.runtime.appid, (widgetInfo)=> {
    // console.log('widgetInfo', widgetInfo);
    this.version = widgetInfo.version;
});
// #endif

2.獲取服務器上更新包的資源（包含下載鏈接，更新包版本），比較當前版本是否為最新版本，不是則彈出提示更新最新版本

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('當前為最新版本');
                return
            } 
            if(this.version.replace(/\./g, "") * 1 >= result.replace(/\./g, "") * 1){
                this.$toast('當前為最新版本');
                return
            }
            uni.showModal({
                title: '提示',
                content: '發(fā)現有新版本可以升級',
                cancelText: '取消更新',
                confirmText: '立即更新',
                success: res1 => {
                    if (res1.confirm) {
                        console.log('用戶點擊確定');
                        // 補丁下載安裝
                        // this.versionNum=res.data.versionNum
                        this.downWgt(res.data.patchUrl)
                    } else if (res1.cancel) {
                        console.log('用戶點擊取消');
                    }
                },
                fail: (err) => {
                    console.log('下載失敗', err);
                }
            });
        } else {
            this.$toast(res.msg);
        }
    })
},

3.用戶選擇更新版本下載更新包

// 下載補丁
// patchUrl 更新包下載路徑
downWgt(patchUrl) {
    let _this=this
    this.downloadTask = uni.downloadFile({
        url:patchUrl,
        success: (downloadResult) => {
            if (downloadResult.statusCode === 200) {  
                // 安裝應用
                plus.runtime.install(
                    downloadResult.tempFilePath, 
                    {force: false}, 
                ()=> {  
                    plus.nativeUI.toast('最新版本下載完成')
                    // 安裝成功之后關閉應用重啟app
                    plus.runtime.restart();  
                }, (e)=> {  
                    plus.nativeUI.toast("補丁安裝失敗")// 常見問題：版本號，appId
                });  
            }
        },
        fail: (err) => {
            plus.nativeUI.toast("補丁下載失敗")
        }
    })
},
// 用戶取消更新，中斷下載
cancel() {
    if(this.downloadTask) {
        this.$toast('取消下載安裝!')
        this.downloadTask.abort()
        this.downloadTask = null
    }
},

到此就完成了熱更新的功能，看著不難吧，最后貼出我寫的完整的代碼，最好封裝成一個組件

<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ā)現新版本</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">取消升級</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() {
            // 獲取版本號（在其他地方需要用到所以存了全局變量）
            return getApp().globalData.version
        }
    },
    methods:{
        // 檢查補丁更新
        checkWgtFun() {
            //loginApi.getPatchManage 為更新包的請求接口方法
            loginApi.getPatchManage().then(res=> {
                console.log('檢查補丁更新包', 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('當前為最新版本');
                        }
                        return
                    } 
                    if(this.version.replace(/\./g, "") * 1 >= result.replace(/\./g, "") * 1){
                        if(this.verShow){
                            this.$toast('當前為最新版本');
                        }
                        return
                    }
                    uni.showModal({
                        title: '提示',
                        content: '發(fā)現有新版本可以升級',
                        cancelText: '取消更新',
                        confirmText: '立即更新',
                        success: res1 => {
                            if (res1.confirm) {
                                console.log('用戶點擊確定');
                                console.log(res);
                                // 補丁下載安裝
                                this.versionNum=res.data.versionNum
                                this.downWgt(res.data.patchUrl)
                            } else if (res1.cancel) {
                                console.log('用戶點擊取消');
                            }
                        },
                        fail: (err) => {
                            console.log('下載失敗', err);
                        }
                    });
                } else {
                    this.isCheck = false
                }
            })
        },
        // 下載補丁
        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) {  
                        // 安裝應用
                        plus.runtime.install(downloadResult.tempFilePath, {force: false}, ()=> {
                            _this.show =false
                            plus.nativeUI.toast('最新版本下載完成')
                            // 安裝成功之后重啟
                            plus.runtime.restart();  
                        }, (e)=> {  
                            _this.show =false
                            plus.nativeUI.toast("補丁下載失敗")
                        });  
                    }
                },
                fail: (err) => {
                    _this.show =false
                    plus.nativeUI.toast("補丁下載失敗")
                }
            })
            this.downloadTask.onProgressUpdate((res) => {
                // 當前下載進度
                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
            });
        },
        // 關閉蒙層 中斷下載
        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
}

最后在附上如何打包更新包，這個也簡單，跟打包安裝包一樣

選擇制作wgt包，然后點擊生成就可以了，然后就等待打包，更新包一般比安裝包快且沒有次數限制

還有值得注意的是記得每次打包記得更改版本號跟版本名稱這兩個地方哦

到此這篇關于uniapp實現app熱更新的方法的文章就介紹到這了,更多相關uniapp app熱更新內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

使用JavaScript實現圖片放大鏡功能
圖片放大鏡（Image?Zoom）效果在許多電子商務網站、在線畫廊和產品展示頁面中得到廣泛應用,它允許用戶通過鼠標懸停在圖片上,查看圖片的詳細局部放大效果,本文將詳細介紹如何使用?JavaScript?實現一個基本的圖片放大鏡功能,需要的朋友可以參考下
2024-12-12
document.createElement("A")比較不錯的屬性
document.createElement("A")比較不錯的屬性...
2007-08-08
BootStrap智能表單實戰(zhàn)系列(八)表單配置json詳解
這篇文章主要介紹了BootStrap智能表單實戰(zhàn)系列(八)表單配置json詳解的相關資料,本章節(jié)屬于高級部分，介紹一些表單中的配置知識，非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
開發(fā) Internet Explorer 右鍵功能表(ContextMenu)
本篇介紹如何開發(fā) Internet Explorer 右鍵功能表(ContextMenu)，以 0rz.tw 縮短網址列為范例
2013-07-07
Javascript中的this,bind和that使用實例
這篇文章主要介紹了Javascript中的this,bind和that使用實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-12-12
為JavaScript類型增加方法的實現代碼(增加功能)
大家在js開發(fā)過程中有些功能已經滿足不了我們的需求，或沒有我們需要的功能，那么我們就可以自己擴展下，個性化js
2011-12-12
ionic+html5+API實現雙擊返回鍵退出應用
這篇文章主要為大家詳細介紹了ionic+html5+API實現雙擊返回鍵退出應用，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09
小程序canvas手寫簽名適配PC實現示例詳解
這篇文章主要為大家介紹了小程序canvas手寫簽名適配PC實現示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-04-04
javascript(js)的小數點乘法除法問題詳解
本篇文章主要是對javascript(js)中的小數點乘法除法問題進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-03-03
利用uni-app和uView實現多圖上傳功能全過程
最近在使用uniapp開發(fā)的微信小程序中使用了圖片上傳功能,下面這篇文章主要給大家介紹了關于利用uni-app和uView實現多圖上傳功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-03-03