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

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

tuonioooo

4322人浏览 · 2022-06-25 19:04:29

tuonioooo · 2022-06-25 19:04:29 发布

前言

日常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>

到这里，uni-upgrade-center App 版本基本配置完

手机模拟器或基座的测试演示与注意要点