基于HTML5和jQueryMobile的移动学习APP设计与实现

摘 要 介绍一种快速开发移动学习APP的方法，其中包括使用jQuery Mobile框架实现UI的设计，使用HTML5技术及其

Web Storage实现数据存储，以及使用PhoneGap编译成Native

App等。

关键词 HTML5；jQuery Mobile；移动学习；APP

中图分类号：G652 文献标识码：B

文章编号：1671-489X（2017）04-0028-03

Abstract This paper introduces a method of fast development of m-

learning APP， including using jQuery mobile framework to achieve the design of UI， using HTML5 technology and Web Storage to achieve data storage， and using Phone Gap compile to Native App etc.

Key words HTML5；jQuery Mobile；m-learning；APP

1 引言

随着信息技术和通信技术的快速发展，智能手机的普及率已经非常高，这为移动学习的实现提供了至关重要的前提条件。但是，在当前的数字化学习资源开发方面，针对移动学习而开发的资源却较少。因此，如何为智能手机开发数字化学习资源，为移动学习者创设高效、灵活、可随时随地进行学习的资源和环境，是一个亟待解决的问题。

目前，手机平台大多是基于iOS和Android两种系统的，支持的APP（应用程序）可分为Native App和Web App两种。

Native App可安装在手机上，并且可以访问手机硬件（如话筒、摄像头等）。iOS的Native App使用Objective-

C语言进行开发，Android的Native App则使用Java语言进行开发。Native App移植到不同平台较为麻烦，并且开发难度也较大。

Web App就是一个Web网站，它基于智能手机屏幕的特点，对呈现的内容进行优化。它使用相关的Web技术进行开发，无须安装在手机上，具有较好的跨平台性。

而基于HTML5和jQuery Mobile等技术，使得Web App的开发变得更加容易，并且还能实现一些原本只有Native App才能实现的功能，比如本地数据的存储、音视频播放等功能；还实现了较多的交互性，使移动学习资源的开发变得更加快捷、方便。

2 系统分析与设计

智能手机作为移动学习的工具，其学习内容呈现的方式与知觉特征就显得尤为重要。因为考虑到移动学习的及时性、碎片性的特征，这就要求智能手机应能精炼突出地显示学习内容，有效地促进学习者的认知。因此，本APP在设计学习内容时，使每个页面的学习内容即为一个较为完整的知识点，并用精炼的语言、直观的图片和短小精悍的视频来进行展示，对每个页面持续的学习时间被控制在10分钟以内。在系统设计上也力求简洁高效，并利用Web Storage对系统数据进行本地存储，加快了浏览的速度。另外，考虑到通信网络的不稳定性，为了便于学习者在离线情况下也能進行学习，本APP使用PhoneGap开发框架，将Web App编译成Native App，从而可以将APP安装在手机上，便于离线浏览。

本APP主要有3个功能模块。

1）目录导航，呈现了学习内容的目录页，方便学习者快速选择学习内容。

2）内容呈现，该页面用于显示学习内容，并嵌入一些简单图片和简短视频，学习内容力求精练，每个页面（知识点）的学习时间控制在10分钟以内。另外，在此页面中还提供了笔记功能，方便学习者随时记录学习心得。

3）自我测试，此页面主要用于呈现一些测试题，移动学习者利用此功能可以进行自我测试，提交答案后立即呈现正确答案和解析内容，便于及时发现自己的不足，查漏补缺，适当调整学习策略。

3 关键技术介绍

HTML5介绍 HTML5是HTML标准的第五个版本，也是最新的版本，它在2014年10月由W3C（万维网联盟）发布。它提供了新的对富媒体的有效支持，如支持网页端的Audio、Video等多媒体功能；还支持Web App的开发，实现了丰富的网页交互功能和跨平台性，实现了数据的本地存储，提升了浏览的速度，增强了用户体验。

jQuery Mobile介绍 jQuery Mobile是一个基于jQuery框架的UI框架，它所提供的UI界面非常有利于在手机上点击、触摸、浏览，具有较好的跨平台性，利用它开发的Web App能够在多种移动平台上运行。它还支持HTML、XML文本对象模型的操作、事件的处理，利用Ajax和服务器进行交互等。最重要的是它是免费的。

PhoneGap介绍 PhoneGap是一个用基于HTML、CSS和JavaScript的创建跨平台移动应用程序的快速开发平台。利用它将Web App编译成Native App时，需要特定平台提供的附加软件，如iPhone的IOS SDK，Android的Android SDK等。Web App的基本代码是一样的，但是还需要为每个平台分别编译应用程序。

4 开发与实现

加入viewport meta标签 不同的移动浏览器，默认的页面宽度是不同的。因此，必须对呈现的内容进行格式化，以便在手机屏幕上合理显示。这就得在HTML文档的head标签里加入一个viewport meta标签，让移动浏览器知道显示屏幕的大小。并设置一个标签，指定如果屏幕最大宽度为480像素，就调用android.css样式文件进行显示。相关代码如下：

引入jQuery Mobile等相關文件 jQuery Mobile框架的应用，需要在HTML页面页眉中导入其组件，包括jQuery库、jQuery Mobile CSS、jQuery Mobile库，这些组件都可以从网上下载，然后将其放置于网页相应目录下。另外，还下载了jquery.toastmessage相关文件放置于网页目录下，以便在网页中制作Toast效果，以及导入自己编写的JavaScript文件my.js。最后，在HTML页面的标签中导入以上这些组件的文件。

在开发过程中充分利用HTML5和jQuery Mobile框架中的data-*属性，设计易于在手机屏幕上点击、触摸的外观，带来良好的用户体验。如：

…

…

…

…

返回

使用Web数据存储（Web Storage） Web数据存储是HTML5中用于在网页客户端存储数据的方法，有两种形式：localStorage（本地存储）和 sessionStorage（会话存储）。它们有点儿类似于cookies，允许使用JavaScript设置“键值对”，并保存在客户端中，支持跨多个页面重新加载。HTML5还内置了一个Web SQL数据库，它为开发者提供了一个操作简单但是功能强大的JavaScript数据库API，用于把数据存储在本地的SQLite数据库中。开发者可以使用标准的SQL语言创建表，并能对表进行增、删、改、查操作。本APP主要用Web SQL数据库存储阅读笔记。

相关代码如下：

//创建Note数据库

var shortName = ′Note′；

var version = ′1.0′；

var displayName = ′Note′；

var maxSize = 65536；

db = openDatabase（shortName， version， displayName， maxSize）；

db.transaction（

function（transaction） {

transaction.executeSql（

′CREATE TABLE IF NOT EXISTS notes′ +

′（id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT， ′ +

′ chapter TEXT NOT NULL， content TEXT NOT NULL ）；′

）；

}

）；

以上代码中，“shortName = ′Note′”定义了数据库文件名称为Note，“version = ′1.0′”为版本号，“displayName = ′Note′”为数据库显示的名称，“maxSize = 65536”表示数据库文件的最大值，单位为kb。设置好这些参数后就调用openDatabase方法，并存储这个连接在db变量中，如果这个数据库不存在，就创建数据库。调用db对象的事务（transaction）方法，传递一个事务对象（transaction object）给function函数，调用该事务对象的executeSql方法执行SQL语句。这里是创建一个表（CREATE TABLE），如果notes这个数据库不存在（IF NOT EXISTS notes），就创建它。创建好数据库以后，就可以用相应的SQL语句对数据库内容进行操作。

使用PhoneGap编译成Native App 使用PhoneGap将Web App编译成Native App，从而可以将APP安装在手机上，便于学习者离线浏览学习内容。在此以生成Android平台的APP为例进行简要介绍。首先，下载Android SDK并进行安装；其次，下载Android PhoneGap并安装，配置相关环境变量；再次，创建一个Android手机模拟器；最后，利用PhoneGap输入相关命令，将Web App编译成一个Native

Android App。

5 系统测试

本APP名为“C语言程序设计”学习APP。对于Web App利用Google Chrome浏览器的开发者工具，进入设备浏览模式进行测试，在多数移动设备上都能正常运行，操作起来也很方便，能较好满足学习者的需求。图1显示了相关页面在Chrome浏览器iPhone5模式下的运行结果。

另外，对于使用PhoneGap编译好的Native Android App，可以将生成的*.apk文件安装在Android平台的手机上运行，经过测试，也运行良好。

6 总结

本文通过介绍一种使用HTML5及jQuery Mobile开发移动学习APP的方法，其中移动设备的识别方案、UI设计、内容呈现和一些交互功能主要使用HTML5和jQuery Mobile框架来实现，数据存储使用HTML5的Web Storage，并使用PhoneGap将Web App编译成Native App。相信随着HTML5 等移动开发技术的快速发展，会有更多的人参与移动学习资源的开发，为学习型社会的创建贡献自己的一份力。

参考文献

[1]陈文沛，何皓怡.构建基于关联主义的计算机文化基础研究性学习系统[J].中国教育技术装备，2013（36）：19-21.

[2]何皓怡.基于JavaME和JavaEE的手机移动学习系统的设计与实现[D].南宁：广西师范学院，2011.

[3]HTML5[DB/OL].http：//baike.baidu.com/view/951383.htm.

[4]jQuery Mobile[DB/OL].http：//baike.baidu.com/view/63

11070.htm.

[5]PhoneGap[DB/OL].http：//baike.baidu.com/view/4157600.htm.

[6]Stark J. Building Android Apps with HTML， CSS， and Java

Script[M].USA： OReilly Media，2010.

[7]李海峰.基于HTML5+jQuery Mobile的移动学习平台Web App研究与实现[J].信息通信，2014（5）：84-85.