使用 uni-upgrade-center 搭建 APP 更新系统 (升级中心 + 应用升级)

代码哈士奇

关注

发布于: 1 小时前

哦~我完成了 uni-app 手机 app 开发，如何让他更新呢~我来告诉你

说明:分两块，一块是应用升级管理系统，一个是应用检测自己版本及更新

课程视频

uni-upgrade-center - Admin 搭建升级中心

创建 uni-admin 模板应用

我们之前已经讲了如何https://xie.infoq.cn/article/3597cdf0118290adf2004e0d0

之所以先创建 uni-admin 模板应用是因为 uni-upgrade-center - Admin 是需要搭载在 uni-admin 上的

全流程如下

升级中心搭建全流程

新建项目

引入插件

插件市场引入 https://ext.dcloud.net.cn/plugin?id=4470

安装第三方依赖

上传云函数

初始化 db_init.json

添加以下页面路径

在 pages.json 中添加

{            "path": "uni_modules/uni-upgrade-center/pages/version/list",            "style": {                "navigationBarTitleText": "版本列表"            }        }, {            "path": "uni_modules/uni-upgrade-center/pages/version/add",            "style": {                "navigationBarTitleText": "新版发布"            }        }, {            "path": "uni_modules/uni-upgrade-center/pages/version/detail",            "style": {                "navigationBarTitleText": "版本信息查看"            }        }, {            "path": "uni_modules/uni-upgrade-center/pages/app/list",            "style": {                "navigationBarTitleText": "应用列表"            }        }, {            "path": "uni_modules/uni-upgrade-center/pages/app/detail",            "style": {                "navigationBarTitleText": "应用信息查看"            }        }, {            "path": "uni_modules/uni-upgrade-center/pages/app/add",            "style": {                "navigationBarTitleText": "新增应用"            }        }

复制代码

效果为

在源码视图添加

在 manifest.json 添加

"networkTimeout":{    "uploadFile":1200000    //ms， 如果不配置，上传大文件可能会超时}

复制代码

效果为

初始化 uni-admin 模板应用的 data

注意是 db_init.json

选中需要的数据表

如果提示没有菜单那几个数据有就创建 https://xie.infoq.cn/article/3597cdf0118290adf2004e0d0

运行到浏览器

注册管理员账号并且登陆

找到菜单设置

添加即可

到此完成搭建

应用升级搭建全流程

假设我们已经有了一个开发好的应用，我们想让他带有更新检测，自动检测，强制更新等等，如何做呢？来吧，小弟带你走下流程~

这里我们准备了一个应用，就是 uni-app 的默认模板

引入插件

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

创建数据表

在服务空间创建模板表其它里面

上传部署云函数

添加页面路径

在 pages.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
            }        }    }