基于HTML5嵌入式移动应用社区开发与实现

摘 要：为了解决目前系统平台在移动平台上无法跨平台运行，文章通过HTML5技术引入移动应用社区开发，很好的解决了跨平台的限制。文章运用了实时双向推送技术WebSocket，WebSocket再调用本地接口，实时将关键信息通知用户，采用HTML5的Local Storage的缓存处理来动态刷新数据。

关键词：HTML5，移动应用，跨平台，双向推送技术

中图分类号：TP3

随着移动设备的发展，“移动的互联网”成为了目前最热门的名词。HTML5技术以其跨平台的特性成为了近年人们追捧的技术，很多技术人员都追求起了跨平台的实现。

现在移动应用行业逐渐发展起来，许多应用被不断地推出，然而像苹果公司这样过于封闭，没有给初学者一个很好的参照学习机会，打击了初学者的学习热情。苹果越狱平台、安卓平台这样提供移动应用下载的服务商不少，但是他们的服务多是面向于某一平台，并且对于移动应用上传的门槛较高，不能使开发上传者得到良好的交流学习与进步。很多初学者希望有一个分享学习成果、交流学习心得的社区，本学习成果展示社区就是基于这些考虑而开发的。

1 嵌入移动社区的特点

1.1 设计思想

我们的社区不仅提供各类应用的上传下载，同时也是目前WEB开发中最新技术HTML5与CSS3的学习网站。为显示网站的特性，我们的网站主要采用HTML5技术配合前端WEB开发。

1.2 本移动社区主要特点

（1）终端与服务器端的交互

用户终端的程序其实可以理解为一个chrome浏览器作为框架，与服务器数据库进行数据访问，各终端在与数据库的交互以及终端用户访问的页面进行数据的显示。

（2）终端的数据的缓存

在WIFI情况下使用一次性数据下载方式，将用户的默认模式以及重要持久数据进行加载，并区分WIFI链接和其他数据连接，下次登陆或者使用采用本地数据，只有当使用的数据是动态刷新的数据才从服务器端进行数据的加载（例如社区中的回复的帖子和图片）。采用HTML5的Local Storage的缓存处理，并且针对本地存储做了两点优化：

1）对数据采取WIFI模式下的主动更新功能，使得数据的同步尽量在WIFI下进行。

2）增加了存储数据的索引功能，提高数据读取的性能。

（3）消息的实时通知（HTML5）

各种关键消息采用了实时双向推送技术WebSocket[1][2]，WebSocket再调用本地接口，实时通知用户，使得用户能在第一时间被动获取状态。

2 本移动社区的详细设计

2.1 本移动社区实现的模块

我们将这个系统进行模块化[3]，分为三个部分，具体如图图1所示：

整个项目分为三大模块：前台信息展示系统，个人用户中心，后台信息管理系统。

（1）前台信息展示系统包含了整个网站的学习成果展示、学习心得交流等。

（2）个人用户中心主要用于社区会员对自己的个人信息、上传的应用、撰写的文章进行管理。

（3）后台信息管理系统主要是对学习社区的所有信息进行管理、审核。

图1 系统总体结构图

其中，前台信息展示系统由注册会员的流程、会员的登录、网站首页（网站首页：分为轮动图功能，有4张图片进行轮换，HMTL5，CSS3，安卓应用商店，苹果应用商店，WP应用商店，热门资讯，开发工具推荐，热门话题，热门HTML游戏推荐10个小模块）、信息资讯、学习中心、应用商店、工具软件、游戏中心、论坛中心页面构成。个人用户中心由个人资料和修改密码、应用管理（我的应用、上传应用、上传游戏、审核中的应用、未通过的应用）、学习管理（我的文章、上传文章）、游戏管理、论坛管理子功能构成。后台信息管理系统由用户管理（添加管理员、查看管理员信息、管理员修改密码）、学习文章管理、软件管理、论坛管理（添加论坛版块、查看论坛版块、添加论坛主题、查看论坛主题）、网站页面管理（添加网站底部超链接、添加网页公告、查看网站底部超链接、查看网站首页图片）、新闻管理（添加新闻、查看新闻）等子功能构成。

2.2 项目角色

整个项目涉及二种角色，分别为系统管理员、注册会员：

（1）系统管理员

系统管理员是整个网站的最高权限者，维护网站的正常运行，最新的软件信息，对用户上传的软件进行管理，对网站的数据进行维护和更新。

（2）注册会员

用户可以通过注册成为本网站的会员，注册后会获得20点积分供用户使用。当用户上传应用或学习文档时会获得相应的积分，当积分增加到一定程度，会员等级会提升。我们将制定严格的积分制度，以防用户刷分对本网站造成不良的后果。

3 结束语

基于HTML5技术的嵌入式移动应用社区，用户终端的程序其实可以理解为一个chrome浏览器作为框架，与服务器数据库进行数据访问，各终端在与数据库的交互以及终端用户访问的页面进行数据的显示。使用了 Application技术，javascript技术，sqlserver数据库技术，AJAX技术，html+div+css技术等，采用HTML5的Local Storage的缓存处理，实现动态刷新数据功能，为了实现实时消息传送的功能，本平台运用了对关键消息采用了实时双向推送技术WebSocket。但目前也存在着一些问题，比如只能采用本地接口去获取，使得跨平台的能力在这些方面受到了一定的限制。此方面如何跨平台也将是我们后续要努力和探讨的部分。

参考文献：

[1]刘斌.HTML5-未来网络应用的核心技术研究[J].自动化与仪器仪表，2010（04）：30-33.

[2]龙奇.新一代网络技术标准HTML5的研究[J].科技信息，2011（10）：245.

[3]张奇伟，黄小军.基于HTML5的移动应用的通用模块的设计与实现[J].中国科技论文在线，2012（12）：15-17.

[4]邢晓鹏.HTML5核心技术的研究与价值分析[J].价值工程，2011（22）：157-158.

[5]吴磊，张福庆.基于HTMLcanvas的WebGIS客户端技术研究[J].地理信息世界，2009（03）：78-82.

作者简介：杨娟（1992.03-），女，浙江嘉兴人，就职于嘉兴矩阵网络科技有限公司，项目组长，工程师，研究方向：移动互联网技术。

作者单位：嘉兴职业技术学院 信息技术分院，浙江嘉兴 314036