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

哦~我完成了uni-app手机app开发，如何让他更新呢~
我来告诉你
在这里插入图片描述
说明:分两块，一块是应用升级管理系统，一个是应用检测自己版本及更新

我是代码哈士奇此文章来源为代码哈士奇，个人主页:https://cloud.tencent.com/developer/user/5264655

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

创建uni-admin模板应用

我们之前已经讲了如何搭建uni-admin系统

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

全流程如下

升级中心搭建全流程

新建项目

引入插件

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

安装第三方依赖

上传云函数

初始化 db_init.json

添加以下页面路径

在pages.json中添加

代码语言：txt复制

{
            "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添加

代码语言：txt复制

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

效果为

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

注意是 db_init.json

选中需要的数据表

如果提示没有菜单那几个数据表，就去云服务控制台创建参考搭建uni-admin系统

运行到浏览器

注册管理员账号并且登陆

找到菜单设置

添加即可

到此完成搭建

应用升级搭建全流程

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

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

引入插件

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

创建数据表

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

上传部署云函数

添加页面路径

在pages.json添加以下代码

代码语言：txt复制

{
        "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

            }
        }
    }

效果如下