uniapp 实战 -- app 的自动升级更新(含生成 app 发布页)

uniapp 提供了 App升级中心 uni-upgrade-center ,可以便捷实现app 的自动升级更新,具体编码和配置如下:

1. 用户端 -- 引入升级中心插件

下载安装插件 uni-upgrade-center - App

https://ext.dcloud.net.cn/plugin?id=4542

pages.json 中添加页面配置

(不要配在第一项)

json 复制代码
		{
			"path": "uni_modules/uni-upgrade-center-app/pages/upgrade-popup",
			"style": {
				"disableScroll": true,
				"app-plus": {
					"backgroundColorTop": "transparent",
					"background": "transparent",
					"titleNView": false,
					"scrollIndicator": false,
					"popGesture": "none",
					"animationType": "fade-in",
					"animationDuration": 200
				}
			}
		}

在首页导入调用

pages/index/index.vue

js 复制代码
import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
js 复制代码
onLoad() {
	checkUpdate()
},

打包 app

https://blog.csdn.net/weixin_41192489/article/details/135551800

本范例中,版本配置为1.0.1版

2. 管理端 -- 创建 uni-admin 项目

详见 https://blog.csdn.net/weixin_41192489/article/details/135547916

将项目免费托管到 unicloud 更方便,不托管也行。

3. 管理端 -- 添加 app 应用




此处选择第1步中打包得到的可自动升级更新的apk


4. 管理端 - 生成 app 发布页


会下载得到一个 index.html 文件,可根据需要修改名称

将其托管到unicloud

此时访问 你的前端网页托管域名/朝阳的百宝箱app下载.html 就能看到啦!

你的前端网页托管域名在这看:

5. 手机 - 扫码下载安装可自动升级更新的app

手机打开任意浏览器,扫描 app发布页的二维码即可下载安装

6. 用户端 - 更新代码,打包 apk

修改 app 项目的代码,增加配置文件里的版本号后再次打包,得到升级后的apk,本范例版本配置为 1.0.2 版

7. 管理端 - 发布新版 apk

运行 uni-admin 项目并登录

(已托管的直接访问线上链接登录)




8. 手机 - app 自动升级更新

打开手机上的app,会弹出升级弹窗,按提示下载更新即可。

推荐 - 使用 wgt 包实现 app 热更新

管理更便捷,用户下载量更小,且无感,方法详见:

https://blog.csdn.net/weixin_41192489/article/details/135553150

相关推荐
头发还在的女程序员15 小时前
基于 Spring Boot + Vue 3 + uni-app 的灵活用工系统:四端架构与业务流程设计
vue.js·spring boot·uni-app·灵活用工·灵工系统
Dumbness2 天前
订阅消息弹窗必须在用户点击里调:联调实验室里 timing 和 Mock 支付通知踩的坑
javascript·uni-app
码间留白4 天前
uni-app 鸿蒙离线打包:一个改动从源码到真机要穿过几条链
uni-app·鸿蒙·deveco·离线打包·uts插件
多客:duokelijie4 天前
代练订单系统选型思路:跨品类游戏接入、订单分层管理、自动结算逻辑拆解!
数据库·mysql·微信小程序·前端框架·uni-app·php·持续部署
码间留白5 天前
鸿蒙端对接 BLE 血压计:从一次握手到读数入库(二)设备篇
物联网·uni-app·鸿蒙·蓝牙ble·血压计
华玥作者6 天前
Vue 3 + TypeScript + uni-app 组件库推荐:hy-app(华玥组件库)
vue.js·typescript·uni-app
FinelyYang6 天前
uniapp使用kkfileview在线预览ppt,excel,word,pdf类型文件
pdf·uni-app·powerpoint
2501_916008896 天前
iPhone 设备信息查看,用 KeyMob 看型号、序列号、电池健康和 UDID
android·ios·小程序·https·uni-app·iphone·webview
ModyQyW6 天前
vite-plugin-uni-manifest 0.7:在 uni-app 读取之前生成
前端·uni-app
lyz2468596 天前
uniapp vue3 小程序开发注意事项
uni-app