基于HTML5 web 技术APP快速开发研究

李世满

摘要：随着互联网+时代的到来，智能手机、PDA等移动设备的广泛运用，作为企业与个人便捷移动工作与生活的桥梁之一，APP的运用与开发已被提上开发人员的记事日程。该文以移动办公APP”云端”软件开发为蓝本，阐述了基于HTML5web技术快速开发APP的优势及HTML5web技术的发展前景，为基于HTML5web技术APP快速开发研究做一些实践经验积累与案例提供。

关键词：HTML5 web技术 APP开发 HTML5发展

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2016）03-0081-02

随着智能手机的普及，互联网+时代的到来， 3G和4G网络的大规模覆盖应用，移动互联网得以迅猛发展。互联网的发展处于一个转折点，而在这之中，移动手机应用作为主角，对于网络供应商、用户、开发商、投资商都有着重大的影响。 App作为没有时间和地点的限制，并且可以随时随地地查看和使用的这种方式已逐渐成为用户的最爱。并且APP软件因为它有着覆盖面广而且简便和快捷等这些优势也越来越受到企业的关注。如何快速并有效的实现APP的开发问题的解决被提上开发人员的记事日程。

1 APP与Web app的发展

App也就是应用软件的意思，英文简称Application，如今的APP多指智能手机的第三方应用程序。

据APP行业管理中心的数据显示，高达79%的用户每天早上已起来就开始了手机应用。手机的应用几乎成为了人们生活中的一大日常必需品。人们在手机的APP中获取资讯、进行娱乐和网上购物。随着移动设备的快速崛起，APP也正在爆发式增长。移动客户端中蕴藏着巨大的商机已毋庸置疑。

在App大力发展的今天，人们已不再质疑App可以带来的收益，互联网+时代的到来，App 让每个人的生活更轻松、更便捷了，APP开发也随之让每个企业都开启了移动信息化的进程。

Web app 实际上就是 Web Application，指利用 Web 技术，配合 Web 浏览器，跨越网络实现一个或多个任务的 Web 应用程序。通过 Web 浏览器，由Web 技术实现出来的 Web App 有别于传统的网站，它具有更丰富的交互体验，使得 Web App 看上去更像是 Native App，而且web app的开发难度较之native app大幅降低，易用性更高。

2012年我们看到了WEB APP的雏形， 2013到2014年WEB APP进入井喷期。原因在于首先HTML5技术本身已经比较成熟。其次整个产业链对HTML5的接受程度已经得到了推广和普及，标准已经形成。各种各样的浏览器都是争先恐后的来支持HTML5。从另外一个角度随着带宽的不断上升，资费的不断下降，人们对WEB APP接受程度也会越来越高。最重要的是云计算的推出，云计算根本上改变了WEB APP的接受程度。

2 基于HTML5web技术APP快速开发现状

相对于Native App，Web App开发有哪些优势呢？首先，app开发成本较低。只要使用web开发技术就可以轻松地完成web app开发；其次，app升级较简单。升级不需要通知用户，在服务端更新文件即可，用户完全没有感觉；另外，和一般的web一样，维护比较简单，它其实就是一个站点。

很多app开发公司看中web的未来发展是基于它的灵活性——既拥有在web上完成任务的一切优点，又能在离线的时候完成这些任务。支持离线应用现在已经是可以实现的了——HTML5提供了例如应用缓存和客户端存储（比如，本地存储，索引数据库）等性能，这样你的应用就能在没有网络联接的时候也可以工作了随着科技的发展，移动终端已进入人们的生活，而传统的网页开发技术很难适应这种小屏幕界面，HTML5的问世在很大程度上解决了这一难题。结合 HTML5的特性并提出了简单明了、可订制性、以用户为中心的移动Web设计原则。HTML5新增的视频、音频、画布、离线应用等功能为网页开发带来了新的希望和曙光。新技术不仅能很好地适应移动终端界面，而且很大程度上减少了代码冗余，提高了设备运行效率。

用Html5+css3开发webapp的优势在于：1）跨平台语义化更好、性能更优Android/iOS/windowsphone都对html5和css3提供了良好的支持；2）引入渐变、圆角、阴影、半透明等新特性，为用户创建更轻量的页面和更丰富的体验。带来更好的网页的连通性、可搜索性、可操作性等Webview所用到的部分css3属性介绍box-flex、rgba、border-radius、border-image、ox-shadow、text-shadow、multiplebackgrounds、background-size、gradient样式呈现使用css3属性可以生成内外阴影，透明度，渐变色，圆角等效果，而以往这些只能用图片来实现的。选择器css3增加了更多的CSS选择器，让选择元素变得越来越简，实现更简单但是更强大的功能。3）学会利用html5的某些元素实现跨平台的效果。如HTML5 Canvas实现Loading加载动画。

3 以移动办公APP软件开发为蓝本的HTML5web技术应用：“云端”APP办公软件开发

“云端”应用软件是由深圳技师学院学生自主开发的手机应用软件，主要应用于用户云端文件保存与分享。 “云端”应用软件的目标是“高质量的文件社交体验”，根据这一目标和应用软件的使用范围，让中国所有的高校学生和企事业单位都使用的“云端”的目标也就不难实现。“云端”各功能通过ajax使前后台数据交互。前端使用H5+CSS3+JS编写，本地端使用java编写，服务端使用ajax+PHP+.Net+NodeJS编写。各端间相互联通。具体逻辑判断如图所示。

作品功能与原型设计：

1）用户云端保存文件：“云端”应用软件主要应用于学生、商务人群于云端保存文件，其工作原理为：用户通过网络下载软件并于手机安装“云端”，然后在“云端”中注册帐号，在云盘中点击上传文件即可。 2）用户随意分享文件：“云端”应用软件在用户上传文件后，文件的状态是自动公开分享。即用户需要在上传文件是考虑文件内是否涉及个人隐私与包含违法反动文件。一旦用户分享以上所述文件，上传者将被追究法律责任。3）用户间在线交流：“云端”应用软件用户间可相互添加好友创建群聊天实现即使在线交流。4）云端基础功能： 用户可在应用软件上查看网盘文件、编辑云文档、浏览云相册、欣赏云音乐、并且实现软件的基础设置。

作品实现、难点及特色分析：

软件实现：软件使用html5+css3+JavaScript+java+ajax+PHP+.Net+NodeJS等语言实现。

软件难点：web与本机关联相互调用；云端文件数据库取数；文件目录结构分析；用户信息保存与设置；用户即使在线交流；各类文件查看

软件特色：用户可随时分享文件、对文件评论、获取优质文件；本软件使用的是混合应用技术，即使用web+java+ajax完成。混合型app可以完美的解决各平台中的兼容性；开发成本低，混合型应用可同步各操作平台的用户交互，不需在各平台开发不同的用户使用界面；维护更新简单，混合型应用可让开发者及时的修改bug更新软件并发布。.

软件访问地址：http：www.1473.cn

4 HTML5发展趋势

HTML 5从根本上改变了开发商开发Web应用的方式，从桌面浏览器到移动应用，这种语言和标准都正在影响并将继续影响着各种操作平台。

参考文献：

[1] 物联中国网[EB/OL].www.50cnnet.com.

[2] 王庆.基于HTML5的移动Web技术[J].软件导刊，2013（12）.

[3] 马婧.巨头_HTML5命运的裁定者[J].互联网周刊，2013（9）.