uniApp热更新问题
1. 新建一个组件vue文件
<template>
<view>
<!-- 遮罩滚动锁定组件 -->
<page-meta :page-style="'overflow:'+(popupShow?'hidden':'visible')"></page-meta>
<uni-popup
ref="upgradePopup"
background-color="#fff"
class="upgradePopup"
@change="upgradePopupChange"
:mask-click="false"
>
<view class="rocket-content">
</view>
<view class="margin-top">
</view>
<view class="update-content">
<text space="nbsp">{{appUpgeadeObj.content}}</text>
</view>
<view
v-if="updateButtonBoolean"
class="update-button">
<button
class="not-updated-button"
v-if="appUpgeadeObj.upType == 'MANUAL'"
:disabled="noUpdatedDisabled"
@tap.stop="noUpdate">暂不更新</button>
<button
class="updated-button"
@tap.stop="upgradeNow">立即升级</button>
</view>
<!-- v-if="progressBolean" -->
<!-- {{progressBolean}} -->
<view
v-if="progressBolean"
class="progress-bar"
>
<progress
border-radius="90"
font-size="24"
activeColor="#006BFE"
backgroundColor="#f0f0f0"
show-info
:percent="progressData.percent" stroke-width="15" />
</view>
</uni-popup>
</view>
</template>
<script>
export default {
props: {
appUpgeadeObj: {
type: Object,
default: ()=> {
return {}
}
}
},
components: {
},
data() {
return {
popupShow: false,
updateButtonBoolean: true, // 按钮的显示和隐藏
// 进度条数据
progressData: {
percent: 0, //百分比
},
progressBolean:false, // 进度条的显示和隐藏
noUpdatedDisabled: false,
viewBottom: null // 创建原生View控件
};
},
computed: {
},
watch: {
'progressData.percent': {
handler (newdata) {
if(newdata){
this.progressBolean = true
this.updateButtonBoolean = false
}
if(newdata == 100){
this.noUpdatedDisabled = false
}
},
immediate: true,
},
},
methods: {
// 升级弹窗的change事件
upgradePopupChange(e){
this.popupShow = e.show
if(!e.show){
this.viewBottom.hide();
}
},
// 暂不更新按钮事件
noUpdate(){
this.$refs.upgradePopup.close()
},
// 立即升级事件
upgradeNow(){
console.log('立即升级', this.appUpgeadeObj)
this.noUpdatedDisabled = true
let that = this
plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
console.log(wgtinfo)
// 旧时光 21:18:17
// res.data.data.appVersionNo: 版本号
// updataUrl: 下载地址
// if (res.data.data.appVersionNo > parseInt(wgtinfo.versionCode)) {
var downloadTask = uni.downloadFile({
url: that.appUpgeadeObj.upUrl,
success: (downloadResult) => {
// console.log('2222', downloadResult)
if (downloadResult.statusCode === 200) {
plus.runtime.install(downloadResult
.tempFilePath, {
force: true
},
function() {
plus.cache.clear();
plus.runtime.restart();
},
function(e) {
});
}
},
});
// console.log('1111', downloadTask)
downloadTask.onProgressUpdate((res) => {
this.progressData.percent = res.progress
});
// }
})
}
},
beforeCreate () {
},
created() {
// 原生控件对象可用于在屏幕上绘制图片或文本内容 参考地址 https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View
const res = uni.getSystemInfoSync();
const nav = uni.getWindowInfo();
// 下蒙版
this.viewBottom = new plus.nativeObj.View('maskBott', {
bottom: '0px',
left: '0px',
height: `80px`,
width: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.2)'
});
this.viewBottom.show();
},
beforeMount () {
},
mounted() {
console.log('服了')
this.$refs.upgradePopup.open('center')
},
beforeUpdate () {
},
updated () {
},
beforeDestroy () {
},
destroyed () {
},
activated () {
},
deactivated () {
},
};
</script>
<style scoped lang="scss">
.upgradePopup{
z-index: 999;
/deep/.uni-popup__wrapper{
width: 602rpx;
border-radius: 15rpx;
position: relative;
display: flex;
flex-direction: column;
.rocket-content{
width: 100%;
height: 100%;
background-image: url('~@/static/imgs/home/upgradeBackground.png');
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: -162rpx;
}
.margin-top{
height: 380rpx;
}
.update-content{
margin-top: 44rpx;
padding-left: 100rpx;
display: flex;
flex-direction: column;
z-index: 99;
uni-text{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #989899;
margin-bottom: 8rpx;
}
}
.update-button{
display: flex;
width: 482rpx;
margin: 0 auto;
margin-top: 48rpx;
uni-button{
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin: 0rpx;
flex: 1;
height: 80rpx;
margin-bottom: 80rpx;
}
.not-updated-button{
margin-right: 40rpx;
background-color: $my-color-white;
color: $my-color-blue;
&:after{
border: 4rpx solid $my-color-blue;
}
}
.updated-button{
background-color: $my-color-blue;
color: $my-color-white;
}
}
.progress-bar{
width: 538rpx;
margin: 0 auto;
margin-top: 96rpx;
margin-bottom: 102rpx;
uni-progress{
.uni-progress-bar{
border-radius: 50rpx;
.uni-progress-inner-bar{
border-radius: 50rpx;
}
}
}
}
}
}
</style>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求