lijuncheng
6 months ago
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