uniapp实现App弹窗更新升级（完整版）

最新推荐文章于 2024-05-29 19:40:53 发布
最新推荐文章于 2024-05-29 19:40:53 发布
阅读量9.4k 收藏 69
点赞数 12
分类专栏： uniapp 文章标签： 1024程序员节 uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48507640/article/details/120471420
版权

对于没有做过App升级更新的伙伴来说，起步无非是困难重重的。
原理说来简单：对比版本号，版本号低的或相等的，不作为；版本号高的，弹窗、升级。
但是实际上双手放在键盘上，无从下手。
笔者最开始也是这个状态，靠的是一步步摸索、调试才有了让领导较为满意的结果，虽然前前后后修改了几个版本，但总算松了口气。
效果及代码展示如下：
在这里插入图片描述
在这里插入图片描述

// App.js
import config from '@/utils/config.js';
import checkappupdate from '@/utils/checkappupdate.js';
//版本检测
let appType = plus.os.name.toLocaleLowerCase()
let versions = plus.runtime.version.split('.').join('')
axios({
	url: '后端接口',
	params: {						
		// '参数'
	}
}).then(res => {
	let newversion = res.data.codeversion
	if(Number(newversion) > Number(versions)) {
		checkappupdate.check({
			title:"检测到有新版本！",
			api: config.base_url + '后端接口'
		})
	}
})

// checkappupdate.js
import config from '@/utils/config.js';
const $iconUrl = "/static/image/matser/mine/rowtos.png";
const $closeUrl = "/static/image/matser/mine/but_del.png";
const $gotoUrl = "/static/image/matser/mine/but_002.png";
const $mainColor = "#FF5B78";
function check(param = {}) {
	if (!param.api) return false;
	
	plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
		let platform = plus.os.name.toLocaleLowerCase()
		uni.request({
			url: param['api'],
			data: {
				apptype: platform,
				version: widgetInfo.version
			},
			header: {
				'content-type': 'application/x-www-form-urlencoded'
			},
			method: 'POST',
			dataType: 'json',
			success: (result) => {
				let data = result.data.data ? result.data.data : null
				if (data && result.data.code === 1 && data.downloadurl_sign) {
					if(/\.wgt/i.test(data.downloadurl_sign) || (platform == 'android' &&  /\.apk/i.test(data.downloadurl_sign))){
						// 如果是热更新  wgt 或 android平台下apk
						let datas = {
							versionInfo: data.content,
							versionName: data.newversion,
							updateType: data.enforce == 0 ? "solicit" : "forcibly",  //forcibly强制立即升级  solicit非强制升级
							downloadurl_sign: data.downloadurl_sign
						}
						updatePopup(datas, '')
						return
					}
					if (platform == 'ios') {
						// 如果是ios,则跳转到appstore
						plus.runtime.openURL(result.data.data.downloadurl_sign)
						return;
					}
				}
			},
			fail: (res) => {
				console.log('fail', res)
			}
		})
	});
}

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;
	
	let popupViewContentList = [{
			src: $iconUrl,
			id: "logo", 
			tag: "img",
			position: {
				top: "0px",
				left: "0px",
				width: popupViewWidth + 'px',
				height: (screenHeight / 5.5) + "px",
			}
		},
		{
			tag: 'font',
			id: 'title',
			text: "发现新版本",
			textStyles: {
				size: '22px',
				color: "#5F94F9",
				// 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: '160px',
				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: '160px',
				left: (viewContentWidth / 2) + (viewContentWidth / 4) + 10 + "px",
				width: 50 + "px",
				height: "15px"
			}
		})
	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({  // 立即升级图片按钮
			src: $gotoUrl,
			id: "gotos", 
			tag: "img",
			position: {
				bottom: viewContentPadding + 'px',
				left: (viewContentPadding * 2) + "px",
				width: (viewContentWidth - viewContentPadding * 2) + "px",
				height: "40px"
			}
		})
	} else {
		popupViewContentList.push({  // 立即升级图片按钮
			src: $gotoUrl,
			id: "gotos", 
			tag: "img",
			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: '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();
					newUpdateDownload(data)
				}
		}
	});
	
	errView.addEventListener("click", function() { //处理点击关闭按钮点击
		maskLayer.hide();
		popupView.hide();
		errView.hide();
	});
	
	// 显示弹窗
	maskLayer.show();
	popupView.show();
	if(data.updateType == "solicit"){
		// 点击遮罩层
		errView.show();
		maskLayer.addEventListener("click", function() { //处理遮罩层点击
			maskLayer.hide();
			popupView.hide();
			errView.hide();
		});
	} else {
		errView.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: "#f1f1f1",
					borderWidth: "1px",
				},
				position:{
					bottom: viewContentPadding + 'px',
					left: viewContentPadding + "px",
					width: (viewContentWidth - viewContentPadding) / 2 + "px",
					height: "30px"
				}
			},
			{
				tag: 'rect', //绘制底边按钮
				rectStyles:{
					radius: "3px",
					color: '#ff00ff'
				},
				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: '#ff00ff'
				},
				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.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();
		}
	}
	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(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);
		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"
			});
		}
		// 重启APP
		popupObj.reboot = function(){
			plus.runtime.restart();
		}
	}
}

export default {
	check
}

5+的样式好难调，如果有vue版的就更好了；以上内容适用于Android；ios的是跳转到store，还没测过，请自行调试。

文章参考来自插件市场，感谢两位作者
https://ext.dcloud.net.cn/plugin?id=2144
https://ext.dcloud.net.cn/plugin?id=1643

河枣
关注
  • 12
    点赞
  • 踩
  • 69
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
uniapp APP端安卓在线升级功能
06-16
uniapp APP端安卓在线升级功能——强制或可选升级，下载进度显示,demo
uniapp开发app，进行app更新组件
01-17
本篇将详细讲解如何在uniapp中实现APP的更新组件功能，以确保用户能够及时获取最新的应用版本。 一、uniapp简介 uniapp是基于Vue.js开发的多端统一开发框架，通过uni-app，开发者可以使用Vue.js语法编写代码，然后...
uniapp的app端软件更新弹框
qq_61876792的博客
05-07 613
uniapp的app端软件更新弹框
uni-app全局弹窗的实现方案
最新发布
Dayer的博客
05-29 1820
uni-app 全局弹窗
使用uniapp开发APP实现版本更新并安装
WeiflR10的博客
12-02 3739
在manifest.json中输入本次版本号。在 首页 中判断是否显示 更新提示 弹窗。通过一个弹窗去实现版本更新提示。注：获取本地包版本号。
uniapp实现版本检测，更新
qq_56995244的博客
08-01 4678
下载完成后关闭弹窗,获取的临时地址用uni.openDocument打开文件，就可以安装了。用官方提供的onProgressUpdate可以获取到下载进度。5.点击更新时下载，并显示进度（弹窗显示）。4.如果版本号不是最新的就打开提示弹窗。2.在获取到服务器保存的app版本。1.首先需要获取当前app的版本。3.点击按钮验证版本号。
uniapp APP端在线升级功能实现讲解——强制或可选升级，下载进度显示
热门推荐
pixle的博客
06-16 1万+
本文主要讲述uniapp APP在线升级功能实现，并用代码演示包括强制升级、可选升级、下载进度显示、下载自动安装等功能，示例代码已经过测试可结合实际开发场景做调整直接引入使用
uniapp 微信小程序提醒版本更新
weixin_53322542的博客
11-10 384
【代码】uniapp 微信小程序提醒版本更新。
uniapp实现app版本自动检测升级
mostrichman的博客
04-24 1104
uniapp,自动检测升级
uniapp 实现点击出现弹窗
RemindingMe的博客
11-15 7841
用uniapp实现一个弹出窗
uniapp 离线打包 plus.runtime.install 安装页面不弹起
weixin_48429986的博客
09-21 2062
贴一下下载代码； 云打包正常可以调起安装页面，离线打包无法调起； 最终原因：
uniapp 打包成apk后实现自动更新
05-09 2346
检测版本号并实现下载（本地与服务器存储的版本号做比对）页面显示 下载的提醒。
uni-app自定义弹窗组件，支持自定义图片，文本、按钮等功能。
04-17
uni-app自定义弹窗组件，支持自定义图片，文本、按钮等功能。
uniapp 打包App 电商源码
06-01
5. **热更新**：uniapp支持热更新机制，开发者可以无需用户手动更新应用，即可实现代码的实时部署和修复。 6. **社区生态**：uniapp拥有活跃的开发者社区，提供各种插件和教程，方便开发者扩展功能和学习。 在...
uniapp打包app自定义开屏页
01-27
在移动应用开发中，uni-app是一个非常流行的跨平台框架，它允许开发者用一套代码实现多端部署，包括iOS、Android、微信小程序、H5等。本文将深入探讨如何使用uni-app来实现自定义的开屏页（也称为启动页或 splash ...
uni-app，app应用如何做app版本升级操作
tjq11111的博客
05-23 1468
uni-app，app应用如何做app版本升级操作
Uni-app版本自动更新
weixin_44239761的博客
06-09 2243
3. 拿当前客户端的版本号以及数据库app的版本号。5.将组件引入想要提示更新的页面。，在自己的项目上做了一些修改。4.写一个加载的组件。
uniapp小程序实现更新操作提示用户升级
m0_64344940的博客
09-23 1249
uniapp小程序实现更新操作提示用户升级
uniapp小程序 如何更新版本 在页面提示升级版本
maoge_666的博客
03-22 1579
uniapp小程序 如何更新版本 在页面提示升级版本
uniapp app的弹窗代码
04-04
以下是一个简单的 uniapp 弹窗代码： 1. 在 template 中添加弹窗组件 ```html <template> <view> <button @click="showModal">点击弹窗</button> <modal v-model="showModalFlag"> <view>这里是弹窗内容</view> </modal> </view> </template> ``` 2. 在 script 中添加 data 和方法 ```js <script> export default { data() { return { showModalFlag: false }; }, methods: { showModal() { this.showModalFlag = true; } } }; </script> ``` 3. 在 style 中添加弹窗样式 ```css <style> .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; } .modal__content { background-color: #fff; padding: 20rpx; border-radius: 10rpx; } </style> ``` 这样就可以实现一个简单的 uniapp 弹窗了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值