提交 95597083 编写于 作者: D DCloud_LXH

feat: 升级中心适配通知栏进度条

上级 42e351d5
......@@ -46,8 +46,8 @@
{{installing ? '正在安装……' : '下载完成,立即安装'}}
</button>
<button v-else-if="installed" class="content-button" :disabled="true">
安装完成后,请重启应用
<button v-else-if="installed" class="content-button" @click="installPackage">
安装未完成,点击安装
</button>
</template>
</view>
......@@ -67,9 +67,11 @@
const localFilePathKey = 'UNI_ADMIN_UPGRADE_CENTER_LOCAL_FILE_PATH'
const platform_iOS = 'iOS';
const platform_Android = 'Android';
const requiredKey = ['version', 'url', 'type']
let downloadTask : DownloadTask | null = null;
let openSchemePromise: Promise<boolean> | null = null;
let notificationAbortDownload: boolean = false
/**
* 对比版本号,如需要,请自行修改判断规则
......@@ -115,6 +117,7 @@
}
export default {
emits: ['close'],
data() {
return {
shown: false,
......@@ -141,23 +144,33 @@
contents: '',
version: '',
is_mandatory: false,
url: "",
platform: [] as string[],
store_list: null as StoreListItem[] | null,
// 可自定义属性
subTitle: '发现新版本',
downLoadBtnTextiOS: '立即跳转更新',
downLoadBtnText: '立即下载更新',
downLoadingText: '安装包下载中,请稍后',
url: "",
platform: [] as string[],
store_list: null as StoreListItem[] | null
downLoadingText: '安装包下载中,请稍后'
}
},
computed: {
isiOS() : boolean {
return this.platform.includes(platform_iOS);
},
isAndroid() : boolean {
return this.platform.includes(platform_Android);
},
needNotificationProgress(): boolean {
return this.isAndroid && !this.is_mandatory
}
},
beforeUnmount() {
if (this.needNotificationProgress) {
uni.cancelNotificationProgress()
}
},
methods: {
show(shown : boolean, localPackageInfo : UniUpgradeCenterResult | null) {
if (localPackageInfo === null) return;
......@@ -181,6 +194,19 @@
this.store_list = localPackageInfo.store_list
this.shown = shown
},
askAbortDownload() {
uni.showModal({
title: '是否取消下载?',
cancelText: '否',
confirmText: '是',
success: res => {
if (res.confirm) {
if (downloadTask !== null) downloadTask!.abort()
this.closePopup()
}
}
});
},
closeUpdate() {
if (this.downloading) {
if (this.is_mandatory) {
......@@ -190,18 +216,10 @@
duration: 500
})
}
uni.showModal({
title: '是否取消下载?',
cancelText: '否',
confirmText: '是',
success: res => {
if (res.confirm) {
if (downloadTask !== null) downloadTask!.abort()
this.closePopup()
}
}
});
return;
if (!this.needNotificationProgress) {
this.askAbortDownload()
return;
}
}
this.closePopup()
},
......@@ -222,7 +240,11 @@
this.installed = false
this.showTabbar = false
this.$emit('close')
if (this.needNotificationProgress) uni.cancelNotificationProgress()
if (!notificationAbortDownload) this.$emit('close')
notificationAbortDownload = false
},
updateApp() {
const checkStoreScheme = this.checkStoreScheme()
......@@ -261,7 +283,6 @@
downloadTask = uni.downloadFile({
url: this.url,
success: res => {
console.log('downloadFile res: ', res);
if (res.statusCode == 200) {
this.tempFilePath = res.tempFilePath
this.downLoadComplete()
......@@ -273,10 +294,27 @@
});
if (downloadTask !== null) {
this.downloading = true;
if (this.needNotificationProgress) {
this.closePopup()
}
downloadTask!.onProgressUpdate(res => {
this.downLoadPercent = parseFloat(res.progress.toFixed(0));
this.downloadedSize = parseFloat((res.totalBytesWritten / Math.pow(1024, 2)).toFixed(2));
this.packageFileSize = parseFloat((res.totalBytesExpectedToWrite / Math.pow(1024, 2)).toFixed(2));
if (this.needNotificationProgress) {
uni.createNotificationProgress({
title: "升级中心正在下载安装包……",
content: `${this.downLoadPercent}%`,
progress: this.downLoadPercent,
onClick: () => {
if (!this.downloadSuccess) {
this.askAbortDownload()
notificationAbortDownload = true
}
}
})
}
});
}
},
......@@ -290,9 +328,20 @@
downloadTask = null;
if (this.needNotificationProgress) {
uni.finishNotificationProgress({
title: "安装升级包",
content: "下载完成",
onClick(){}
})
this.installPackage();
return
}
// 强制更新,直接安装
if (this.is_mandatory) {
this.installPackage();
this.installPackage();
}
},
installPackage() {
......@@ -306,7 +355,7 @@
this.installed = true;
},
fail: err => {
console.log('installApk fail');
console.error('installApk fail', err);
// 安装失败需要重新下载安装包
this.installing = false;
this.installed = false;
......@@ -319,7 +368,7 @@
}
});
// 非wgt包,安装跳出覆盖安装,此处直接返回上一页
// 安装跳出覆盖安装,此处直接返回上一页
if (!this.is_mandatory) {
uni.navigateBack()
}
......
......@@ -34,7 +34,9 @@
"type": "unicloud-template-page"
},
"uni_modules": {
"dependencies": [],
"dependencies": [
"uni-progress-notification"
],
"encrypt": [],
"platforms": {
"cloud": {
......
......@@ -10,7 +10,7 @@
<view class="content-body">
<view class="title">
<text>{{subTitle}}</text>
<!-- <text style="padding-left:20rpx;font-size: 0.5em;color: #666;">v.{{version}}</text> -->
<text class="content-body-version">{{version}}</text>
</view>
<view class="body">
<scroll-view class="box-des-scroll" scroll-y="true">
......@@ -44,8 +44,12 @@
plain :loading="installing" :disabled="installing" @click="installPackage">
{{installing ? '正在安装……' : '下载完成,立即安装'}}
</button>
<button v-else-if="installed && !isWGT" class="content-button" style="border: none;color: #fff;"
plain :loading="installing" :disabled="installing" @click="installPackage">
安装未完成,点击安装
</button>
<button v-if="installed && isWGT" class="content-button" style="border: none;color: #fff;" plain
<button v-else-if="installed && isWGT" class="content-button" style="border: none;color: #fff;" plain
@click="restart">
安装完毕,点击重启
</button>
......@@ -62,6 +66,7 @@
<script>
const localFilePathKey = 'UNI_ADMIN_UPGRADE_CENTER_LOCAL_FILE_PATH'
const platform_iOS = 'iOS';
const platform_Android = 'Android';
let downloadTask = null;
let openSchemePromise
......@@ -170,11 +175,8 @@
},
onBackPress() {
// 强制更新不允许返回
if (this.is_mandatory) {
return true
}
downloadTask && downloadTask.abort()
if (this.is_mandatory) return true
if (!this.needNotificationProgress) downloadTask && downloadTask.abort()
},
onHide() {
openSchemePromise = null
......@@ -186,8 +188,14 @@
isiOS() {
return !this.isWGT ? this.platform.includes(platform_iOS) : false;
},
isAndroid() {
return this.platform.includes(platform_Android)
},
isAppStore() {
return this.isiOS || (!this.isiOS && !this.isWGT && this.url.indexOf('.apk') === -1)
},
needNotificationProgress() {
return this.isAndroid && !this.is_mandatory
}
},
methods: {
......@@ -212,6 +220,19 @@
}
}
},
askAbortDownload() {
uni.showModal({
title: '是否取消下载?',
cancelText: '',
confirmText: '',
success: res => {
if (res.confirm) {
downloadTask && downloadTask.abort()
uni.navigateBack()
}
}
});
},
async closeUpdate() {
if (this.downloading) {
if (this.is_mandatory) {
......@@ -221,37 +242,27 @@
duration: 500
})
}
uni.showModal({
title: '是否取消下载?',
cancelText: '',
confirmText: '',
success: res => {
if (res.confirm) {
downloadTask && downloadTask.abort()
uni.navigateBack()
}
}
});
return;
if (!this.needNotificationProgress) {
this.askAbortDownload()
return;
}
}
if (this.downloadSuccess && this.tempFilePath) {
if (!this.needNotificationProgress && this.downloadSuccess && this.tempFilePath) {
// 包已经下载完毕,稍后安装,将包保存在本地
await this.saveFile(this.tempFilePath, this.version)
uni.navigateBack()
return;
}
uni.navigateBack()
},
updateApp() {
this.checkStoreScheme()
.catch(() => {
this.downloadPackage()
})
.finally(() => {
openSchemePromise = null
})
.catch(() => {
this.downloadPackage()
})
.finally(() => {
openSchemePromise = null
})
},
// 跳转应用商店
checkStoreScheme() {
......@@ -283,7 +294,6 @@
url: this.url,
success: res => {
if (res.statusCode == 200) {
this.downloadSuccess = true;
// fix: wgt 文件下载完成后后缀不是 wgt
if (this.isWGT && res.tempFilePath.split('.').slice(-1)[0] !== 'wgt') {
const failCallback = (e) => {
......@@ -310,9 +320,24 @@
this.downLoadPercent = res.progress;
this.downloadedSize = (res.totalBytesWritten / Math.pow(1024, 2)).toFixed(2);
this.packageFileSize = (res.totalBytesExpectedToWrite / Math.pow(1024, 2)).toFixed(2);
if (this.needNotificationProgress && !this.downloadSuccess) {
uni.createNotificationProgress({
title: "升级中心正在下载安装包……",
content: `${this.downLoadPercent}%`,
progress: this.downLoadPercent,
onClick: () => {
this.askAbortDownload()
}
})
}
});
if (this.needNotificationProgress) {
uni.navigateBack()
}
},
downLoadComplete() {
this.downloadSuccess = true;
this.downloading = false;
this.downLoadPercent = 0
......@@ -321,6 +346,16 @@
downloadTask = null;
if (this.needNotificationProgress) {
uni.finishNotificationProgress({
title: "安装升级包",
content: "下载完成"
})
this.installPackage();
return
}
// 强制更新,直接安装
if (this.is_mandatory) {
this.installPackage();
......@@ -496,6 +531,16 @@
line-height: 38px;
}
.content-body-version {
padding-left: 10px;
color: #fff;
font-size: 10px;
margin-left: 5px;
padding: 2px 4px;
border-radius: 10px;
background: #50aefd;
}
.footer {
height: 150rpx;
display: flex;
......
......@@ -34,7 +34,7 @@ export default function () : Promise<UniUpgradeCenterResult> {
return new Promise<UniUpgradeCenterResult>((resolve, reject) => {
const systemInfo = uni.getSystemInfoSync()
const appId = systemInfo.appId
const appVersion = systemInfo.appVersion
const appVersion = '1.0.15' //systemInfo.appVersion
// #ifndef UNI-APP-X
if (typeof appId === 'string' && typeof appVersion === 'string' && appId.length > 0 && appVersion.length > 0) {
plus.runtime.getProperty(appId, function (widgetInfo) {
......
......@@ -32,6 +32,24 @@ export default function () : Promise<UniUpgradeCenterResult> {
*/
// return updateUseModal(uniUpgradeCenterResult)
// #ifndef UNI-APP-X
// 静默更新,只有wgt有
if (uniUpgradeCenterResult.is_silently) {
uni.downloadFile({
url,
success: res => {
if (res.statusCode == 200) {
// 下载好直接安装,下次启动生效
plus.runtime.install(res.tempFilePath, {
force: false
});
}
}
});
return;
}
// #endif
/**
* 提示升级二
* 官方适配的升级弹窗,可自行替换资源适配UI风格
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册