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": "版本信息查看"
            }
        }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

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

初始化当前项目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

            }
        }
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

更新插件的引入与使用，页面路径：/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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

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

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

• 添加应用

在上面提到过的uni-admin-test已启动的项目中添加应用，具体如图：

• 打包apk

为了方便调试，采用的是云打包方案，uni-business-app,应用版本名称是1.0.0，版本号是100，在manifest.json可查看

打包后会在相应的文件夹内生成apk文件

• 上传apk 发行版本

选择原生App安装包

上传apk，发行，包的地址是自动在云端生成的，可以在服务空间查看到

• 手机或者模拟器测试

使用时需要注意，调试时，编译器默认的版本号，目前为 HBuilder, 13.4.7，而不是我们的appId，需要手动的修改一下

此时我们手机上的版本是100，而打包时设置的是101，当项目页启动时，会弹出如下下载页：

修改对应的版本号即可调正是否更新

总结

上面的流程已经基本涵盖了整个升级插件的使用，如果有遗留的可以参考官网，最终还是以官网为主，只不过这里把一些傻瓜的一些东西办了出来，就是为了以后使用时，闭坑，如果对你有用，就点个赞，分享一下吧

点击下方卡片/微信搜索，关注公众号“天宇文创意乐派”(ID:gh_cc865e4c536b)