基于jQuery Mobile的移动电子毕业纪念册的设计与实现

2017-09-19 12:37赵蒙婷杨根福雷文杰

科技创新与应用 2017年27期

关键词：设计

赵蒙婷++杨根福++雷文杰

摘要：随着移动互联网的迅速发展，越来越多的人在生活中使用APP，随处可以见到人们在使用移动设备来学习、购物。因此，基于智能手机的电子纪念册设计与开发应运而生，电子毕业纪念册包含了大量的视频和音频，很好解决在使用纸介质时难永久保存、易破损、信息不丰富等缺点。本设计使用jQuery Mobile、HTML5与PHP 快速开发基于微信公众平台的Web App的方案，在多个浏览器上测试之后，界面都能正常运行显示。从测试效果来看，运行流畅、界面简洁、数据传输稳定，能很好地满足应届毕业生对于该Web App的需求。

关键词：jQuery Mobile；移动电子毕业纪念册；设计

中图分类号：TP316 文献标志码：A 文章编号：2095-2945（2017）27-0006-02

1 背景

随着移动互联网的迅速发展，越来越多的人在生活中使用APP。根据预测，移动网站的流量在未来几年将会超越桌面网站的流量。即使是现在，随处可以见到人们在使用移动设备来学习、购物、比价，以及在等待约会时作为消遣。移动设备如此方便，可以随意带到任何地方。因此，基于智能手机的电子纪念册设计与开发运用，恰如其分地能解决在使用纸介质时难永久保存、易破损、信息不丰富等缺点，为应届毕业生提供一个良好的纪念手段。

目前，在市场上流通的电子毕业纪念册并不多，大多都是以网站的形式存在着的。但一个美观、实用，被大家熟识的毕业纪念册网站并没有开始流行传播。此外，现在的APP大多都是基于ios及Android的Native App，它存在着开发周期长、维护成本高、跨平台麻烦的缺点。与其相比，Web App可以跨平台开发，更新维护方便。而且，当下流行的HTML5和JQM也为Web App的开发提供了许多方便。

此外，微信公众平台作为目前最火爆和最有影响力的信息传播平台，它拥有的用户量是非常庞大的。微信公众平台是由腾讯公司开发的微信产品中的一个重要功能。利用微信公众平台，我们可以进行一个简单的宣传，挖掘出用户的潜在价值，更快更好的完善我们的项目。同时，作为应届毕业生们，他们对于微信的使用也是非常频繁的。因此，在该平台上建立公众平台能够有效地吸引用户，能在同学间流行传播。

2 开发工具介绍

2.1 HTML5

HTML5是最新的HTML标准，它是由WHATWG（Web Hypertext Application Technology Group）组织和W3C（World Wide Web Consortium，万维网联盟）共同合作开发的。相对于其他版本的HTML，它在架构和网页排版美化方面的标记做了很大的改变，而且增强了互动性，有效的减少了开发成本。目前支持HTML5的浏览器包括Firefox（火狐浏览器）、IE9及更高的版本、Chrome（谷歌浏览器）等。可以说HTML5已然成了现在最火的超文本标记语言。

HTML5是HTML技术发展的未来，它提供了许多可以优化移动应用开发的手段，比如我们可以使用

、

代码中的"media"就是指特定的媒体类型，这一句是整个响应式网站实现的关键。然后在CSS文件中添加以下代码：

@media screen and （min-width：1200px）{}

@media screen and （min-width：992px）{}

@media screen and （min-width：768px）{}

@media screen and （max-width：320px）{}

代码中的min-width、max-width就是针对不同的终端设备面设定的断点。在中括号中添加具体响应式代码即可进行响应式效果的调试编写。

3.2 模拟Native App的导航效果

为了在手机屏幕有限的情况下可以实现更多的功能效果，我们使用了jQuery Mobile中的navbar控件。其可以实现与Native App类似的页眉和页尾的导航效果。首先使用标记加上已有图标或者替换成其他图标，可以将其渲染为按钮效果。之后使用属性data-position="fixed"即可将导航栏固定。除外，文字的按钮效果自带jQuery Mobile的原效果，我们可以采用data-role="none"来清除原效果，然后加上我们所预期的设置。

3.3 客户端本地存储数据

Web Storage是一种将少量数据存储在客户端磁盘的技术。只要支持Web Storage API规格的浏览器，网页设计者都能使用JavaScript来操作它。与Cookie相比，它可以存储更多的数据，而Cookie只允许每个网站存储4KB；此外Web Storage纯粹在客户端中运行，安全性比较高。