10 changed files with 483 additions and 21 deletions
@ -0,0 +1,70 @@ |
|||
|
|||
export function checkVersion(isShowHint){ |
|||
let curversionCode = 0; |
|||
plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) { |
|||
const data = { |
|||
action: 'checkVersion', |
|||
appid: plus.runtime.appid, |
|||
appVersion: plus.runtime.version, |
|||
wgtVersion: widgetInfo.version, |
|||
versionCode: widgetInfo.versionCode |
|||
} |
|||
curversionCode = data.versionCode |
|||
uni.request({ |
|||
url:"http://192.168.0.105:9527/appUpdate.json", |
|||
method:"GET" |
|||
}).then(res=>{ |
|||
console.log("当前版本提示", curversionCode) |
|||
var json = JSON.stringify(res) |
|||
console.log("获取更新数据", json) |
|||
if (res.data) { |
|||
if (res.data.versionCode > Number(curversionCode)) { |
|||
var downUrl = res.data.downUrl; |
|||
var content = res.data.content; |
|||
var version = res.data.versionCode; |
|||
var isForcedUpdate = false |
|||
var versionName =res.data.version |
|||
console.log("新版本提示"+getCurrentPageRoute()) |
|||
if(getCurrentPageRoute()!="pages/appUpdate/upgrade"){ |
|||
// uni.navigateTo({
|
|||
// url: '/pages/index/upgrade?versionInfo='+encodeURIComponent(encodeURIComponent(JSON.stringify(res.data))),
|
|||
// })
|
|||
console.log("跳转") |
|||
uni.navigateTo({ |
|||
url: '/pages/appUpdate/upgrade', |
|||
success() { |
|||
uni.$emit('upgrade-app', { |
|||
versionName, |
|||
content, |
|||
downUrl, |
|||
isForcedUpdate |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} else { |
|||
if(isShowHint){ |
|||
uni.showToast({ |
|||
title: "当前是最新版本" |
|||
}) |
|||
} |
|||
|
|||
console.log("没有新版本") |
|||
} |
|||
} |
|||
}).catch(error=>{ |
|||
|
|||
}) |
|||
}) |
|||
} |
|||
|
|||
//获取当前页面url
|
|||
export function getCurrentPageRoute () { |
|||
let currentRoute; |
|||
let pages = getCurrentPages() // 获取栈实例
|
|||
if (pages&&pages.length) { |
|||
currentRoute = pages[pages.length - 1].route; |
|||
|
|||
} |
|||
return currentRoute |
|||
} |
|||
@ -0,0 +1,97 @@ |
|||
/** |
|||
* @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" |
|||
}, function (task, status) { |
|||
console.log(status,'status') |
|||
if (status == 200) { //下载成功
|
|||
resolve(task.filename) |
|||
|
|||
} else { |
|||
reject('fail') |
|||
uni.showToast({ |
|||
title: '下载失败', |
|||
duration: 1500, |
|||
icon: "none" |
|||
}); |
|||
} |
|||
}) |
|||
//开始执行下载
|
|||
downloadTask.start(); |
|||
//监听下载过程
|
|||
downloadTask.addEventListener("statechanged", function(task, |
|||
status) { |
|||
console.log("下载"+task.totalSize) |
|||
switch (task.state) { |
|||
case 1: // 开始
|
|||
break; |
|||
case 2: //已连接到服务器
|
|||
break; |
|||
case 3: // 已接收到数据
|
|||
console.log(task,'task') |
|||
let hasProgress = task.totalSize && task.totalSize > 0 //是否能获取到App大小
|
|||
if (hasProgress) { |
|||
let current = parseInt(100 * task.downloadedSize / task.totalSize); //获取下载进度百分比
|
|||
progressCallBack(current,task.downloadedSize,task.totalSize) |
|||
} |
|||
break; |
|||
case 4: // 下载完成
|
|||
break; |
|||
} |
|||
}); |
|||
|
|||
}) |
|||
|
|||
|
|||
} |
|||
/** |
|||
* @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) { |
|||
console.log("安装失败"+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); //监听apk安装
|
|||
filter.addDataScheme("package"); |
|||
mainActivity.registerReceiver(receiver, filter); //注册广播
|
|||
|
|||
|
|||
} |
|||
@ -0,0 +1,283 @@ |
|||
<template> |
|||
<view class="upgrade-popup"> |
|||
<image class="header-bg" src="./upgrade_bg.png" mode="widthFix"></image> |
|||
<view class="main"> |
|||
<view class="version">发现新版本:{{versionName}}</view> |
|||
<view class="content"> |
|||
<text class="title">更新内容</text> |
|||
<view class="desc" v-html="versionDesc"></view> |
|||
</view> |
|||
<!--下载状态-进度条显示 --> |
|||
<view class="footer" v-if="isStartDownload"> |
|||
<view class="progress-view" :class="{'active':!hasProgress}" @click="handleInstallApp"> |
|||
<!-- 进度条 --> |
|||
<view v-if="hasProgress" style="height: 100%;"> |
|||
<view class="txt">{{percentText}}</view> |
|||
<view class="progress" :style="setProStyle"></view> |
|||
</view> |
|||
<view v-else> |
|||
<view class="btn upgrade force">{{ isDownloadFinish ? '立即安装' :'下载中...'}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 强制更新 --> |
|||
<view class="footer" v-else-if="isForceUpdate"> |
|||
<view class="btn upgrade force" @click="handleUpgrade">立即更新</view> |
|||
</view> |
|||
<!-- 可选择更新 --> |
|||
<view class="footer" v-else> |
|||
<view class="btn close" @click="handleClose">以后再说</view> |
|||
<view class="btn upgrade" @click="handleUpgrade">立即更新</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
downloadApp, |
|||
installApp |
|||
} from './upgrade.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
isForceUpdate: false, //是否强制更新 |
|||
versionName: '', //版本名称 |
|||
versionDesc: '', //更新说明 |
|||
downloadUrl: '', //APP下载链接 |
|||
isDownloadFinish: false, //是否下载完成 |
|||
hasProgress: false, //是否能显示进度条 |
|||
currentPercent: 0, //当前下载百分比 |
|||
isStartDownload: false, //是否开始下载 |
|||
fileName: '', //下载后app本地路径名称 |
|||
} |
|||
}, |
|||
computed: { |
|||
//设置进度条样式，实时更新进度位置 |
|||
setProStyle() { |
|||
return { |
|||
width: (510 * this.currentPercent / 100) + 'rpx' //510：按钮进度条宽度 |
|||
} |
|||
}, |
|||
//百分比文字 |
|||
percentText() { |
|||
let percent = this.currentPercent; |
|||
if (typeof percent !== 'number' || isNaN(percent)) return '下载中...' |
|||
if (percent < 100) return `下载中${percent}%` |
|||
return '立即安装' |
|||
|
|||
} |
|||
}, |
|||
|
|||
|
|||
onBackPress(options) { |
|||
// 禁用返回 |
|||
if(this.isForceUpdate&&options.from == 'backbutton'){ |
|||
return true; |
|||
} |
|||
return false |
|||
|
|||
}, |
|||
created() { |
|||
uni.$on('upgrade-app',this.bindEmit) |
|||
}, |
|||
beforeDestroy() { |
|||
uni.$off('upgrade-app',this.bindEmit) |
|||
}, |
|||
methods: { |
|||
bindEmit(e){ |
|||
let {versionName,content,downUrl,isForcedUpdate}=e |
|||
this.versionName=versionName |
|||
this.versionDesc=content |
|||
this.downloadUrl=downUrl |
|||
}, |
|||
//更新 |
|||
handleUpgrade() { |
|||
if (this.downloadUrl) { |
|||
this.isStartDownload = true |
|||
//开始下载App |
|||
downloadApp(this.downloadUrl, current => { |
|||
//下载进度监听 |
|||
console.log("下载中"+current) |
|||
this.hasProgress = true |
|||
this.currentPercent = current |
|||
|
|||
|
|||
}).then(fileName => { |
|||
//下载完成 |
|||
console.log("下载完成") |
|||
this.isDownloadFinish = true |
|||
this.fileName = fileName |
|||
if (fileName) { |
|||
console.log("自动安装") |
|||
//自动安装App |
|||
this.handleInstallApp() |
|||
} |
|||
}).catch(e => { |
|||
console.log(e, 'e') |
|||
}) |
|||
} else { |
|||
uni.showToast({ |
|||
title: '下载链接不存在', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
//安装app |
|||
handleInstallApp() { |
|||
//下载完成才能安装，防止下载过程中点击 |
|||
if (this.isDownloadFinish && this.fileName) { |
|||
installApp(this.fileName, () => { |
|||
//安装成功,关闭升级弹窗 |
|||
uni.navigateBack() |
|||
}) |
|||
} |
|||
}, |
|||
//关闭返回 |
|||
handleClose() { |
|||
uni.navigateBack() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
background: rgba(0, 0, 0, 0.5);/**设置窗口背景半透明*/ |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.upgrade-popup { |
|||
width: 580rpx; |
|||
height: auto; |
|||
position: fixed; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
background: #fff; |
|||
border-radius: 20rpx; |
|||
box-sizing: border-box; |
|||
border: 1px solid #eee; |
|||
} |
|||
|
|||
.header-bg { |
|||
width: 100%; |
|||
margin-top: -112rpx; |
|||
} |
|||
|
|||
.main { |
|||
padding: 10rpx 30rpx 30rpx; |
|||
box-sizing: border-box; |
|||
.version { |
|||
font-size: 36rpx; |
|||
color: #026DF7; |
|||
font-weight: 700; |
|||
width: 100%; |
|||
text-align: center; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
letter-spacing: 1px; |
|||
} |
|||
|
|||
.content { |
|||
margin-top: 60rpx; |
|||
|
|||
.title { |
|||
font-size: 28rpx; |
|||
font-weight: 700; |
|||
color: #000000; |
|||
} |
|||
|
|||
.desc { |
|||
box-sizing: border-box; |
|||
margin-top: 20rpx; |
|||
font-size: 28rpx; |
|||
color: #6A6A6A; |
|||
max-height: 40vh; |
|||
overflow-y: auto; |
|||
} |
|||
} |
|||
|
|||
.footer { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: relative; |
|||
flex-shrink: 0; |
|||
margin-top: 100rpx; |
|||
|
|||
.btn { |
|||
width: 246rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: relative; |
|||
z-index: 999; |
|||
height: 96rpx; |
|||
box-sizing: border-box; |
|||
font-size: 32rpx; |
|||
border-radius: 10rpx; |
|||
letter-spacing: 1rpx; |
|||
|
|||
&.force { |
|||
width: 500rpx; |
|||
} |
|||
|
|||
&.close { |
|||
border: 1px solid #E0E0E0; |
|||
margin-right: 25rpx; |
|||
color: #000; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
&.upgrade { |
|||
background-color: #026DF7; |
|||
color: white; |
|||
} |
|||
} |
|||
|
|||
.progress-view { |
|||
width: 510rpx; |
|||
height: 90rpx; |
|||
display: flex; |
|||
position: relative; |
|||
align-items: center; |
|||
border-radius: 6rpx; |
|||
background-color: #dcdcdc; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
padding: 0px; |
|||
box-sizing: border-box; |
|||
border: none; |
|||
overflow: hidden; |
|||
|
|||
&.active { |
|||
background-color: #026DF7; |
|||
} |
|||
|
|||
.progress { |
|||
height: 100%; |
|||
background-color: #026DF7; |
|||
padding: 0px; |
|||
box-sizing: border-box; |
|||
border: none; |
|||
border-top-left-radius: 10rpx; |
|||
border-bottom-left-radius: 10rpx; |
|||
|
|||
} |
|||
|
|||
.txt { |
|||
font-size: 28rpx; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 41 KiB |
Loading…
Reference in new issue