upgrade.js
/*** @description H5+下载App* @param downloadUrl:App下载链接* @param progressCallBack:下载进度回调*/
export const downloadApp = (downloadUrl, progressCallBack = () => {}, ) => {return new Promise((resolve, reject) => {//创建下载任务const downloadTask = plus.downloader.createDownload(downloadUrl, {method: "GET"}, (task, status) => {console.log(status,'status')if (status == 200) { //下载成功resolve(task.filename)} else {reject('fail')uni.showToast({title: '下载失败',duration: 1500,icon: "none"});}})//监听下载过程downloadTask.addEventListener("statechanged", (task, status) => {switch (task.state) {case 1: // 开始 break;case 2: //已连接到服务器 break;case 3: // 已接收到数据 let hasProgress = task.totalSize && task.totalSize > 0 //是否能获取到App大小if (hasProgress) {let current = parseInt(100 * task.downloadedSize / task.totalSize); //获取下载进度百分比progressCallBack(current)}break;case 4: // 下载完成 break;}});//开始执行下载downloadTask.start();})}
/*** @description H5+安装APP* @param fileName:app文件名* @param callBack:安装成功回调*/
export const installApp = (fileName, callBack = () => {}) => {//注册广播监听app安装情况onInstallListening(callBack);//开始安装plus.runtime.install(plus.io.convertLocalFileSystemURL(fileName), {}, () => {//成功跳转到安装界面}, function(error) {uni.showToast({title: '安装失败',duration: 1500,icon: "none"});})}
/*** @description 注册广播监听APP是否安装成功* @param callBack:安装成功回调函数*/
const onInstallListening = (callBack = () => {}) => {let mainActivity = plus.android.runtimeMainActivity(); //获取activity//生成广播接收器let receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {onReceive: (context, intent) => { //接收广播回调 plus.android.importClass(intent);mainActivity.unregisterReceiver(receiver); //取消监听callBack()}});let IntentFilter = plus.android.importClass('android.content.IntentFilter');let Intent = plus.android.importClass('android.content.Intent');let filter = new IntentFilter();filter.addAction(Intent.ACTION_PACKAGE_ADDED); //监听APP安装 filter.addDataScheme("package");mainActivity.registerReceiver(receiver, filter); //注册广播}update_mask.vue
<template><view><view class="update-mask" v-if="show || showPrgress"><view class="update-wrap" v-if="show"><view class="update-title">发现新版本</view><view class="update-version">v{{ dataInfo.appVersion }}</view><view class="update-conent"><!-- <view class="update-con-title">更新内容：</view> --><view class="update-con-p"><view class="update-p">尊敬的用户：</view><view class="update-p">您当前版本V{{ systemVersion }},为了提供更好的用户体验和功能改进，我们应用需要进行强制更新，请尽快更新至最新版本以获得最新功能和改进。感谢您的理解与支持！</view></view></view><button class="update-btn" v-if="!btnDisable" @click="gotoUpdate">立即更新</button><view class="progress-view" @click="handleInstallApp" v-else-if="btnDisable"><view v-if="showPrgress" style="height: 100%;"><view class="txt">{{percentText}}</view><view class="progress" :style="{width: `${progress}%`}"></view></view><button class="update-finish" v-else>{{ isDownloadFinish ? '立即安装' :'下载中...'}}</button></view></view></view></view>
</template>
<script>
import { getAppVersion } from '@/api/api.js'
import {downloadApp,installApp
} from './upgrade.js'
export default {components: {},data() {return {show: false,info: "",dataInfo: "",showPrgress: false,progress: 0,percentText: '下载中',isDownloadFinish: false,btnDisable: false,systemVersion:"",testData:"",fileName: "",//文件名称}},watch: {},async mounted() {// 大版本更新this.getUplate(); },methods: {getUplate(){uni.hideLoading();let that = this;const info = uni.getSystemInfoSync()const systemVersion = plus.runtime.versionthat.systemVersion = systemVersion;let updateStatus = ""getAppVersion().then(res => {let status = res.status;let data = res.data;if (status === 200 && data) {if (data.androidAddress) {if (data.androidAddress.indexOf('.apk') > -1) {const nowVersion = systemVersion.split('.').join('')let appVersion = data.appVersion.split('.').join('')console.log("当前版本",nowVersion)console.log("线上版本",appVersion)console.log("是否更新",nowVersion < appVersion)if (nowVersion < appVersion) {uni.hideTabBar();updateStatus = 'apk';that.updateMet(updateStatus,info,data);}} }}})},updateMet(updateStatus,info,data){if(updateStatus == 'apk' || updateStatus == 'wgt'){this.show = true;this.info = info;this.dataInfo = data;this.updateStatus = updateStatus;}},// 开始更新gotoUpdate(){this.btnDisable = true;if(this.updateStatus == 'apk'){this.apkUpdate(this.info, this.dataInfo);}},//安装apphandleInstallApp() {//下载完成才能安装，防止下载过程中点击if (this.isDownloadFinish && this.fileName) {installApp(this.fileName, () => {//安装成功,关闭升级弹窗// uni.navigateBack()})}},apkUpdate(info, data){let that = this;downloadApp(data.androidAddress, current => {that.showPrgress = true;that.progress = current;that.percentText = `下载中${current}%`}).then(fileName => {//下载完成that.isDownloadFinish = true;that.percentText = `下载完成`that.showPrgress = false;that.fileName = fileNameif (fileName) {//自动安装Appthat.handleInstallApp()}}).catch(e => {console.log(e, 'e')})},},
}
</script>
<style lang="scss" scoped>
$btn-height: 80rpx;
.update-mask{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 1000;background: rgba(0,0,0,0.3);z-index: 99999;.update-wrap{background: #fff;color: #000;position: absolute;width: 80%;top: 50%;left: 50%;transform: translate(-50%,-50%);padding: 40rpx;border-radius: 20rpx;letter-spacing: 2rpx;}.update-title{font-size: 38rpx;margin-bottom: 6rpx;}.update-version{font-size: 28rpx;margin-bottom: 60rpx;margin-top: 6rpx;}.update-conent{font-size: 24rpx;}.update-con-p{margin: 30rpx 0;}.update-p{line-height: 40rpx;}.update-btn{background: #43CF7C;text-align: center;color: #fff;height: $btn-height;line-height: $btn-height;border-radius: 6rpx;position: relative;font-size: 32rpx;}
}
.progress-view {width: 100%;height: $btn-height;display: flex;position: relative;align-items: center;border-radius: 6rpx;background-color: rgba(255,255,255,0.4);display: flex;justify-content: flex-start;overflow: hidden;border: 1px solid #43CF7C;.progress {height: 100%;background-color: rgba(67,207,124,0.3);padding: 0px;box-sizing: border-box;width: 20%;position: absolute;top: 0;left: 0;}.txt {font-size: 28rpx;position: absolute;top: 50%;left: 50%;z-index: 10;transform: translate(-50%, -50%);color: #43CF7C;}.update-finish{position: absolute;width: 100%;height: 100%;text-align: center;line-height: $btn-height;color: #43CF7C;font-size: 28rpx;}
}
</style>wgt更新
wgtUpdate.js
function wgtUpdate(data){uni.downloadFile({url: data.androidAddress,success: downloadResult => {if (downloadResult.statusCode === 200) {plus.runtime.install(downloadResult.tempFilePath,{force: false},function () {console.log('install success...')plus.runtime.restart()},function (error) {uni.showModal({title: '更新失败',content: error.message,confirmText: '我知道了',showCancel: false})console.error('install fail...')})}}})
}
export default wgtUpdateapp.vue
<script>import wgtUpdate from "@/utils/update/wgtUpdate";import { getAppVersion } from '@/api/api.js';export default {globalData: {},onLaunch: function(option) {getAppVersion().then(res => {let status = res.status;let data = res.data;if (status === 200 && data) {if(data.androidAddress.indexOf('.wgt') > -1) {plus.runtime.getProperty(plus.runtime.appid, function (widgetInfo) {if (widgetInfo.version < data.appVersion) {wgtUpdate(data)}})}}})},onShow() { },methods: {},}
</script>
<style lang="scss">
</style>