学习
实践
活动
专区
工具
TVP
写文章
专栏首页dmhsq_csdn_blog带你使用uni-upgrade-center搭建APP更新系统(升级中心+应用升级)
原创

带你使用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中添加

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

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

效果为

在这里插入图片描述

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

注意是 db_init.json

在这里插入图片描述

选中需要的数据表

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

运行到浏览器

注册管理员账号并且登陆

找到菜单设置

在这里插入图片描述

添加即可

在这里插入图片描述

到此完成搭建

在这里插入图片描述

应用升级搭建全流程

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

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

在这里插入图片描述

引入插件

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

在这里插入图片描述

创建数据表

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

在这里插入图片描述

上传部署云函数

在这里插入图片描述

添加页面路径

在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

            }
        }
    }

效果如下

在这里插入图片描述

引入主要的js

这里我在 pages/index/index.vue中引入

在这里插入图片描述

升级测试

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

升级中心新增应用

在我们之前搭建好的升级中心 添加应用

在这里插入图片描述
在这里插入图片描述

打包1.0.0版本

我们先搞一个1.0.0版本进行测试

在这里插入图片描述

云打包 (可不选择云打包,这里只是方便测试)

在这里插入图片描述
在这里插入图片描述

打包完成会生成一个apk

在这里插入图片描述

发布1.0.0版本

在我们之前搭建好的升级中心点击版本管理

在这里插入图片描述

发布新版

在这里插入图片描述

我们是云打包 所以选择 原生App安装包

在这里插入图片描述

包地址可选择上传文件 ,上传完成会自动生成

在这里插入图片描述
在这里插入图片描述

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

特别注意

调试的时候,获取的appid以及版本号不是你的,而是Hbuilder和13.1.2

在这里插入图片描述

这个时候 我们可以本地修改

找到

在这里插入图片描述

修改appid 以及版本号 appid可以在 manifest.json找到

在这里插入图片描述

这个时候 我们代表模拟器上版本是1.0.0

打包发布1.0.1

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

再次云打包

获得一个新的apk

在这里插入图片描述

在升级中心发布新版本

在这里插入图片描述

升级测试

在模拟器中测试 哈哈哈 船新版本~

在这里插入图片描述
在这里插入图片描述

原创声明,本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

登录 后参与评论
0 条评论

相关文章

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

    我是代码哈士奇 此文章来源为代码哈士奇,个人主页:https://dmhsq.blog.csdn.net/

    代码哈士奇
  • 2021腾讯云开发者社区年度盘点发布,更有新春好礼等你赢取!

    2021年度优质文章链接: 疫情之下看vivo和腾讯云直播如何合作举办线上年会: https://cloud.tencent.com/developer/art...

    腾讯云开发者
  • 2021腾讯云开发者社区年度盘点发布,更有新春好礼等你赢取!

    云+社区走过成长的四年,从最开始的技术博客到现在拥有专栏、问答、沙龙、竞赛等多个板块的技术社区。

    腾讯云开发者社区
  • 开源应用中心 | 16年国产开源博客,用这个快捷方式搭建个人站

    前言 互联网时代,我们的信息往往散落于各种微博、SNS、朋友圈、BSP 博客等各类 UGC 社交平台。随着时间的推移,各类平台不断地关闭、开通,很少有人能够将个...

    腾讯云DNSPod团队
  • 腾讯开源应用中心发布,速来体验打卡吧!

    在开源社区有着大量广受用户欢迎的应用,比如世界排名第一的CMS系统WordPress,知识付费新秀Discuz! Q,中文社区论坛领导者Discuz! X,敏...

    腾讯云DNSPod团队
  • YesApi v5.0,一款立即搭建接口收费平台的神器

    YesApi 接口大师,是一套快速研发、管理和开放API接口的 软件产品、源代码和解决方案。通过低代码可视化配置方式帮助企业快速搭建接口开放平台和搭建API接口...

    dogstar
  • Fastjson1.2.68反序列化复现(文末送书)

    发送恶意请求后,rmi监听的口会收到B主机的连接并读取恶意类,如果没有监听到就代表失败了

    Khan安全团队
  • 开源应用中心 | 这款经久不衰的CMS内容管理系统,值得你一试!

    1. 背景 Drupal 是使用 PHP 语言编写的开源内容管理框架(CMF),它由内容管理系统(CMS)和 PHP 开发框架(Framework)共同构成,在...

    腾讯云DNSPod团队
  • 开源应用中心|Discuz!X全新PC社区体验,多种场景一站解决

    1. 背景 Discuz!X(后文简称dzx)想必大家都比较熟悉了,目前国内大部分站长都使用过它,经过了这么多年的更新迭代,现在已经来到了3.4-202110...

    腾讯云DNSPod团队
  • 为何大家这么青睐iPhone,iOS 设计的神细节有哪些?

    在现实世界中,iPhone 走入了千家万户,但是你是否深入了解了 iPhone 这部功能强大的个人设备呢!本篇文章带你领略一下iOS设计的一些神细节。

    HelloWorld杰少
  • 容器编排调度-Rancher(10)-1024电商平台项目技术选择和创 建聚合工程项目【工业级PaaS云平台+SpringCloudAlibaba+JDK11综合项目实战】

    一种按使用量付费的模式,这种模式提供可用的、便捷的、按需的网络访问,进入可配置的计算机资源共享池(资源包括网络、服务器、存储、应用软件、服务),这些资源能够被快...

    高大北

扫码关注腾讯云开发者

领取腾讯云代金券