基于HTML5的Web App的购物网站设计

第35卷第2期2017年6月太原学院学报Vol. 35 No. 2Jun.2017基于HTML5的Web A pp的购物网站设计侯小丽(太原城市职业技术学院，山西太原030027)摘要：手机上网已成为网民重要的上网方式，最新的互联网应用技术H T M L5能够依据它的跨平台性为各种系统提供网站设计的支持，因此H T M L5开发可以满足更多用户的需求。

文章利用专门针对移动端W e b设计的A pp F ra m e w o rk框架构造购物网站，采用P D O数据库连接方式防止S Q L注入，并利用先进的百度应用引擎快速开发并部署应用，以期学习成本与开发成本降至最低，减少开发工作内容，增强电子商务的安全性。

关键词：H T M L5; A pp F ra m e w o rk;W eb A p p;购物网站中图分类号：T P31 文献标识码：A文章编号：2096-191X(2017)02-0056-05D O I；10. 14152/ k i. 2096-191X. 2017. 02. 013引百移动互联网是移动通信和互联网二者的紧密结 合体。

移动互联网自诞生以来，一直保持着高速增 长的态势，预计到2018年中国整体移动互联网市场 规模将突破一万亿。

移动互联网带给用户一种全新 的业务体验，已经成为一个潜力最大、发展最为迅 速、竞争异常激烈的信息化技术领域。

在移动互联 网时代，人口对企业显得尤为重要。

人口是指用户 接人互联网的门户，成为人口就可以获得大量的用 户。

移动互联网经过多年的发展、竞争和淘汰，现在 逐渐形成了两个主要的人口 ：N a t i v e A p p、W e b[1]。

N a t i v e A p p在移动应用向企业推广的过程中首先 成为一种趋势。

所以企业在探索发展移动信息化时 常用N a t i v e A p p原生的a p p开发模式[2]。

但是随 着时间的推移，企业必须对N a t i v e A p p的更新、维 护投人很大的资源，逐渐形成了一种拖累，所以 N a t i v e A p p原生应用开发模式很难再继续走下去。

在移动互联网方面企业大都从尝试和摸索开始，如果不能尽快更新则很难持续地保留用户，所以需要 以迭代的方式在短周期内不断完善N a t i v e A p p的功 能，以满足市场和用户日新月异的诉求[3]。

但是 N a t i v e A p p对企业来说，无论以什么样的方式，夕卜包或者自己开发，都会遇到开发周期长、更新滞后、维 护成本高昂的问题。

所以真正想发展移动信息化的 企业都认识到要避免N a t i v e A p p的负面影响，就必 须放弃N a t i v e A p p原生应用的开发模式，寻找别的 更合适的方法。

基于H T M L5的网页能够允许N a t i v e A p p可以 实现的功能直接通过网页实现，也就是实现W e b A p p 的开发模式。

H T M L5技术可以降低因为不同系统 兼容问题带来的各种成本，只需要基于H T M L5的标 准开发一套W e b A p p就可以适配不同平台、不同终 端，有了这样的便利之后，企业和开发者可以大幅度 缩短对用户及市场的新特性及需求的相应时间；对 于用户来说，基于H T M L5的W e b A p p可以使用 户免于频繁的下载不同的N a t i v e A p p以及同一个 N a t i v e A p p不同的版本[4]。

所以，虽然到目前为止 甚至短期内W e b A p p还不能完全代替N a t i v e A p p 原生应用的开发模式，但是推动互联网的发展是其 开放、自由的属性，基于H T M L5的W e b A P P将会 成为主流。

1基于HMTL5的应用开发优势在跨平台性、开发难度和版本控制及传播模式方 面，H T M L5应用较之N a t i v e应用具有一定的优势。

收稿日期=2017-03-24作者简介：侯小丽（1980 —），女，山西太原人，太原城市职业技术学院讲师，硕士，研究方向：软件技术。

—56 —第35卷太原学院学报总第123期1.1 跨平台性N a t i v e应用运行于本地计算机时，电脑的响应 时间、处理效率等指标都是最优的，而且它还能有很 多版本来兼容不同的操作系统和硬件平台。

但是，在这种技术运行模式下，开发出来的应用会比较依 赖电脑的配置，特别是操作系统的版本，这就会产生 应用和硬件不匹配的问题。

H T M L5的应用可以解决很多N a t i v e应用不 尽人意的地方，它可以在云端上来运行代码，硬件平 台对于它来说影响不会很大，这就使开发应用减小 对操作系统的依赖，达到很好地跨平台的效果。

1.2开发难度和版本控制方面由于N a t i v e应用对操作系统的高度依赖性，因此在面对不同操作系统、不同规格的终端时，开发者 往往投人很大的精力和资源去开发不同的应用版 本，以适配相应的操作系统和终端。

另外，移动互联 网是一个竞争激烈、节奏很快的领域，企业越快地满 足用户及市场的诉求，越快地更新、更正移动应用的 功能，就会占领很大程度的先人优势。

互联网产品 具有可复制性强、免费的属性，且具有很强的群体效 应，所以如果无法第一时间形成先人优势，后人者很 难再获得大量用户。

而N a t i v e A p p在版本更新和 b u g修复方面要付出很大的代价，并且不能随时进 行修复和更新。

相较于N a t i v e应用的乏力，基于H T M L5的移 动互联网应用只需要开发人员集中精力完善一个版 本，并且投人的时间和人力以及成本也相对较少。

在修复应用b u g方面，由于基于H T M L5的移动互 联网应用是W e b网页端的内容，因此不需要迭代版 本，只需要在后台修改即可修复b u g。

1.3传播模式目前手机A p p商店势如破竹，种类和功能多种 多样，极大地推动了整个移动手机A P P产业的发 展，并且基于安卓系统自行开发的手机A p p更是层 出不穷。

但是N a t i v e应用的人口非常单一，只能通 过A P P商店来下载。

而基于H T M L5的移动互联 网应用的导流人口数量较多且操作简单，超级A P P (如微信朋友圈）、搜索引擎、应用市场、浏览器等都 是H T M L5移动互联网应用的流量人口。

并且 W e b借助其容易接触到客户的特性，通过W e b找到内容，每一项发布的内容都有一个独立的地址，手 机客户端用户可以根据自己的需求在不同的软件中 直接打开，或者进行分享链接[5]。

2 HTML5的核心功能分析2.1离线存储技术离线存储技术能够解决用户在没有网络信号的 情况下继续访问W e b应用。

在H T M L5中，通过 c a c h e m a n i f e s t文件列出了应用程序离线工作时需 要的所有资源文件，以便用户在离线状态可以继续 与W e b A p p进行交互和操作数据，H T M L5使用 D O M S t o r a g e和 W e b S Q L D a t a b a s e来给用户提供 不同的存储方式，D O M S t o r a g e可以提供易用的 k e y/v a l u e存储方式，同时W e b S Q L可以提供基本 数据库存储。

同时H T M L5提供了 N a v i g a t o r,o n­line和 online/offline 两种方式检测用 户是否 在线，当用户状态为在线以后，将离线状态存储到本地的 数据同步到服务器上。

2.2 即时通讯技术W e b应用有一个很重要的信息特征就是信息 的实时性，比如说监控系统、新闻播报系统、在线游 戏、在线会议等应用，要求信息在服务器和客户端进 行交互的过程中，每一个步骤都要快速并且保证信 息的完整性，特别是服务器接收信息并进行处理的 过程和客户端进行信息显示的过程。

这也就是 W e b应用开发人员首先要解决的一个问题，通常他 们会使用轮询或者c o m e t技术，但是效果不太好[6]。

如果使用H T M L5W e b S o c k e t就可以达到很好的 效果，使客户端快速显示服务器信息达到实时通讯 的效果。

它基本是通过J a v a s c r i p t来实现这个功 能，首先向服务器发出连接请求，然后实现客户端和 服务器T C P连接直接交换数据。

因此，这种技术可 以实时传输数据，并且保持数据的完整性和稳定性。

2.3多媒体技术目前所使用的浏览器绝大多数是通过A d o b e F l a s h这种插件来进行多媒体文件播放的，但是这 种产品稳定性较差，时常需要进行升级维护，更糟糕 的是浏览器会因为使用了 f l a s h插件消耗应用内 存，造成启动时间增加或者导致浏览器瘫痪。

而基 于H T M L5技术的应用可以不使用f l a s h插件直接 播放多媒体文件，这样大大降低了多媒体应用的开 发难度，而且可以节约系统内存，很好地解决上述浏 览器瘫痪的难题。

H T M L5 中标签 C a n v a s、V i d e o 和 A u d i o 将视 频音频处理功能加人到了应用中[7]。

这三种标签各 有所长，C a n v a s标签虽没有可操作的行为，但是它 可以把绘制的矢量图绘制到画布上，而且没有相应顧7年■小丽基于H_TMU的Web_.A p_p的购物网.截设计第.2省的在网東上孩示的标准，所以是客户端绘制矢量，图_蠢:梟工具V i d e s o标:簽可成为网真加载.一'种f e 准化的视频文件；A u d i o标签使网页中加载一•种标准化的音频，并且能够播放出来u一个典謹的H T M L5 v i d e o A P I代码如下::：<v i d e o src =<l m o v i e,o g g15w i d t h = **320 nh e i g h t=2:4©w c o n t r o l s—**contro1s M O</1i d e n ：•3系统设计3.1总体设计本设计在进行购物网站平台建设时，充分考虚手机性能、用户体验、支付安全、开发周期与成本因 素，设计原则如下+—基为了提高手机浏览H T M L5网页的速度，选用针对手机浏览器开发框架A t>p-F r a m e w r k;二是将网真内置在徽:彳言'公众平台中，并采用微信支付方式，提升用户的购物体 验,*S是利用育度云应用引擎《入£)将购物网站托 管在安全可靠的云服务器中，减少了对服务器的运 维成本，加快开发周期[8]。