右击cloudfunctions文件夹，新建一个云函数getVersionUpate
云函数代码主要获取数据表的apkUrl字段和new_version字段
'use strict';
let db = uniCloud.database();
exports.main = async (event, context) => {
return await db.collection("updateApp").get();
};创建components文件夹，新建一个组件（热更新界面）
在page.json中注册一下组件
热更新界面图：
template里面组件布局：
<template>
<view class="main">
<view class="upgrade_popup_box">
<image class="header_background" src="/static/img/upgrade_bg_two.png" mode="aspectFit"></image>
<view class="main_content_box">
<view class="find_version_text">发现新版本{{ new_version }}</view>
<view class="upadate_content_text">
具体更新内容
</view>
<!-- 详细更新内容 -->
<view class="content_text" v-html="content"></view>
<!-- （1）点击立即更新downLoad为DownlaodStatus为false,隐藏立即更新按钮-->
<button hover-class="btn_hover" @click="click_btn_update" v-if="show_update_btn === true">
立即更新
</button>
<!-- 按钮隐藏后显示进度条和文字盒子-->
<view class="progress_box" v-else>
<!-- 正在下载中 0%文字 -->
<view class="downLoadText">{{ downLoadText }}{{ progress }}%</view>
<!-- 核心进度条-->
<view class="progress" :style="setwidth"></view>
<!-- -->
</view>
</view>
</view>
</view>
</template>热更新界面css布局样式如下：
<style lang="scss" scoped>
page {
background-color: transparent;
}
.btn_hover {
opacity: 0.1;
}
// 层级最底层
.main {
position: absolute;
width: 100vw;
height: 90vh;
background-color: transparent;
z-index: 1;
// 渐变色弹窗背景--倒数第二层
.upgrade_popup_box {
position: absolute;
top: 25%;
right: 10%;
width: 80vw;
height: 55vh;
box-shadow: 0 0 25px 12px rgba(146, 255, 235, 0.9);
background: linear-gradient(30deg, #84ffe9, #ffff7f);
border-radius: 10px;
z-index: 2;
// 第二层和渐变色背景同一层
.header_background {
position: absolute;
z-index: -1;
left: -5%;
top: -30%;
transform: rotate(3deg);
}
// 所有文字盒子+进度条盒子--倒数第三层
.main_content_box {
width: 80vw;
height: 55vh;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
// 发现新版本---倒数第四层
.find_version_text {
font-size: 30px;
font-family: my_font_bold;
// 颜色阴影
color: #84ffe9;
text-shadow: 2px 3px 6px #000000;
//布局样式
z-index: 4;
text-align: center;
}
// 更新内容标题----倒数第四层
.upadate_content_text {
font-size: 20px;
color: #55ffff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
z-index: 4;
font-family: my_font_bold;
text-align: center;
margin: 10px 0;
}
// 更新内容--倒数第四层
.content_text {
//字体样式
font-family: my_font_light;
font-size: 15px;
//文字盒子宽高
width: 70vw;
height: 19vh;
//颜色阴影
color: #00557f;
box-shadow: 0 0 20px 9px rgba(0, 0, 0, 0.2);
//文字布局
text-align: left;
line-height: 4vh;
padding: 5px;
border-radius: 10px;
z-index: 4;
}
// 点击立即更新按
button {
//布局
font-family: my_font_bold;
border: none;
width: 70vw;
height: 7vh;
line-height: 7vh;
z-index: 4;
margin: 20px 0;
font-size: 15px;
//颜色阴影
background: linear-gradient(to right, #ffff7f, #00ffff);
box-shadow: 0 0 20px 9px rgba(0, 0, 0, 0.2);
color: #586eff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
// 进度条盒子
.progress_box {
height: 7vh;
border-radius: 10px;
background: linear-gradient(30deg, #ffaaff, #aaffff);
box-shadow: 0 0px 20px lightslategray;
width: 70vw;
margin: 20px 0;
z-index: 5;
position: relative;
// 显示进度条
.progress {
position: absolute;
width: 100%;
height: 100%;
top: 0;
background: linear-gradient(to right, #ffaaff, #ffff7f, #00ffff);
border-radius: 10px 0px 0px 10px;
box-shadow: 0 0px 10px 5px #55ffff, 0 0px 20px 10px #aaffff;
z-index: 6;
}
//进度条文字样式
.downLoadText {
//颜色阴影字体
font-family: my_font_bold;
//布局
position: absolute;
z-index: 7;
width: 70vw;
line-height: 7vh;
text-align: center;
font-size: 15px;
color: #8b00d0;
text-shadow: 0 1px 4px #00ffff;
}
}
}
}
}
</style>这部分代码主要是下载安装包、安装apk,实时更新进度条
<script>
export default {
name: "upgrade",
//定义自定义组件的属性
props: {
appInfo: {
content: {
default: ""
},
new_version: {
default: ""
},
apkUrl: {
default: ""
}
}
},
data() {
return {
content: null,
show_update_btn: true,
new_version: null,
apkUrl: null,
progress: 0,
audioObj: {}
};
},
//定义需要index.vue传入的对象
// 实时更新进度条和文字状态
computed: {
// 实时计算更新进度条
setwidth() {
return {
// 进度条总宽度100%
width: this.progress + "%"
};
},
downLoadText() {
if (this.progress === 0) {
return "开始下载";
} else if (this.progress <= 20) {
return "正在下载中";
} else if (this.progress <= 50) {
return "努力下载中";
} else if (this.progress <= 80) {
return "最后冲刺下载";
} else if (this.progress <= 90) {
return "加速下载";
} else if (this.progress === 100) {
this.audioObj.stop();
return "下载完毕";
} else {
return "加速下载中"
}
},
},
//取出index.vue父组件传递的对象
mounted() {
if (this.appInfo !== undefined && this.appInfo.content !== null && this.appInfo.new_version !== null && this.appInfo.apkUrl !== null) {
this.content = this.appInfo.content;
this.new_version = this.appInfo.new_version;
this.apkUrl = this.appInfo.apkUrl;
console.log("拿到了index传入的数据" + this.content + this.new_version + this.apkUrl);
uni.showToast({
title: "拿到更新数据",
icon: "none"
});
} else {
console.log("没有拿到数据", typeof this.appInfo);
uni.showToast({
title: "缺少数据无法更新！",
icon: "error"
});
};
},
methods: {
// 点击立即更新后隐藏掉，然后播放背景音乐，检查apk地址是否有效
click_btn_update() {
//如果不需要播放音乐请移除
let audioObj = uni.createInnerAudioContext();
audioObj.autoplay = true;
audioObj.src = "/static/music/1.mp3";
audioObj.onPlay(() => {
console.log("开始播放");
});
audioObj.onError(err => {
console.log(err)
});
this.audioObj = audioObj;//存储这个对象，当进度条100时停止音乐
//播放音乐代码结束
// 如果apk安装包真实存在
if (this.apkUrl) {
uni.showToast({
title: "检测到apk安装包！",
icon: "success",
});
//不显示立即更新按钮，显示进度条
this.show_update_btn = false;
//
let downloadTask = uni.downloadFile({
url: this.apkUrl,
success: (res) => {
if (res.statusCode === 200) {
console.log("下载安装包成功啦！");
uni.showToast({
title: "下载安装包成功啦！",
icon: "success",
duration: 500
});
uni.showToast({
title: "开始安装apk",
icon: "none",
duration: 500
});
//开始安装apk
plus.runtime.install(res.tempFilePath, {
force: true
}, (res) => {
console.log("安装成功", res);
uni.showToast({
title: "安装apk成功",
duration: 2000,
icon: "success"
});
}, (err) => {
console.log("安装失败！", err);
uni.showToast({
title: "警告！安装失败了！",
icon: "error",
duration: 2000
});
});
} else {
console.log("下载安装包失败！");
uni.showToast({
title: "下载安装包失败！",
duration: 2000,
});
}
},
});
//监听下载进度
downloadTask.onProgressUpdate(res => {
//返回百分比，比如1代表1%
this.progress = res.progress;
});
//
} else {
console.log("apk安装包为空！");
uni.showToast({
title: "apk安装包为空！",
icon: "error",
duration: 2000
});
}
},
},
};
</script>static存放热更新图片，没有的话也行，要在upgrade.vue找到image组件并删除掉
在需要检查更新的界面使用我们定义好的热更新组件upgrade.vue
<template>
<view class="content">
<!--使用自定义的热更新组件，并传递对象 当云函数获取数据成功后再显示该组件 -->
<upgrade v-if="showUpdate" :appInfo="appInfo"></upgrade>
<view>当前版本号：{{old_version}}</view>
<button @click="checkUpdate" type="primary">检查更新</button>
</view>
</template>index.vue首页这部分代码主要是调用云函数，获取数据表的url和newVersioni字段，最后进行比对版本。传递给upgrade.vue界面热更新的apk地址， 新版本号，热更新内容
<script>
export default {
data() {
return {
//要传递给自定义组件的对象
appInfo: {
new_version: null, //新的版本号，从云函数里获取
content: null, //app更新的内容
apkUrl: null, //apk的下载链接
},
old_version: null, //旧的版本号，通过uni.getAppBaseInfo()获得
showUpdate: false//默认不调用更新组件，有新版本时再调用
}
},
//当前版本号，展示给用户
onLoad() {
this.old_version = uni.getAppBaseInfo().appVersion;
},
//检查更新的函数
methods: {
checkUpdate() {
uni.showToast({
title: "正在检查更新···",
icon: "loading",
duration: 2000
});
//热更新-点击检查更新后调用云函数才能获取最新版本
uniCloud.callFunction({
name: "getUpdateData",
success: (res) => {
if (this.old_version < res.result.data[0].new_version) {
console.log("需要更新");
this.showLeftBottomFab = false;
this.showRightFab = false;
uni.showToast({
title: "需要更新",
icon: "none"
});
this.appInfo.new_version = res.result.data[0].new_version;
this.appInfo.content = res.result.data[0].content;
this.appInfo.apkUrl = res.result.data[0].apkUrl;
this.showUpdate = true;
} else {
console.log("无需更新");
uni.showToast({
title: "无需更新！",
icon: "none"
})
}
}
});
}
//checkUpdate()函数结束
}
}
</script>点击检查更新按钮，弹出升级界面
到这里就完美实现了热更新功能
补充1：不要将apk上传到支付宝云（腾讯云我没测试过），因为进度条的值为infinity
补充（2）：更新app很耗费CDN流量，白嫖党建议半个月更新一次app.
扫一扫
3708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
