uni-upgrade-center 升级中心详细流程

前言

日常APP开发过程中，我们经常会遇到老生常谈的问题，版本升级，当然了自己有一套版本发布器那就更好，这次uni-app官网提供了一套可以私有部署的版本迭代器，还提供云端下载，只能说国内额开源技术更进步了。

uni-app 版本升级包含两块内容

uni-upgrade-center - App（业务版本）
uni-upgrade-center - Admin（统一管理App发布与升级）

官网：

uni-upgrade-center - App：https://ext.dcloud.net.cn/plugin?id=4542

uni-upgrade-center - Admin：https://ext.dcloud.net.cn/plugin?id=4470

uni-upgrade-center - Admin 部署搭建
uni-upgrade-center - App 业务过程中使用与配置
手机模拟器或基座的测试演示与注意要点

uni-upgrade-center - Admin 部署搭建

创建基于uni-admin框架的项目

由于uni-upgrade-center - Admin 属于一款插件，且部署依赖 uni-admin基础框架，所以首先第一步创建一个基于uni-admin框架的项目，具体如图下：

引入uni-upgrade-center - Admin 插件

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

可能会出现合并文件的弹窗，点击合并即可，安装插件后，安装一下第三方依赖，避免出错

关联云服务空间,命名uni-admin

上传部署

初始化数据库 db_init.json

在pages.json 添加插件内的页面路径

//此结构与uniCloud admin中的pages.json结构一致"pages": [        // ……其他页面配置        {            "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": "版本信息查看"            }        }]

在manifest.json -> 源码视图中添加以下配置：

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

初始化当前项目uni-admin-test的数据 db_init.json和云函数，如果出现覆盖弹窗，可以点击覆盖无影响。

发布运行

首次运行，发布浏览器，需要创建管理员的账号

添加升级中心菜单

登录系统后，系统菜单下是没有升级中心菜单的，需要手动配置，有点蛋疼

点击菜单管理，在待添加选项中，勾选菜单添加

添加过程中，出现了这个弹窗，我一脸茫然，我在哪里，该去何处，于是我点击确定，刷新页面，升级中心菜单出现了，使用功能也是正常的。

可以看到升级中心的发布管理功能，职场uni-upgrade-center - Admin 插件讲解完毕

uni-upgrade-center - App 业务项目搭建全流程

如果你已经有了自己的业务app项目，可以完全在它的基础上取安装插件，本教程只是为了更好的做测试，所以新建的项目。

项目建立好，记得要关联一下之前的服务空间

安装插件 uni-upgrade-center App https://ext.dcloud.net.cn/plugin?id=4542

上传部署

在pages.json中添加页面路径。注：请不要设置为pages.json中第一项

"pages": [    // ……其他页面配置    {        "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

<template>  <view class="content">    <!--导航-->    <view class="pt60">      <button type="primary" @click="doClick" class="bd" :style="{borderStyle: 'solid'}">监测更新</button>    </view>      </view></template><script>  import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'    export default {    data() {      return {              }    },    created() {          },    methods: {            doClick(){        //监测升级        checkUpdate();      },      closed(){        //uni.showTabBar();      }    }  }</script><style lang="scss" scoped>    .content {    position: absolute;    top: 0;    left: 0;    bottom: 0;    width: 100%;    height: auto;    overflow: auto;    /* background-image: url('@/static/images/ec43126fgy1giiqcxcu1zg20sg0hix76.gif'); */      }</style>