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

迈不过友情╰ 2023-01-13 10:38 152阅读 0赞

> 哦我完成了uni-app手机app开发，如何让他更新呢  
> 我来告诉你
> 
> 我们的视频教程(免费)链接为[https://static-b5208986-2c02-437e-9a27-cfeba1779ced.bspapp.com/][https_static-b5208986-2c02-437e-9a27-cfeba1779ced.bspapp.com]  
> ![在这里插入图片描述][20210418133503547.gif]

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

我是代码哈士奇 此文章来源为代码哈士奇，个人主页:[https://dmhsq.blog.csdn.net/][https_dmhsq.blog.csdn.net]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]

### 带你使用uni-upgrade-center搭建APP更新系统 ###

*  uni-upgrade-center - Admin搭建升级中心
 *   *  创建uni-admin模板应用
 *  升级中心搭建全流程
 *   *  新建项目
     *  引入插件
     *  安装第三方依赖
     *  上传云函数
     *  初始化 db\_init.json
     *  添加以下页面路径
     *  在源码视图添加
     *  初始化uni-admin模板应用的data
     *  运行到浏览器
 *  应用升级搭建全流程
 *   *  引入插件
     *  创建数据表
     *  上传部署云函数
     *  添加页面路径
     *  引入主要的js
 *  升级测试
 *   *  升级中心新增应用
     *  打包1.0.0版本
     *  发布1.0.0版本
     *  特别注意
     *  打包发布1.0.1
     *  升级测试

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]

## 创建uni-admin模板应用 ##

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

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

全流程如下

# 升级中心搭建全流程 #

## 新建项目 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]

## 引入插件 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 3]

## 安装第三方依赖 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 4]

## 上传云函数 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 5]

## 初始化 db\_init.json ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 6]

## 添加以下页面路径 ##

在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": "新增应用"
                }
            }

效果为  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 7]

## 在源码视图添加 ##

在manifest.json添加

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

效果为  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 8]

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

注意是 db\_init.json  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 9]  
选中需要的数据表

如果提示没有菜单那几个数据有就创建 [搭建uni-admin系统][uni-admin]

## 运行到浏览器 ##

注册管理员账号并且登陆

找到菜单设置

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 10]

添加即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 11]  
到此完成搭建  
![在这里插入图片描述][20210418140756947.png]

# 应用升级搭建全流程 #

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 12]

## 引入插件 ##

[https://ext.dcloud.net.cn/plugin?id=4542][https_ext.dcloud.net.cn_plugin_id_4542]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 13]

## 创建数据表 ##

在服务空间创建模板表 其它里面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 14]

## 上传部署云函数 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 15]

## 添加页面路径 ##

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

效果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 16]

## 引入主要的js ##

这里我在 pages/index/index.vue中引入  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 17]

# 升级测试 #

发布后获取的为真实app版本以及appid此步为测试

## 升级中心新增应用 ##

在我们之前搭建好的升级中心 添加应用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 18]![在这里插入图片描述][20210418141954114.png]

## 打包1.0.0版本 ##

我们先搞一个1.0.0版本进行测试  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 19]  
云打包 (可不选择云打包，这里只是方便测试)  
![在这里插入图片描述][20210418141730114.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 20]  
打包完成会生成一个apk  
![在这里插入图片描述][20210418141839878.png]

## 发布1.0.0版本 ##

在我们之前搭建好的升级中心点击版本管理  
![在这里插入图片描述][20210418142018737.png]  
发布新版  
![在这里插入图片描述][20210418142058699.png]  
我们是云打包 所以选择 原生App安装包  
![在这里插入图片描述][20210418142120995.png]

包地址可选择上传文件 ，上传完成会自动生成  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 21]

![在这里插入图片描述][20210418142352252.png]

我们此时可以用手机测试，或者模拟器

## 特别注意 ##

调试的时候，获取的appid以及版本号不是你的，而是Hbuilder和13.1.2  
![在这里插入图片描述][2021041814284977.png]  
这个时候 我们可以本地修改

找到  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 22]  
修改appid 以及版本号 appid可以在 manifest.json找到  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 23]  
这个时候 我们代表模拟器上版本是1.0.0

## 打包发布1.0.1 ##

此时我们将manifest.json 的版本名称以及版本号改为1.0.1 101

再次云打包

获得一个新的apk  
![在这里插入图片描述][20210418143252200.png]  
在升级中心发布新版本

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 24]

## 升级测试 ##

在模拟器中测试 哈哈哈 船新版本~  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 25]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 26]

[https_static-b5208986-2c02-437e-9a27-cfeba1779ced.bspapp.com]: https://static-b5208986-2c02-437e-9a27-cfeba1779ced.bspapp.com/
[20210418133503547.gif]: /images/20221022/938b673d02a448b6bf65066dd9b5ae89.png
[https_dmhsq.blog.csdn.net]: https://dmhsq.blog.csdn.net/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]: /images/20221022/fc3d2f71eed844fcbd7b93d1ffc57be9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]: /images/20221022/6802ccfe7e5a44628c01886581a05630.png
[uni-admin]: https://dmhsq.blog.csdn.net/article/details/115825075
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]: /images/20221022/774be6299aba47dcac769f6c7e0543b2.png
[https_ext.dcloud.net.cn_plugin_id_4470]: https://ext.dcloud.net.cn/plugin?id=4470
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 3]: /images/20221022/24210de5aac2464db5d8f94b71abf316.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 4]: /images/20221022/f9780c768462479cae9745468c4b1ab6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 5]: /images/20221022/0d9f9f0677374a20b44687fc7fda05f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 6]: /images/20221022/5e09ce7080d14b2585345dc6f7fff884.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 7]: /images/20221022/dce84433c582457ea91b719cd6200eb8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 8]: /images/20221022/d09892b623084fa9b0c5b6bb5f092bcb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 9]: /images/20221022/441eb03a7fe3447cb18136ab7b4ff407.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 10]: /images/20221022/ce9b3698cef64373bcaa89bb596fcff3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 11]: /images/20221022/cc11f851e461421c9a485ef55460fabf.png
[20210418140756947.png]: /images/20221022/068a7d8e075b4c5096aba89fac81f455.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 12]: /images/20221022/1b5174237418473684588c48189635d2.png
[https_ext.dcloud.net.cn_plugin_id_4542]: https://ext.dcloud.net.cn/plugin?id=4542
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 13]: /images/20221022/938f483f4d154b1b9522ae1238303e65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 14]: /images/20221022/a2cc1d9061af44e8bcf56b5d62d31b44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 15]: /images/20221022/f9b5b7d60bfb4e7fad5fa58c2556c441.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 16]: /images/20221022/fe2dedaaf0e04c73a1713bb82133a632.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 17]: /images/20221022/32a43e7e0d414c4191e9f453210b3a95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20210418141931540.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[20210418141954114.png]: /images/20221022/beb7cf26590c4eb8991257fed8c49c07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 19]: /images/20221022/9115d230fea848b1942d6cf42eb9268d.png
[20210418141730114.png]: /images/20221022/c115750162084f07b759d0a784d31640.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 20]: /images/20221022/962e7fe3c2ba4351a2c2fd2fe17dbdb5.png
[20210418141839878.png]: /images/20221022/9f3b0315efdd435cb94506ce7285314b.png
[20210418142018737.png]: /images/20221022/49766d925dfa4bc290ff6180a3e79286.png
[20210418142058699.png]: /images/20221022/3502878d1d0745e9bb4af0c42bb547cf.png
[20210418142120995.png]: /images/20221022/219e8126c6fe4982a48e1b01bbf7c70b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 21]: /images/20221022/35154cc77eb045ccb0c9eb965c6b8c61.png
[20210418142352252.png]: /images/20221022/f4709983d68449c5a039f716ea32ee14.png
[2021041814284977.png]: /images/20221022/40923c8a68be42ce95dfd12808b1726f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 22]: /images/20221022/f8a10b91e9374f559885598fd39d40d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 23]: /images/20221022/8616112ce542478eb613f5c37a573e1c.png
[20210418143252200.png]: /images/20221022/4ec5a19da46342de9599a31b841da6de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 24]: /images/20221022/5952d250b14841818dc6a97083c4c2d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 25]: /images/20221022/0e3bb7e6798b4c5d8b6aba7de55b2a42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 26]: /images/20221022/618c743e58524ce3aaf1c3c72d528ebc.png