【H5】Android自动更新（含源码）

花北城

已于 2023-12-23 13:27:05 修改

阅读量1.3k

点赞数

分类专栏：前端 # HTML 文章标签： android ApiCloud 文件下载自动升级

于 2022-09-08 10:29:43 首次发布

本文链接：https://blog.csdn.net/youcheng_ge/article/details/126759498

版权

前端同时被 2 个专栏收录

21 篇文章 3 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

系列文章目录

【移动设备】iData 50P 技术规格
本文链接：https://blog.csdn.net/youcheng_ge/article/details/130604517

【H5】Promise的用法
本文链接：https://blog.csdn.net/youcheng_ge/article/details/131634038

【H5】文件下载（javascript）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/131539397

【H5】文件上传（ajax）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/131538256

【H5】移动端，常见界面布局模板
本文链接：https://blog.csdn.net/youcheng_ge/article/details/131229989

【H5】avalon前端数据双向绑定（MVVM）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/131067187

【H5】最全Android自动更新（源码）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/126759498

前言

本专栏为前端【H5】专栏，主要介绍HTML知识点。对于刚进入计算机世界的学生来说，学习课本上的知识是远远不够的，并且国内教材偏旧，所以需要我们通过互联网自主学习。
这里普及一个知识：HTML已不仅仅只能开发 Web，也可以开发移动端（Android、iOS），所以本专栏也会介绍移动端的开发。
我个人将移动端开发，分为两大方向：

①原生开发
最早一批，使用安卓开发工具包（Android SDK）和Java语言来开发App的方式。原生开发允许开发者充分利用安卓平台的功能和特性，以及庞大的安卓开发社区资源。但缺点就是门槛高、需要适配不同尺寸的屏幕、测试繁琐，对开发人员技术要求高。

②混合开发（加壳方式）
当前热门，使用Web技术（网页三剑客HTML、CSS和JavaScript）开发App的方式，使用 vue.js、node.js、Angular.js、React.js、api.js等框架开发。混合开发具有较高的开发效率和跨平台的优势，由于使用Web技术进行界面渲染样式丰富、屏幕适配（栅格技术自适应）效果好。但缺点就是对底层硬件调用库尚不完善，有时候会发生异常，对框架依赖较高，不过库在不断完善中，主要的相机、相册、GPS、存储调用是没有问题的。

HTML的全称为超文本标记语言，是一种标记语言。是前端的必备技术，一定要掌握好，后期使用前端框架，才不会无所适从。
在这里插入图片描述

一、技术介绍

本文主要介绍，手持机（前文介绍过，可以理解为工业级手机）软件自动更新机制，为啥要这么做呢？是因为生产车间有很多台“手持机”，派运维一一更新不现实，加上系统初期，难免会有各种各样的问题，需要及时发布最新版到“手持机”。
我们“更新机制”采用最简单的C/S架构，服务端（Server）部署一个WebAPI，在指定目录下存放一个更新包，当手持机客户端连接服务端时，自动对比软件版本，如果不一致就“自动推送更新”。

二、项目源码

2.1 服务端（WebAPI）

采用C# WebAPI创建项目，功能与前端手持机进行交互，负责处理手机持发来的数据、回传数据给手持机。我们项目Controllers文件夹下，创建控制类QRController.cs

2.1.1 检查APP版本

查询数据库【app版本信息表】，获取最新的APP发布版本，以及安装提示信息。

	/// <summary>
	/// 获取app版本信息
	/// </summary>
	/// <returns>ActionResult</returns>
	[HttpGet]
	public ActionResult GetAppVersion()
	{
	   string l_strErrorCode = "C02";//错误码
	   ActionResult m_Result = new ActionResult();
	   string l_strSQL = "SELECT * FROM app版本信息表 ORDER BY AutoID DESC LIMIT 0,1;";
	
	   MySQLHelper MySQL = new MySQLHelper();
	
	   try
	   {
	       DataTable l_dtRetun = MySQL.Query(l_strSQL).Tables[0];
	       m_Result.Validate = true;
	       m_Result.RetInfo = new CRetInfo() { ErrorCode = l_strErrorCode + "1", IsSUCD = true, ErrorMsg = Const.ct_strFetchSuccess };
	       m_Result.Data = new CData() { Obj = null, Table = l_dtRetun, cByte = null, Tostring = "" };
	   }
	   catch (Exception ex)
	   {
	       m_Result.Validate = false;
	       m_Result.RetInfo = new CRetInfo() { ErrorCode = l_strErrorCode + "2", IsSUCD = false, ErrorMsg = Const.ct_strFetchFail + ex.Message };
	       m_Result.Data = new CData() { Obj = null, Table = null, cByte = null, Tostring = "" };
	   }
	   return m_Result;
	}

2.1.2 文件下载

控制器下载文件方法，向前端回传文件流。本方法负责下载apk文件到安装手机上。不仅仅只能下载apk，任何文件都可以下载。
详情请阅读：【H5】文件下载（javascript）https://blog.csdn.net/youcheng_ge/article/details/131539397

2.1.3 上传apk更新包

在我们的IIS服务上，上传我们的最新apk包，因为我要既然要下载，肯定得有东西才能下载吧？

在这里插入图片描述
提示：这是我通过工具上传到服务器上的更新包，文件名：20230607.apk

2.1.4 服务方法测试

前面，我们已经准备好了“文件下载方法”和“更新包文件”。现在我们开始测试，这里我使用【Postman工具】测试。
输入URL地址：http://192.168.XX.XX:8090/API/QR/DownloadFile?a_fileName=20230119.apk
在这里插入图片描述
状态200 ok，文件大小3.48M，说明服务器返回正常，
提示：这里乱码一样的东西不是报错哦！是回传回来的是字节流，而工具暂时不支持，放在浏览器网页上执行就没有问题了。

这是网页执行效果，可以发现已经可以下载APK包了。

2.2 前端手持机（H5）

手持机采用HTML 5开发，这是前端的内容，另外讲解。

2.2.1 检查app版本方法

我写在通用js中，创建js文件，重命名common.js

//检查版本
function checkUpdate() {
	api.ajax({
		url : OpenAPI.GetAppVersion,
		method : 'get',
		headers: {
			'Content-Type': 'application/json;charset=utf-8'//必须，否则后端无法识别
		},
		returnAll : false,
	}, function(ret, err) {
		if (ret) {
			if (ret.RetInfo.IsSUCD) {// 取数成功
				var l_tbResult = ret.Data.Table;
				if (l_tbResult.length > 0) {
					APPUpdate(l_tbResult[0]);
				}
			} else {// 取数失败
				ShowToast(ret.RetInfo.ErrorCode+":"+ret.RetInfo.ErrorMsg);
			}
		} else {
			api.alert({msg:err.msg});
		}
	});
}

2.2.2 app更新方法（HTML）

APP版本检查，以及文件下载。

//检查版本,b_tip是否提示
function checkUpdate(b_tip) {
	api.ajax({
		url: API_HOST,
		method: 'post',
		headers: {
			'Content-Type': 'application/json;charset=utf-8', //必须，否则后端无法识别
			'SN': 11, //升级的消息ID
			'UserID': 'developC' //用户编号
		},
		returnAll: false,
		timeout: 60,
		data: {
			body: null
		}
	}, function(ret, err) {
		if (ret) {
			if (ret.Success && ret.Data.List_TableSend[0].length > 0) { //成功
				var l_tbResult = ret.Data.List_TableSend[0];
				if (l_tbResult.length > 0) {
					APPUpdate(l_tbResult[0], b_tip);
				}
			} else { // 取数失败
				ShowToast(ret.RetInfo.ErrorCode + ":" + ret.RetInfo.ErrorMsg);
			}
		} else {
			api.alert({
				msg: err.msg
			});
		}
	});
}

//app更新
function APPUpdate(l_data, b_tip) {
	var version = l_data["version"];
	var updateTip = l_data["updateTip"];
	var source = l_data["source"];
	var time = l_data["time"];
	var appVersion = api.appVersion; //应用版本号

	if (appVersion < version) {
		var str = '当前版本: ' + appVersion + '\n最新版本: ' + version + ';\n更新内容: ' + updateTip + ';\n发布时间:' + time;
		api.confirm({
			title: '有新的版本,是否下载并安装 ',
			msg: str,
			buttons: ['确定', '取消']
		}, function(ret, err) {
			if (ret.buttonIndex == 1) {
				if (api.systemType == "android") {
					api.download({
						url: source,
						report: true
					}, function(ret, err) {
						if (ret && 0 == ret.state) {
							/* 下载进度 */
							ShowToast("正在下载应用" + ret.percent + "%");
						}
						if (ret && 1 == ret.state) {
							/* 下载完成 */
							var savePath = ret.savePath;
							api.installApp({
								/* 安装app */
								appUri: savePath
							});
						}
					});
				}
				if (api.systemType == "ios") {
					api.alert({
						msg: "暂不支持"
					});
				}
			}
		});
	} else {
		if (b_tip) {
			api.alert({
				msg: "当前版本，已是最新版本"
			});
		}
	}
}

2.2.3 app调用自动更新（测试）

我的项目还在测试阶段，就分享给大家最新的成果。我目前在界面上增加了一个按钮，触发自动更新。
引入刚创建的js：

	<script type="text/javascript" src="../script/common.js" ></script>

按钮样式：

	<li class="aui-list-item">
		<div class="aui-list-item-inner" onclick="checkUpdate(true)">
			<div class="aui-list-item-label">检查新版本</div>
			<div class="aui-list-item-right">
				<i class="aui-iconfont aui-icon-right aui-collapse-arrow"></i>
			</div>
		</div>
	</li>

在这里插入图片描述

2.3 数据库表

数据库表：

-- ----------------------------
-- Table structure for app版本信息表
-- ----------------------------
DROP TABLE IF EXISTS `app版本信息表`;
CREATE TABLE `app版本信息表`  (
  `AutoID` bigint(20) NOT NULL AUTO_INCREMENT,
  `version` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `versionDes` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `updateTip` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `source` varchar(200) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `time` datetime NULL DEFAULT NULL,
  PRIMARY KEY (`AutoID`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 6 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = DYNAMIC;

SET FOREIGN_KEY_CHECKS = 1;

数据库版本信息：
在这里插入图片描述

三、项目展示

在这里插入图片描述

四、资源链接

略

花北城

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
【H5】Android自动更新（含源码）

本专栏为前端【H5】专栏，主要介绍HTML知识点。对于刚进入计算机世界的学生来说，学习课本上的知识是远远不够的，并且国内教材偏旧，所以需要我们通过互联网自主学习。这里普及一个知识：HTML已不仅仅只能开发Web，也可以开发移动端（AndroidiOS），所以本专栏也会介绍移动端的开发。我个人将移动端开发，分为两大方向：①原生开发最早一批，使用安卓开发工具包（Android SDK）和Java语言来开发App的方式。原生开发允许开发者充分利用安卓平台的功能和特性，以及庞大的安卓开发社区资源。
复制链接

扫一扫