首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >带你使用uni-upgrade-center搭建APP更新系统(升级中心+应用升级)

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

作者头像
代码哈士奇
发布于 2021-10-25 03:45:02
发布于 2021-10-25 03:45:02
88300
代码可运行
举报
文章被收录于专栏:dmhsq_csdn_blogdmhsq_csdn_blog
运行总次数:0
代码可运行

哦我完成了uni-app手机app开发,如何让他更新呢 我来告诉你 我们的视频教程(免费)链接为https://static-b5208986-2c02-437e-9a27-cfeba1779ced.bspapp.com/

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

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

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

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中添加

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
            "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添加

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"networkTimeout":{
    "uploadFile":1200000    //ms, 如果不配置,上传大文件可能会超时
}

效果为

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

注意是 db_init.json

选中需要的数据表

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

运行到浏览器

注册管理员账号并且登陆

找到菜单设置

添加即可

到此完成搭建

应用升级搭建全流程

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

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

引入插件

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

创建数据表

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

上传部署云函数

添加页面路径

在pages.json添加以下代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
        "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

在升级中心发布新版本

升级测试

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/04/18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

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

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
带你使用uni-upgrade-center搭建APP更新系统(升级中心+应用升级)
我是代码哈士奇 此文章来源为代码哈士奇,个人主页:https://cloud.tencent.com/developer/user/5264655
代码哈士奇
2021/04/20
5.3K39
uni-app app热更新+整包更新 使用uniCloud开发
2、 找到/uni_modules/uni-upgrade-center-app/uniCloud/cloudfunctions/check-version,右键上传部署
风花一世月
2024/03/19
5620
uni-app app热更新+整包更新 使用uniCloud开发
手把手带你使用uni-admin搭建后台管理系统
我是代码哈士奇 此文章来源为代码哈士奇,个人主页:https://dmhsq.blog.csdn.net/
代码哈士奇
2021/10/25
3.1K0
手把手带你使用uni-admin搭建后台管理系统
手把手带你使用uni-admin搭建后台管理系统
https://cloud.tencent.com/developer/user/5264655
代码哈士奇
2021/04/19
3.8K0
uni-admin搭建-小白图片干货步骤
原文档看懂了不知道把源码放在哪一行哪个文件,来这里就对了。小白为您解答! 原文档:https://ext.dcloud.net.cn/plugin?id=7100 将第五步的源码粘贴到修改密码的下
佛系豪豪吖
2023/02/23
4530
uni-admin搭建-小白图片干货步骤
uni-app入门教程(2)页面样式、配置文件和生命周期
本文先介绍uni-app的页面样式和布局,包括尺寸单位、样式导入、内联样式和选择器等;再介绍两个配置文件,即pages.json和manifest.json的配置项和基本使用;最后简要介绍了生命周期的基本使用。
cutercorley
2020/12/16
3.2K0
uni-app入门教程(2)页面样式、配置文件和生命周期
uni-app小程序开发-分包
在支付宝开发者工具的预览界面上面的工具条中有一个查看模拟器包依赖分析的工具,点击打开
码客说
2024/08/02
6710
uni-app小程序开发-分包
springboot第9集:基础项目功能简介带你入门挖坑
开启IDEA的目录注释,增加源码的阅读效率 treeinfotip 安装操作: File -> Settings -> Plugins -> Marketplace
达达前端
2023/10/08
4710
uni-app实战之社区交友APP(2)全局样式引入和底部导航栏开发
本文先介绍了uni-app项目中引入全局样式的种类,即App.vue中引入官方CSS样式库、自定义图标库和CSS动画库;再介绍了在pages.json中定义globalStyle;最后实现了项目的导航栏开发。
cutercorley
2021/01/26
3.6K0
uni-app实战之社区交友APP(2)全局样式引入和底部导航栏开发
uni-app(优医咨询)项目实战 - 第1天
在本节要求大家掌握 uni-app 项目的创建、运行、以及 Android 真机环境配置,内容侧重于动手操作,需要理解的部分较少,操作过程中遇到错误后,可以从头重新进行操作,直到环境正常运行。
程序员朱永胜
2024/04/18
4100
uni-app(优医咨询)项目实战 - 第1天
uniCloud+uni-admin+electron实现 electron应用更新
uniCloud+uni-admin+electron实现 electron应用更新 搭建视频地址 https://www.bilibili.com/video/BV1u3411p7Qd?spm_i
代码哈士奇
2022/03/20
1.8K0
uniCloud+uni-admin+electron实现 electron应用更新
从零玩转系列之小程序微信支付UniApp实战基础项目搭建
本篇将为您介绍微信支付在小程序 Uniapp 端的全新篇章。微信支付作为移动支付领域的先驱之一,不断演进与创新,为用户和开发者提供更便捷、安全的支付体验。在本文中,我们将深入探讨微信支付在小程序 Uniapp 端的应用与优势。
杨不易呀
2023/09/22
2.5K2
从零玩转系列之小程序微信支付UniApp实战基础项目搭建
uni-app 结合云函数开发小程序博客(一):环境搭建
uni-app 是一个使用 Vue.js 开发的跨平台应用的前端框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台;uni在跨端的同时,通过条件编译和对应平台特有API地调用,可以很好得为某个平台写个性化的代码、调用其独有能力而不影响其它平台;生态丰富,支持npm包管理,丰富的第三方SDK集成和高达1600个插件的支持;上手容易,采用vue语法和微信小程序api,无额外学习成本,同时开发利器HbuilderX具有强大的语法提示。相信它将是你跨端开发的不二选择。
程序员白彬
2020/07/10
3.1K0
uni-app 结合云函数开发小程序博客(一):环境搭建
【UniApp】-uni-app-路由
然后在配置一下,微信小程序的 AppId,直接去之前的项目中拷贝一下即可,找到之前项目的 manifest.json 文件,然后选择微信小程序配置,复制一下即可。
程序员NEO
2023/12/13
5510
【UniApp】-uni-app-路由
8.新建uni-app项目newapp
将zip包下载以后解压后,将文件夹colorui复制到newapp目录下,然后在App.vue中的样式中导入:
玩蛇的胖纸
2020/06/22
7460
uni-app基础 1.2.1-引入uView
组件简介以及组件库推荐 点击查看视频教程跳到b站 课程文档地址 练习使用可以创建模板来观察官方如何使用 uni-ui 建议模板直接引入 单个使用的话插件市场引入 引入uView-ui 1.插件市场引入 App.vue <style lang="scss"> /*每个页面公共css */ @import "@/uni_modules/uview-ui/index.scss"; </style> main.js import uView from '@/uni_modules/uview-ui' V
代码哈士奇
2022/04/13
6040
uni-app 接入极验验证码攻略
uni-app 的项目中需要接入极验验证码,根据极验官方文档,只能在微信的 wxml 页面中引入模板,但是对于每个页面都有接口调用的情况下,手动加是不可能的,开发量大,测试工作量也大,需要回归整个app,但是官方也没有提供类似全局api的形式给到 js 去调用,小程序不像H5 是可以临时插入dom进行操作的,所有要做到全局把控,只能通过中间页的形式。
前端小tips
2021/12/09
2.6K0
uni-app 接入极验验证码攻略
uni-app app热更新+整包更新
风花一世月
2024/03/19
2760
uni-app app热更新+整包更新
uni-app: 如何实现增量更新功能?
都知道,很多APP都有增量更新功能,Uni APP也是在今年初,推出了增量更新功能,今天我们就来学习一波。 当然,很多应用市场为了防止开发者不经市场审核许可,给用户提供违法内容,对增量更新大多持排斥态度,特别是apple。所以拥有增量更新的app,需要注意以下几点:
Javanx
2019/09/23
2K0
uni-app: 如何实现增量更新功能?
uni app 零基础小白到项目实战-1
uni-app是一个使用vue.js开发跨平台应用的前端框架。 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验。 Uni-app继承自vue.js,提供了完整的vue.js开发体验。
达达前端
2019/09/29
1.8K0
uni app 零基础小白到项目实战-1
推荐阅读
相关推荐
带你使用uni-upgrade-center搭建APP更新系统(升级中心+应用升级)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档