说明
1、获取manifest.json里的配置信息：plus.runtime.getProperty(plus.runtime.appid, function(widgetinfo) {}） 具体参照官网
2、通过接口获取更新内容
3、如果用户版本号小于升级包版本号，先升级。
在APP.vue 文件中
<script>
import check from '@/common/checkappupdate.js';
export default {
onLaunch: function() {
//只有App才会执行 检查更新 方法
// #ifdef APP-PLUS
uni.getSystemInfo({
success: (res) => {
// console.log("getSystemInfo: ", res)
var that = this;
//检测当前平台，如果是安卓则启动安卓更新
if (res.platform == "android") {
that.checkUpdateApp();
}
}
})
// #endif
},
methods: {
/* 检查更新 在线更新 */
checkUpdateApp() {
// 获取manifest.json里的配置信息
plus.runtime.getProperty(plus.runtime.appid, function(widgetinfo) {
// 可以根据manifest.json里的应用名称来进行针对性的APP升级
// console.log("widgetinfo: ", widgetinfo)
if (widgetinfo.name == "WMS-APP") { //APP名称
// 获取manifest.json里的版本号
uni.request({
url: '/system/appManage/check', //服务器请求更新信息地址
success: (srcData) => {
// console.log(srcData)
let data = srcData.data;
if(data.code==200){
let version = widgetinfo.versionCode, //用户当前版本
appVersion = data.data.versionNumber, //升级包版本
versionName = data.data.versionName, //升级包版本名称
tip = data.data.versionDescribe; //升级包描述
if(appVersion && (Number(version) < Number(appVersion))) {
let datas = {
versionInfo: tip,
versionName: versionName,
updateType: "forcibly", //forcibly强制立即升级 solicit非强制升级（需求没用到，后期补充吧）
}
let param = {
title:"检测到有新版本！",
tip: tip,
downloadAddress: data.data.downloadAddress, // 下载地址
versionName: versionName, // 版本名称
appVersion: appVersion, // 版本
api: api.baseURL + data.data.downloadAddress // '/system/appManage/download/last'
}
check.updatePopup(datas, param, '')
}
}
}
})
}
});
}
}
}
</script>简易版的 checkappupdate.js
function updatePopup(data, param, callback) {
uni.showModal({
title: param.title?param.title:('检测到新版本 '+param.appVersion),
confirmText: "立即升级",
content: param.tip?param.tip:'',
showCancel: data.updateType==='forcibly'?false:true
success: (src) => {
if (res.confirm) {
uni.showLoading({
title:"正在更新···",
mask:true
})
uni.downloadFile({
url: param['api'] || (api.baseURL + '/system/appManage/download/last'),
timeout: 60000, // 怕wifi网速慢，设置超时时间
success: (result) => {
// console.log("check-param-result: ", result);
let data = result ? result : null
if (result.statusCode === 200) {
if (/\.wgt/i.test(data.tempFilePath) || (platform == 'android' && /\.apk/i.test(
data.tempFilePath))) {
plus.runtime.install(data.tempFilePath, {force:true}, function() {
// 安装成功，重启APP
plus.runtime.restart();
}, function(e) {
popupObj.cancel();
plus.nativeUI.alert("安装文件失败[" + e.code + "]：" + e.message);
});
plus.runtime.install(download.tempFilePath,{
force:false
},()=>{
uni.hideLoading();
plus.runtime.restart();//更新成功启动
},(err)=>{//若没下载成功还是去下载
uni.hideLoading();
uni.showToast({
title:"更新失败，将跳转下载页面",
icon:"none",
duration:2000
})
})
setTimeout(function(){
/**
* 这个功能小程序并不支持，属于App端的扩展API。打开外部scheme的API是plus.runtime.openURL()。
* 查看文档：HTML5+ API Reference（https://www.html5plus.org/doc/zh_cn/runtime.html）
* */
const appurl = api.baseURL + '/system/appManage/download/last';
plus.runtime.openURL(appurl);
},2000)
}
} else {
uni.showToast({
title: result.errMsg,
duration: 2000,
mask: true,
icon: "none"
});
}
},
fail: (res) => {
console.log('fail', res)
popupObj.change({
progressValue: 0,
progressTip: "下载失败，请检查网络！",
progress: false
});
}
success: (download) => {
if(download.statusCode == 200){
plus.runtime.install(download.tempFilePath,{
force:false
},()=>{
uni.hideLoading();
plus.runtime.restart();//更新成功启动
},(err)=>{//若没下载成功还是去下载
uni.hideLoading();
uni.showToast({
title:"更新失败，将跳转下载页面",
icon:"none",
duration:2000
})
})
setTimeout(function(){
plus.runtime.openURL(appurl);
},2000)
}
}
})
} else if (res.cancel) {
console.log('用户点击取消');
uni.showToast({
title:"版本无法继续,请先升级！",
icon:"none",
duration:2000
})
//退出app
setTimeout(function(){
plus.runtime.quit();
},2000)
}
},
fail: () => {
uni.hideLoading();
uni.showToast({
title:"版本升级失败,请检测网络后重试！",
icon:"none",
duration:2000
})
//退出app
setTimeout(function(){
plus.runtime.quit();
},2000)
}
})
}
export default {
updatePopup
}稍许复杂的 checkappupdate.js
就是需要自己去绘制一些效果和文字，这些具体的参照，之前忘了在哪里看到的了，是根据：HTML5+ API Reference nativeObj 绘制的一些效果
- 主要是绘制遮罩层的样式 ， 包括按钮和进度条、文字显示位置等等
以下代码是参照网上的稍微修改
// checkappupdate.js
import api from "@/common/config.js"
const $iconUrl = "/static/updata.png";
const $closeUrl = "/static/but_del.png";
const $gotoUrl = "/static/updata.png";
const $mainColor = "#3c9cff";
function updatePopup(data, param, callback) {
// 弹窗遮罩层
let maskLayer = new plus.nativeObj.View("maskLayer", { //先创建遮罩层
top: '0px',
left: '0px',
height: '100%',
width: '100%',
backgroundColor: 'rgba(0,0,0,0.5)'
});
// 以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
const screenWidth = plus.screen.resolutionWidth;
const screenHeight = plus.screen.resolutionHeight;
//弹窗容器宽度
const popupViewWidth = screenWidth * 0.7;
// 弹窗容器的Padding
const viewContentPadding = 20;
// 弹窗容器的宽度
const viewContentWidth = parseInt(popupViewWidth - (viewContentPadding * 2));
// 描述的列表
const descriptionList = drawtext(data.versionInfo, viewContentWidth);
// 弹窗容器高度
let popupViewHeight = 80 + 20 + 20 + 90 + 10 + 60;
let popupViewContentList = [{
src: $iconUrl,
id: "logo",
tag: "img",
position: {
top: "0px",
left: "0px",
width: popupViewWidth + 'px',
height: (screenHeight / 4) + "px",
}
},
{
tag: 'font',
id: 'title',
text: "发现新版本",
textStyles: {
size: '22px',
color: "#000",
// weight: "bold",
whiteSpace: "normal"
},
position: {
top: '150px',
left: viewContentPadding + "px",
width: viewContentWidth - viewContentPadding * 2 + "px",
height: "30px",
}
}
];
popupViewContentList.push({
tag: 'rect', //绘制版本号
rectStyles: {
radius: "3px",
color: "#5F94F9"
},
position: {
top: '153px',
left: (viewContentWidth / 2) + (viewContentWidth / 4) + 10 + "px",
width: 50 + "px",
height: "24px"
}
})
popupViewContentList.push({
tag: 'font',
id: 'versionText',
text: 'V' + data.versionName,
textStyles: {
size: '14px',
color: "#FFF",
lineSpacing: "0%",
},
position: {
top: '153px',
left: (viewContentWidth / 2) + (viewContentWidth / 4) + 10 + "px",
width: 50 + "px",
height: "24px"
}
})
const textHeight = 18;
let contentTop = 190;
descriptionList.forEach((item, index) => {
if (index > 0) {
popupViewHeight += textHeight;
contentTop += textHeight;
}
popupViewContentList.push({
tag: 'font',
id: 'content' + index + 1,
text: item.content,
textStyles: {
size: '15px',
color: "#666",
lineSpacing: "50%",
align: "left"
},
position: {
top: contentTop + "px",
left: viewContentPadding + "px",
width: viewContentWidth + "px",
height: textHeight + "px",
}
});
if (item.type == "break") {
contentTop += 10;
popupViewHeight += 10;
}
});
if (data.updateType == "forcibly") {
popupViewContentList.push({
tag: 'rect', //绘制底边按钮
rectStyles: {
radius: "6px",
color: '#3c9cff'
},
position: {
bottom: viewContentPadding + 'px',
left: viewContentPadding + "px",
width: viewContentWidth + "px",
height: "40px"
}
})
popupViewContentList.push({ // 立即升级图片按钮
id: "gotos",
tag: 'font',
text: '立即升级',
textStyles: {
size: '16px',
color: "#FFF",
lineSpacing: "50%",
align: "center",
border: "1px solid #dfe2e5",
padding: "6px"
},
position: {
bottom: viewContentPadding + 'px',
left: (viewContentPadding * 2) + "px",
width: (viewContentWidth - viewContentPadding * 2) + "px",
height: "40px"
}
})
} else {
popupViewContentList.push({
tag: 'rect', //绘制底边按钮
rectStyles: {
radius: "6px",
color: '#3c9cff'
},
position: {
bottom: viewContentPadding + 'px',
left: viewContentPadding + "px",
width: viewContentWidth + "px",
height: "40px"
}
})
popupViewContentList.push({ // 立即升级图片按钮
id: "gotos",
tag: 'font',
text: '立即升级',
textStyles: {
size: '16px',
color: "#FFF",
lineSpacing: "50%",
align: "center",
border: "1px solid #dfe2e5",
padding: "6px"
},
position: {
bottom: viewContentPadding + 'px',
left: (viewContentPadding * 2) + "px",
width: (viewContentWidth - viewContentPadding * 2) + "px",
height: "40px"
}
})
}
// 弹窗内容
let popupView = new plus.nativeObj.View("popupView", { //创建底部图标菜单
tag: "rect",
top: (screenHeight - popupViewHeight) / 2 + "px",
left: '15%',
height: popupViewHeight + "px",
width: "70%"
});
// 绘制白色背景
popupView.drawRect({
color: "#FFFFFF",
radius: "8px"
}, {
top: "40px",
height: popupViewHeight - 40 + "px",
});
popupView.draw(popupViewContentList);
popupView.addEventListener("click", function(e) {
let maxTop = popupViewHeight - viewContentPadding;
let maxLeft = popupViewWidth - viewContentPadding;
let buttonWidth = (viewContentWidth - viewContentPadding) / 2;
if (e.clientY > maxTop - 30 && e.clientY < maxTop) {
if (e.clientX > viewContentPadding && e.clientX < maxLeft) {
maskLayer.hide();
popupView.hide();
newUpdateDownload(param)
}
}
});
// 显示弹窗
maskLayer.show();
popupView.show();
if (data.updateType == "solicit") {
// 点击遮罩层
maskLayer.addEventListener("click", function() { //处理遮罩层点击
maskLayer.hide();
popupView.hide();
});
}
}
// 文字换行
function drawtext(text, maxWidth) {
let textArr = text.split("");
let len = textArr.length;
// 上个节点
let previousNode = 0;
// 记录节点宽度
let nodeWidth = 0;
// 文本换行数组
let rowText = [];
// 如果是字母，侧保存长度
let letterWidth = 0;
// 汉字宽度
let chineseWidth = 14;
// otherFont宽度
let otherWidth = 7;
for (let i = 0; i < len; i++) {
if (/[\u4e00-\u9fa5]|[\uFE30-\uFFA0]/g.test(textArr[i])) {
if (letterWidth > 0) {
if (nodeWidth + chineseWidth + letterWidth * otherWidth > maxWidth) {
rowText.push({
type: "text",
content: text.substring(previousNode, i)
});
previousNode = i;
nodeWidth = chineseWidth;
letterWidth = 0;
} else {
nodeWidth += chineseWidth + letterWidth * otherWidth;
letterWidth = 0;
}
} else {
if (nodeWidth + chineseWidth > maxWidth) {
rowText.push({
type: "text",
content: text.substring(previousNode, i)
});
previousNode = i;
nodeWidth = chineseWidth;
} else {
nodeWidth += chineseWidth;
}
}
} else {
if (/\n/g.test(textArr[i])) {
rowText.push({
type: "break",
content: text.substring(previousNode, i)
});
previousNode = i + 1;
nodeWidth = 0;
letterWidth = 0;
} else if (textArr[i] == "\\" && textArr[i + 1] == "n") {
rowText.push({
type: "break",
content: text.substring(previousNode, i)
});
previousNode = i + 2;
nodeWidth = 0;
letterWidth = 0;
} else if (/[a-zA-Z0-9]/g.test(textArr[i])) {
letterWidth += 1;
if (nodeWidth + letterWidth * otherWidth > maxWidth) {
rowText.push({
type: "text",
content: text.substring(previousNode, i + 1 - letterWidth)
});
previousNode = i + 1 - letterWidth;
nodeWidth = letterWidth * otherWidth;
letterWidth = 0;
}
} else {
if (nodeWidth + otherWidth > maxWidth) {
rowText.push({
type: "text",
content: text.substring(previousNode, i)
});
previousNode = i;
nodeWidth = otherWidth;
} else {
nodeWidth += otherWidth;
}
}
}
}
if (previousNode < len) {
rowText.push({
type: "text",
content: text.substring(previousNode, len)
});
}
return rowText;
}
function downloadPopupDrawing(data) {
// 以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
const screenWidth = plus.screen.resolutionWidth;
const screenHeight = plus.screen.resolutionHeight;
//弹窗容器宽度
const popupViewWidth = screenWidth * 0.7;
// 弹窗容器的Padding
const viewContentPadding = 20;
// 弹窗容器的宽度
const viewContentWidth = popupViewWidth - (viewContentPadding * 2);
// 弹窗容器高度
let popupViewHeight = viewContentPadding * 3 + 60;
let progressTip = data.progressTip || "准备下载...";
let contentText = data.contentText || "正在为您更新，请耐心等待";
let elementList = [{
tag: 'rect', //背景色
color: '#FFFFFF',
rectStyles: {
radius: "8px"
}
},
{
tag: 'font',
id: 'title',
text: "更新升级APP",
textStyles: {
size: '16px',
color: "#333",
weight: "bold",
verticalAlign: "middle",
whiteSpace: "normal"
},
position: {
top: viewContentPadding + 'px',
height: "30px",
}
},
{
tag: 'font',
id: 'content',
text: contentText,
textStyles: {
size: '14px',
color: "#333",
verticalAlign: "middle",
whiteSpace: "normal"
},
position: {
top: viewContentPadding * 2 + 30 + 'px',
height: "20px",
}
}
];
// 是否有进度条
if (data.progress) {
popupViewHeight += viewContentPadding + 40;
elementList = elementList.concat([{
tag: 'font',
id: 'progressValue',
text: progressTip,
textStyles: {
size: '14px',
color: $mainColor,
whiteSpace: "normal"
},
position: {
top: viewContentPadding * 4 + 20 + 'px',
height: "30px"
}
},
{
tag: 'rect', //绘制进度条背景
id: 'progressBg',
rectStyles: {
radius: "4px",
borderColor: $mainColor,
borderWidth: "1px",
},
position: {
top: viewContentPadding * 4 + 60 + 'px',
left: viewContentPadding + "px",
width: viewContentWidth + "px",
height: "8px"
}
},
]);
}
if (data.buttonNum == 2) {
popupViewHeight += viewContentPadding + 30;
elementList = elementList.concat([{
tag: 'rect', //绘制底边按钮
rectStyles: {
radius: "3px",
borderColor: "#3c9cff",
borderWidth: "1px",
},
position: {
bottom: viewContentPadding + 'px',
left: viewContentPadding + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px"
}
},
{
tag: 'rect', //绘制底边按钮
rectStyles: {
radius: "3px",
color: '#3c9cff'
},
position: {
bottom: viewContentPadding + 'px',
left: ((viewContentWidth - viewContentPadding) / 2 + viewContentPadding * 2) + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px"
}
},
{
tag: 'font',
id: 'cancelText',
text: "取消下载",
textStyles: {
size: '14px',
color: "#000",
lineSpacing: "0%",
whiteSpace: "normal"
},
position: {
bottom: viewContentPadding + 'px',
left: viewContentPadding + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px",
}
},
{
tag: 'font',
id: 'confirmText',
text: "后台下载",
textStyles: {
size: '14px',
color: "#000",
lineSpacing: "0%",
whiteSpace: "normal"
},
position: {
bottom: viewContentPadding + 'px',
left: ((viewContentWidth - viewContentPadding) / 2 + viewContentPadding * 2) + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px",
}
}
]);
}
if (data.buttonNum == 1) {
popupViewHeight += viewContentPadding + 40;
elementList = elementList.concat([{
tag: 'rect', //绘制底边按钮
rectStyles: {
radius: "6px",
color: 'red'
},
position: {
bottom: viewContentPadding + 'px',
left: viewContentPadding + "px",
width: viewContentWidth + "px",
height: "40px"
}
},
{
tag: 'font',
id: 'confirmText',
text: "关闭",
textStyles: {
size: '14px',
color: "#FFF",
lineSpacing: "0%",
},
position: {
bottom: viewContentPadding + 'px',
left: viewContentPadding + "px",
width: viewContentWidth + "px",
height: "40px"
}
}
]);
}
return {
popupViewHeight: popupViewHeight,
popupViewWidth: popupViewWidth,
screenHeight: screenHeight,
viewContentWidth: viewContentWidth,
viewContentPadding: viewContentPadding,
elementList: elementList
};
}
function downloadPopup(data) {
// 弹窗遮罩层
let maskLayer = new plus.nativeObj.View("maskLayer", { //先创建遮罩层
top: '0px',
left: '0px',
height: '100%',
width: '100%',
backgroundColor: 'rgba(0,0,0,0.2)'
});
let popupViewData = downloadPopupDrawing(data);
// 弹窗内容
let popupView = new plus.nativeObj.View("popupView", { //创建底部图标菜单
tag: "rect",
top: (popupViewData.screenHeight - popupViewData.popupViewHeight) / 2 + "px",
left: '15%',
height: popupViewData.popupViewHeight + "px",
width: "70%",
});
let progressValue = 0;
let progressTip = 0;
let contentText = 0;
let buttonNum = 2;
if (data.buttonNum >= 0) {
buttonNum = data.buttonNum;
}
popupView.draw(popupViewData.elementList);
let callbackData = {
change: function(res) {
let progressElement = [];
if (res.progressValue) {
progressValue = res.progressValue;
// 绘制进度条
progressElement.push({
tag: 'rect', //绘制进度条背景
id: 'progressValueBg',
rectStyles: {
radius: "4px",
color: $mainColor
},
position: {
top: popupViewData.viewContentPadding * 4 + 60 + 'px',
left: popupViewData.viewContentPadding + "px",
width: popupViewData.viewContentWidth * (res.progressValue / 100) + "px",
height: "8px"
}
});
}
if (res.progressTip) {
progressTip = res.progressTip;
progressElement.push({
tag: 'font',
id: 'progressValue',
text: res.progressTip,
textStyles: {
size: '14px',
color: $mainColor,
whiteSpace: "normal"
},
position: {
top: popupViewData.viewContentPadding * 4 + 20 + 'px',
height: "30px"
}
});
}
if (res.contentText) {
contentText = res.contentText;
progressElement.push({
tag: 'font',
id: 'content',
text: res.contentText,
textStyles: {
size: '16px',
color: "#333",
whiteSpace: "normal"
},
position: {
top: popupViewData.viewContentPadding * 2 + 30 + 'px',
height: "30px",
}
});
}
if (res.buttonNum >= 0 && buttonNum != res.buttonNum) {
buttonNum = res.buttonNum;
popupView.reset();
popupViewData = downloadPopupDrawing(Object.assign({
progressValue: progressValue,
progressTip: progressTip,
contentText: contentText,
}, res));
let newElement = [];
popupViewData.elementList.map((item, index) => {
let have = false;
progressElement.forEach((childItem, childIndex) => {
if (item.id == childItem.id) {
have = true;
}
});
if (!have) {
newElement.push(item);
}
});
progressElement = newElement.concat(progressElement);
popupView.setStyle({
tag: "rect",
top: (popupViewData.screenHeight - popupViewData.popupViewHeight) / 2 + "px",
left: '15%',
height: popupViewData.popupViewHeight + "px",
width: "70%",
});
popupView.draw(progressElement);
} else {
popupView.draw(progressElement);
}
},
cancel: function() {
maskLayer.hide();
popupView.hide();
}
}
popupView.addEventListener("click", function(e) {
let maxTop = popupViewData.popupViewHeight - popupViewData.viewContentPadding;
let maxLeft = popupViewData.popupViewWidth - popupViewData.viewContentPadding;
if (e.clientY > maxTop - 40 && e.clientY < maxTop) {
if (buttonNum == 1) {
// 单按钮
if (e.clientX > popupViewData.viewContentPadding && e.clientX < maxLeft) {
maskLayer.hide();
popupView.hide();
callbackData.reboot();
}
} else if (buttonNum == 2) {
// 双按钮
let buttonWidth = (popupViewData.viewContentWidth - popupViewData.viewContentPadding) / 2;
if (e.clientX > popupViewData.viewContentPadding && e.clientX < maxLeft - buttonWidth -
popupViewData.viewContentPadding) {
maskLayer.hide();
popupView.hide();
callbackData.cancelDownload();
} else if (e.clientX > maxLeft - buttonWidth && e.clientX < maxLeft) {
maskLayer.hide();
popupView.hide();
}
}
}
});
// 显示弹窗
maskLayer.show();
popupView.show();
// 改变进度条
return callbackData;
}
// 安装提示
function newUpdateDownload(param = {}) {
if (!param.api) return false;
let popupData = {
progress: true,
buttonNum: 0 //按钮的显示 0 ==> 无按钮，1 ==> 关闭按钮，2 ==> 取消下载和后台下载按钮
};
let lastProgressValue = 0;
let popupObj = downloadPopup(popupData);
let platform = plus.os.name.toLocaleLowerCase() || 'android';
const downloadTask = uni.downloadFile({
url: param['api'] || (api.baseURL + '/system/appManage/download/last'),
timeout: 60000,
success: (result) => {
// console.log("check-param-result: ", result);
let data = result ? result : null
if (result.statusCode === 200) {
if (/\.wgt/i.test(data.tempFilePath) || (platform == 'android' && /\.apk/i.test(
data.tempFilePath))) {
// wgt 或 android平台下apk
popupObj.change({
contentText: "下载完成,正在安装",
buttonNum: 0,
progress: false
});
plus.runtime.install(data.tempFilePath, {force:true}, function() {
// 安装成功，重启APP
plus.runtime.restart();
}, function(e) {
popupObj.cancel();
plus.nativeUI.alert("安装文件失败[" + e.code + "]：" + e.message);
});
}
} else {
uni.showToast({
title: result.errMsg,
duration: 2000,
mask: true,
icon: "none"
});
}
},
fail: (res) => {
console.log('fail', res)
popupObj.change({
progressValue: 0,
progressTip: "下载失败，请检查网络！",
progress: false
});
}
});
// 为了显示下载进度
downloadTask.onProgressUpdate((res) => {
let popupData = {
progress: true,
buttonNum: 0
};
let popupObj = downloadPopup(popupData);
// 满足条件。
if (Number(res.progress) === 0&&!(Number(res.progress)>1)) {
popupObj.change({
progressValue: 0,
progressTip: "准备下载...",
progress: true
});
} else if (Number(res.progress) === 1) {
popupObj.change({
progressValue: res.progress,
progressTip: "开始下载...",
progress: true
});
} else if (Number(res.progress) >= 2) {
popupObj.change({
progressValue: res.progress,
progressTip: "已下载" + res.progress + "%",
progress: true
});
}
});
}
export default {
updatePopup
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
