基于HTML5的移动WebApp开发及应用设计

1、 基于html5的移动webapp开发及应用设计 摘要：在当前移动智能终端网络发展建设领域，基于网络平台与浏览器的移动app开发建设成本正在日益加剧，为了跟进发展形势、满足更多人的信息化应用需求，基于html5的移动应用web app软件应运而生。本文中简单分析了html5与移动web app的基本特征，并重点分析了基于html5的移动web app开发及应用设计。关键词：html5；移动web app；基本特征；技术架构；开发应用设计我国互联网发展是突飞猛进的，它为人们的工作、生活与学习提供了相当有利、广泛的空间环境。伴随我国网民数量的持续增长（目前已增长至8.54亿），基于html5新技术

2、的移动web app设计应用就逐渐成为主流。html5希望加速开发移动web app,基于它较广的覆盖面、简单快捷的使用特性来持续拓展个人与商业用户运营渠道，开发应用设计出良好的移动web app技术架构。1. html5与移动web app的基本特征1. html5的基本特征我国在2014年由万维网联盟正式宣布发布html5标准规范，该标准规范能够实现跨平台web应用，并引进新功能内容，它能够为当前的多媒体、新媒体移动设备带来技术层面的巨大革新。例如说html5就专门提供了全新的语义化标签，该标签能够直接增强文档的易读性，确保文档清晰明了化。而且丰富的标签也能赋予网页更丰富的意义结构内涵，如

3、此网页设计更有其实用性价值，功能覆盖面也更广泛。从离线存储技术应用角度来讲，它不同于一般web功能必须在线浏览，它在离线状态下也能支持数据传输与存储，甚至可完成数据交换业务，确保程序运行进一步优化。目前的html5技术应用主要涉及实现了3方面功能：第一是离线资源缓存技术、第二是在线状态检测技术、第三是本地数据存储技术。在3d/图形和特效技术表现方面，可利用html5进行3d图形高效渲染，确保页面效果更加炫酷多彩。这里同时启用了canvas功能，主要用于网页绘制位图技术，它也支持各种2d图形绘图，更能创建3d图像设计方案，追求对多媒体能力的有效丰富。在该过程中，主要利用音频视频能力强化html5

4、，它可构建网页端的audio、video多媒体功能体系，优化设备访问技术内容,兼容多种web类型优化系统设备功能内容，例如对其媒体摄录能力的强化等等。2. web app的基本特征web app主要基于web系统进行设计应用，它其中更利用到了web浏览器技术，能够完全跨越互联网、内联网建立一套多任务、多功能应用程序体系。目前比较常见的android以及ios两大平台都会采用到这一技术，例如ios系统中所使用的objective-c语言在开发过程中就采用到了这一技术，它的用户体验良好，用户群体优势较大。而android系统中则采用到了java语言，它的app设计也是开放性的，并不过多限制注册用户

5、，拥有着相当庞大的用户群体。就目前来看，比较常见的web app移动产品主要包含了3种：web app、native app以及native app,这其中native app表现性能最优，因为它调用了系统中自带的api技术内容，界面相当美观且拥有良好的用户体验。但整体看来它的开发成本相对偏高，但不受到平台限制，能够为用户带来相对新颖的用户体验，优劣势并存且同样较大。目前，为了凸显互联网交互技术优势，web app已经与native app实现了相互联动，它彰显了跨平台开发技术优势。举个例子，微软公司与zeptolab合作推出的基于html5框架的游戏cut the rope就运用到了ie9+

6、html5综合技术应用模式。这一做法为我国it领域所学习，希望将html5作为未来游戏平台制作发展的重要技术标准，取代传统native app技术内容，实现进一步的技术突破1。2. 基于html5的移动web app设计应用利用html5中丰富的技术组合内容如java、css3等等可实现对传统网页技术架构的有效改变，同时对页面组织形式进行优化。为此，需要首先明确基于html5技术背景下移动web app的设计技术架构，再考虑分析web app中所能实现的关键技术内容。1. 基于html5的移动web app设计技术架构首先，要基于html5建立web app的b/s架构，并将架构划分为前端与后

7、端两大部分，逐一进行分析。前端部分的总体架构相对简单，它其中的ui界面简洁，专门记录前端数据内容，且ui界面能够与用户实现交互，共同架构web app技术架构如图12。图1基于html5的web app技术架构如图1，基于html5的web app技术架构中采用到了多种先进技术内容，其中前端数据层与ui界面、后端建立了相互关联关系，它可实现对前端数据的有效处理，并随时封装数据内容。再者，它直接与服务器端相连，可根据用户提出相应操作需求，存储缓存数据内容，为用户操作封装http技术内容，最终合理化调用服务器端接口。整个过程中所有数据处理都以xml形式展开，可利用解析处理结果对数据缓存内容进行更新

8、。在后端部分则通过数据结果处理来分析优化前端数据层，形成数据分析技术应用前后呼应。后端数据库主要用于大数据存储，确保数据能够始终在前端操作过程中应用到位，随时随地转化生成最新数据内容。后端部分所采用的是典型的分层设计，它基于接口传递数据，且它的层次间影响度最小。2. 基于html5的移动web app设计关键技术基于html5构建移动web app可协助构建后端部分技术体系，例如建立asp.net、sql server等等，保证前端框架与相关协议顺利对接。就以前端部分的css层叠样式表技术应用为例，它的界面采用到了经典的结构表现分离形式，新技术则主要应用于css和html领域中。实际上，基于h

9、tml5所构建的新语义化标签已经相当到位，它一方面能提升网页语义与质量，一方面也能确保搜索引擎优化效果始终保持良好。例如在移动web app设计关键技术应用方面就采用到了java script技术，它能够配合html5添加网页动态功能，这也是目前移动智能终端领域中的核心技术内容。例如要在java script库中配置一个轻量级的jquery，为用户合理处理数据内容、html元素事件以及ajax封装内容创造条件3。总结：目前的html5技术体系已经逐渐成熟，它在移动web app开发设计应用中起到了举足轻重的重要，真正做到了跨浏览器、跨平台技术操作，为用户带来了相对便捷、高效率的多媒体平台体验。参考文献：1黄莺.基于mui的跨平台移动app开发研究 以网页设计app为例j.职业,2020(2