文章目录
- 前言
- 一、技术介绍
- 二、项目源码
- 2.1 前端代码(HTML5)
- 2.2 后端源码(C#)
- 2.3 前端代码(JavaScript)
- 三、效果展示
- 3.1 运行 WebAPI项目
- 3.2 运行安卓手机
- 四、资源链接
前言
本专栏为 前端【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的全称为超文本标记语言,是一种标记语言。是前端的必备技术,一定要掌握好,后期使用前端框架,才不会无所适从。
一、技术介绍
使用到 api
和 WebAPI
技术,具体网上查找。
手持机(前文介绍过,可以理解为工业级手机)软件自动更新机制,为啥要这么做呢?是因为生产车间有很多台“手持机”,派运维一一更新不现实,加上系统初期,难免会有各种各样的问题,需要及时发布最新版到“手持机”。
我们“更新机制”采用最简单的C/S架构,服务端(Server)部署一个WebAPI,在指定目录下存放一个更新包,当手持机客户端连接服务端时,自动对比软件版本,如果不一致就“自动推送更新”。
二、项目源码
2.1 前端代码(HTML5)
单击、触发文件下载时间,以下是测试代码。
使用到:api.js、框架
<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>
2.2 后端源码(C#)
使用Visual Studio,创建WebAPI项目,
Controllers
目录下,创建 QRController.cs控制器。部分源码如下:
/// <summary>
/// 文件下载-app自动更新机制
/// </summary>
/// <returns>文件字节流</returns>
[HttpGet]
public HttpResponseMessage DownloadFile(string a_fileName)
{
try
{
//文件的服务器地址
string filePath = HttpContext.Current.Server.MapPath("~/") + "filepath\\" + a_fileName;
if (!File.Exists(filePath))
{
return new HttpResponseMessage(HttpStatusCode.NotFound);
}
FileStream stream = new FileStream(filePath, FileMode.Open);
HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
response.Content = new StreamContent(stream);
response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
{
FileName = HttpUtility.UrlEncode(a_fileName)
};
response.Headers.Add("Access-Control-Expose-Headers", "FileName");
response.Headers.Add("FileName", HttpUtility.UrlEncode(a_fileName));
return response;
}
catch (Exception)
{
return new HttpResponseMessage(HttpStatusCode.NoContent);
}
}
2.3 前端代码(JavaScript)
根据服务端返回的URL,前端JavaScript执行文件下载,并显示进度条。
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
});
}
});
三、效果展示
直接运行WebAPI项目,看效果
3.1 运行 WebAPI项目
注意一定要有IP这个服务,否则没有,你就发布到IIS
运行吧。
3.2 运行安卓手机
四、资源链接
需要用到 API.js前端框架,可以去 APICloud官网
下载。