1 、创建AppUpdate.js 复制下面代码 可修改
2 直接在app内引入
import AppUpdate from "./utils/AppUpdate.js"
3.在onLaunch里面使用
onLaunch() {
AppUpdate()
}
const $iconUrl = "static/app/APPlogo.png"; //弹出顶部更新图
const $closeUrl = "static/app/closeUrl.png"; //右上角按钮
// 此处请求后端是不是要更新
import { info } from "@/api/user";
const $mainColor = "#FF5B78";
//安卓apk下载链接
const downloadurl_sign = "";
//比较版本号
let updateTypeUn = ""; //forcibly强制立即升级 solicit非强制升级
function compareVersions(version1, version2) {
const v1Parts = version1.split(".").map(Number);
const v2Parts = version2.split(".").map(Number);
for (let i = 0; i < Math.max(v1Parts.length, v2Parts.length); i++) {
const v1 = v1Parts[i] || 0;
const v2 = v2Parts[i] || 0;
if (v1 < v2) return -1;
if (v1 > v2) return 1;
}
return 0;
}
// 强制更新
export default function AppUpdate() {
const appleId = 111111; //苹果商店id number
//1. 获取当前版本号
let curversion = "";
plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
let platform = plus.os.name.toLocaleLowerCase();
curversion = widgetInfo.version;
//此处示例请求后端
info({ code: "forceUpdateVersion" }).then((result) => {
if (result.code == 200) {
console.log(curversion, result.data.value);
if (compareVersions(curversion, result.data.value) == -1) {
// 当前版本小于服务器版本
if (
/\.wgt/i.test(downloadurl_sign) ||
(platform == "android" && /\.apk/i.test(downloadurl_sign))
) {
// 如果是热更新 wgt 或 android平台下apk
let datas = {
versionInfo:
"亲爱的用户,为了提供更好的使用体验与功能改进,我们进行了系统升级。请立即完成强制升级,否则将无法正常使用APP。感谢您的配合与支持!",
versionName: result.data.value,
updateType: "forcibly", //forcibly强制立即升级 solicit非强制升级
downloadurl_sign: downloadurl_sign,
};
updatePopup(datas, "");
return;
}
if (platform == "ios") {
plus.runtime.launchApplication(
{
action: `itms-apps://itunes.apple.com/cn/app/id${appleId}?mt=8`,
},
function (e) {
console.log("Open system default browser failed: " + e.message);
}
);
return;
}
}
}
});
});
}
// 手动跟新
export function Manualdownload(versionName) {
updateTypeUn = "solicit";
const appleId = 1111111; //苹果商店id number
let platform = plus.os.name.toLocaleLowerCase();
if (
/\.wgt/i.test(downloadurl_sign) ||
(platform == "android" && /\.apk/i.test(downloadurl_sign))
) {
// 如果是热更新 wgt 或 android平台下apk
let datas = {
versionInfo:
"亲爱的用户,为了提供更好的使用体验与功能改进,我们进行了系统升级。请立即完成强制升级,否则将无法正常使用APP。感谢您的配合与支持!",
versionName: versionName,
updateType: "solicit", //forcibly强制立即升级 solicit非强制升级
downloadurl_sign: downloadurl_sign,
};
updatePopup(datas, "");
return;
}
if (platform == "ios") {
plus.runtime.launchApplication(
{
action: `itms-apps://itunes.apple.com/cn/app/id${appleId}?mt=8`,
},
function (e) {
console.log("Open system default browser failed: " + e.message);
}
);
return;
}
}
function updatePopup(data, 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 + 80;
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: "#ff5300",
// weight: "bold",
whiteSpace: "normal",
},
position: {
top: "200px",
left: viewContentPadding + "px",
width: viewContentWidth - viewContentPadding * 2 + "px",
height: "30px",
},
},
];
popupViewContentList.push({
tag: "rect", //绘制版本号
rectStyles: {
radius: "3px",
color: "#ff5300",
},
position: {
top: "210px",
left: viewContentWidth / 2 + viewContentWidth / 4 + 10 + "px",
width: 50 + "px",
height: "15px",
},
});
popupViewContentList.push({
tag: "font",
id: "versionText",
text: "V" + data.versionName,
textStyles: {
size: "14px",
color: "#fff",
lineSpacing: "0%",
},
position: {
top: "210px",
left: viewContentWidth / 2 + viewContentWidth / 4 + 10 + "px",
width: 50 + "px",
height: "15px",
},
});
const textHeight = 18;
let contentTop = 240;
descriptionList.forEach((item, index) => {
if (index > 0) {
popupViewHeight += textHeight;
contentTop += textHeight;
}
popupViewContentList.push({
tag: "font",
id: "content" + index + 1,
text: item.content,
textStyles: {
size: "13px",
color: "#666",
lineSpacing: "50%",
align: "let",
},
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: "#ff5300",
},
position: {
bottom: viewContentPadding + "px",
left: viewContentPadding * 2 + "px",
width: viewContentWidth - viewContentPadding * 2 + "px",
height: "40px",
},
},
{
tag: "font",
id: "confirmText",
text: "立即升级",
textStyles: {
size: "14px",
color: "#FFF",
lineSpacing: "0%",
},
position: {
bottom: viewContentPadding + "px",
left: viewContentPadding * 2 + "px",
width: viewContentWidth - viewContentPadding * 2 + "px",
height: "40px",
},
}
);
} else {
popupViewContentList.push(
{
tag: "rect", //绘制底边按钮
rectStyles: {
radius: "6px",
color: "#ff5300",
},
position: {
bottom: viewContentPadding + "px",
left: viewContentPadding * 2 + "px",
width: viewContentWidth - viewContentPadding * 2 + "px",
height: "40px",
},
},
{
tag: "font",
id: "confirmText",
text: "立即升级",
textStyles: {
size: "14px",
color: "#FFF",
lineSpacing: "0%",
},
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);
// 绘制关闭按钮
const errViewWidth = screenWidth * 0.8;
let errViewHeight = 80 + 20 + 20 + 90 + 10 + 60;
let errTop = (screenHeight - errViewHeight) / 3.3 + "px";
let errView = new plus.nativeObj.View(
"errView",
{ top: errTop, left: errViewWidth, height: "50px", width: "100%" },
[
{
// tag: 'font',
// id: 'ClostText',
// text: "关闭",
tag: "img",
id: "img",
src: $closeUrl,
position: { top: "0px", left: "0px", width: "50px", height: "50px" },
},
]
);
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();
errView.hide();
console.log("立即升级", data);
newUpdateDownload(data);
}
}
});
errView.addEventListener("click", function () {
//处理点击关闭按钮点击
maskLayer.hide();
popupView.hide();
errView.hide();
});
// 显示弹窗
maskLayer.show();
popupView.show();
if (data.updateType == "solicit") {
// 点击遮罩层
maskLayer.addEventListener("click", function () {
//处理遮罩层点击
maskLayer.hide();
popupView.hide();
errView.hide();
plus.key.removeEventListener("backbutton", backbuttonHandler);
});
const backbuttonHandler = function () {
maskLayer.hide();
popupView.hide();
errView.hide();
// 如果需要,可以在这里调用回调函数或其他清理操作
if (callback) {
callback();
}
};
// 监听返回键事件
plus.key.addEventListener("backbutton", backbuttonHandler, false);
} else {
errView.hide();
}
return {
maskLayer,
popupView,
destroy: function () {
plus.key.removeEventListener("backbutton", backbuttonHandler);
},
};
}
// 文字换行
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: "#f1f1f1",
borderWidth: "1px",
},
position: {
bottom: viewContentPadding + "px",
left: viewContentPadding + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px",
},
},
{
tag: "rect", //绘制底边按钮
rectStyles: {
radius: "3px",
color: "#ff5300",
},
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: "#666",
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: "#FFF",
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: "#ff5300",
},
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,
};
}
export function downloadPopup(data) {
// 弹窗遮罩层
let maskLayer = new plus.nativeObj.View("maskLayer", {
//先创建遮罩层
top: "0px",
left: "0px",
height: "100%",
width: "100%",
backgroundColor: "rgba(0,0,0,0.5)",
});
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();
},
backButtonHandlernext: null,
destroy: function () {
console.log("监听返回键事件销毁");
plus.key.removeEventListener("backbutton", callbackData.backButtonHandlernext);
},
};
// 定义事件处理函数
callbackData.backButtonHandlernext = function () {
maskLayer.hide();
popupView.hide();
// 如果需要,可以在这里调用回调函数或其他清理操作
callbackData.cancelDownload();
popupObj.cancel();
callbackData.destroy(); // 返回键关闭弹窗时移除返回键事件监听器
};
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();
}
}
callbackData.destroy();
}
});
// 显示弹窗
maskLayer.show();
popupView.show();
// 改变进度条
if (updateTypeUn == "solicit") {
// 监听返回键事件
plus.key.addEventListener("backbutton", callbackData.backButtonHandlernext, false);
}
return callbackData;
}
// 新的下载
function newUpdateDownload(data) {
if (data.shichang === 1 && /\.apk/i.test(data.downloadurl_sign)) {
//去应用市场更新
plus.runtime.openURL(data.shichangurl);
plus.runtime.quit();
} else {
// 开始下载
// 创建下载任务
let dtask;
let popupData = {
progress: true,
buttonNum: 0, //按钮的显示 0 ==> 无按钮,1 ==> 关闭按钮,2 ==> 取消下载和后台下载按钮
};
let lastProgressValue = 0;
let popupObj = downloadPopup(popupData);
console.log("继续");
dtask = plus.downloader.createDownload(
data.downloadurl_sign,
{
filename: "_downloads/",
},
function (download, status) {
if (status == 200) {
popupObj.change({
progressValue: 100,
progressTip: "正在安装文件...",
progress: true,
buttonNum: 0,
});
plus.runtime.install(
download.filename,
{},
function () {
popupObj.change({
contentText: "应用资源下载完成!",
buttonNum: 1,
progress: false,
});
},
function (e) {
popupObj.cancel();
plus.nativeUI.alert("安装文件失败[" + e.code + "]:" + e.message);
}
);
} else {
popupObj.change({
contentText: "文件下载失败...",
buttonNum: 1,
progress: false,
});
}
}
);
dtask.start();
dtask.addEventListener("statechanged", function (task, status) {
switch (task.state) {
case 1: // 开始
popupObj.change({
progressValue: 0,
progressTip: "准备下载...",
progress: true,
});
break;
case 2: // 已连接到服务器
popupObj.change({
progressValue: 0,
progressTip: "开始下载...",
progress: true,
});
break;
case 3:
const progress = parseInt(
(task.downloadedSize / task.totalSize) * 100
);
if (progress - lastProgressValue >= 2) {
lastProgressValue = progress;
popupObj.change({
progressValue: progress,
progressTip: "已下载" + progress + "%",
progress: true,
});
}
break;
}
});
popupObj.cancelDownload = function () {
dtask && dtask.abort();
uni.showToast({
title: "已取消下载",
icon: "none",
success: () => {
popupObj.destroy()
}
});
};
// 重启APP
popupObj.reboot = function () {
plus.runtime.restart();
};
}
}