uniapp实现整包更新和热更新
uniapp实现整包更新和热更新
进度条提示基于uView框架，如何安装使用请查看官方文档，这里不做赘述 uView文档地址 介绍 | uView - 多平台快速开发的UI框架 - uni-app UI框架 (uviewui.com)
在App.vue中的onLaunch或者onShow里写方法获取服务器版本数据
| 123456789101112131415161718192021222324 | <script lang="ts"> import { baseURL } from'../services/request' import Vue from'vue'; export default Vue.extend({ mpType:'app', onLaunch() { }, onShow() { // #ifdef APP-PLUS // 获取本地应用资源版本号 plus.runtime.getProperty(plus.runtime.appid, (inf) => { uni.setStorageSync('versionInfo', inf) uni.request({ url: baseURL +'/edition_manage/get_edition',//后台接口地址 data: { edition_type: plus.runtime.appid,//应用的appid version_type: uni.getSystemInfoSync().platform,// android还是ios }, success: (res: any) => { |
| 12345678910111213141516171819202122232425 | if (res.data.payload.edition_number > inf.versionCode &&res.data.payload.edition_issue ==="1") { uni.reLaunch({ url:'../update/update?obj=' + JSON.stringify(res.data.payload) }) } } }) }); // #endif }, onHide() { }, globalData: { }, });</script> |
res.data.payload.edition_number是服务器的版本号 例如111
inf.versionCode是 manifest基础配置里的应用版本号，整数那个 例如111，
res.data.payload.edition_issue 代表是否提示更新，如果在提交ios应用审核期间，千万不要提示更新
更新页update.vue 如下
| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 | <template> <viewclass=""> <u-modal v-model="show1" confirm-text="升级" :show-cancel-button="cancelButton" :title='title' @confirm="confirm(1)"> <viewclass="u-update-content"> <rich-text :nodes="data.describe"></rich-text> </view> </u-modal> <u-modal v-model="show2" @confirm="confirm(2)" title="升级APP" ref="uModal" :show-confirm-button="false"> <viewclass="tec fs24 mtb40"> 正在为您更新，请耐心等待 </view> <viewclass="plr32 mb40"> <u-line-progress :striped="true" :percent="percent" :striped-active="true"></u-line-progress> </view> </u-modal> </view> </template> <script> const app = getApp() export default { data() { return { title:'发现新版本', percent: 0, show1:true, show2:false, content:'', cancelButton:false, data: { application_name:"", describe:"", edition_name:"", edition_number:"", edition_type:"", edition_url:"",//下载地址 edition_force:"", id:"", package_type:"", version_type:"", } } }, onLoad(options) { this.data = JSON.parse(options.obj) if (this.data.edition_force ==="0") {//是否强制更新 this.cancelButton =true } }, methods: { download() { const downloadTask = uni.downloadFile({ url:this.data.edition_url, success: (res) => { if (res.statusCode === 200) { plus.runtime.install(res.tempFilePath, { force:true,//true表示强制安装，不进行版本号的校验；false则需要版本号校验， },function() { // console.log('install success...'); plus.runtime.restart(); },function(e) { console.log(e); console.error('install fail...'); }); } } }); downloadTask.onProgressUpdate((res) => { this.percent = res.progress }); }, cancel() { uni.navigateBack({ delta: 1 }) }, confirm(num) { if (num == 1) { this.show1 =false if (this.data.package_type ==='0') {//整包升级 if (this.data.edition_url.indexOf(".apk") != -1) { this.show2 =true this.download(); }else { plus.runtime.openURL(this.data.edition_url); } }else {//资源包升级 this.show2 =true this.download(); } }else { this.show2 =false } }, } }</script> <style scoped lang="scss"> .u-full-content { background-color: #00C777; } .u-update-content { font-size: 26rpx; color: $u-content-color; line-height: 1.7; padding: 30rpx; } .plr32 { padding: 0 32rpx; } .mb40 { margin-bottom: 40rpx; }</style> |
在pages.json配置
| 12345678910111213 | { "path":"pages/update/update", "style": { "navigationStyle":"custom",// 取消本页面的导航栏 "app-plus": { "animationType":"fade-in",// 设置fade-in淡入动画，为最合理的动画类型 "background":"transparent",// 背景透明 "backgroundColor":"rgba(0,0,0,0)",// 背景透明 "popGesture":"none" // 关闭IOS屏幕左边滑动关闭当前页面的功能 } } }, |