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>

2.父组件引用
app-puls判断是不是手机上
<!-- #ifdef APP-PLUS -->
<upgrade-popup
:app-upgeade-obj="appUpgeadeObj"
v-if="appUpgeadeObj.upFlag == 'TRUE'"
/>
<!-- #endif -->
 
posted @   小猴子会上树  阅读(417)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
点击右上角即可分享
微信分享提示