摘 要 介紹一種快速開發(fā)移動學習APP的方法，其中包括使用jQuery Mobile框架實現(xiàn)UI的設(shè)計，使用HTML5技術(shù)及其

Web Storage實現(xiàn)數(shù)據(jù)存儲，以及使用PhoneGap編譯成Native

App等。

關(guān)鍵詞 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 引言

隨著信息技術(shù)和通信技術(shù)的快速發(fā)展，智能手機的普及率已經(jīng)非常高，這為移動學習的實現(xiàn)提供了至關(guān)重要的前提條件。但是，在當前的數(shù)字化學習資源開發(fā)方面，針對移動學習而開發(fā)的資源卻較少。因此，如何為智能手機開發(fā)數(shù)字化學習資源，為移動學習者創(chuàng)設(shè)高效、靈活、可隨時隨地進行學習的資源和環(huán)境，是一個亟待解決的問題。

目前，手機平臺大多是基于iOS和Android兩種系統(tǒng)的，支持的APP（應(yīng)用程序）可分為Native App和Web App兩種。

Native App可安裝在手機上，并且可以訪問手機硬件（如話筒、攝像頭等）。iOS的Native App使用Objective-

C語言進行開發(fā)，Android的Native App則使用Java語言進行開發(fā)。Native App移植到不同平臺較為麻煩，并且開發(fā)難度也較大。

Web App就是一個Web網(wǎng)站，它基于智能手機屏幕的特點，對呈現(xiàn)的內(nèi)容進行優(yōu)化。它使用相關(guān)的Web技術(shù)進行開發(fā)，無須安裝在手機上，具有較好的跨平臺性。

而基于HTML5和jQuery Mobile等技術(shù)，使得Web App的開發(fā)變得更加容易，并且還能實現(xiàn)一些原本只有Native App才能實現(xiàn)的功能，比如本地數(shù)據(jù)的存儲、音視頻播放等功能；還實現(xiàn)了較多的交互性，使移動學習資源的開發(fā)變得更加快捷、方便。

2 系統(tǒng)分析與設(shè)計

智能手機作為移動學習的工具，其學習內(nèi)容呈現(xiàn)的方式與知覺特征就顯得尤為重要。因為考慮到移動學習的及時性、碎片性的特征，這就要求智能手機應(yīng)能精煉突出地顯示學習內(nèi)容，有效地促進學習者的認知。因此，本APP在設(shè)計學習內(nèi)容時，使每個頁面的學習內(nèi)容即為一個較為完整的知識點，并用精煉的語言、直觀的圖片和短小精悍的視頻來進行展示，對每個頁面持續(xù)的學習時間被控制在10分鐘以內(nèi)。在系統(tǒng)設(shè)計上也力求簡潔高效，并利用Web Storage對系統(tǒng)數(shù)據(jù)進行本地存儲，加快了瀏覽的速度。另外，考慮到通信網(wǎng)絡(luò)的不穩(wěn)定性，為了便于學習者在離線情況下也能進行學習，本APP使用PhoneGap開發(fā)框架，將Web App編譯成Native App，從而可以將APP安裝在手機上，便于離線瀏覽。

本APP主要有3個功能模塊。

1）目錄導(dǎo)航，呈現(xiàn)了學習內(nèi)容的目錄頁，方便學習者快速選擇學習內(nèi)容。

2）內(nèi)容呈現(xiàn)，該頁面用于顯示學習內(nèi)容，并嵌入一些簡單圖片和簡短視頻，學習內(nèi)容力求精練，每個頁面（知識點）的學習時間控制在10分鐘以內(nèi)。另外，在此頁面中還提供了筆記功能，方便學習者隨時記錄學習心得。

3）自我測試，此頁面主要用于呈現(xiàn)一些測試題，移動學習者利用此功能可以進行自我測試，提交答案后立即呈現(xiàn)正確答案和解析內(nèi)容，便于及時發(fā)現(xiàn)自己的不足，查漏補缺，適當調(diào)整學習策略。

3 關(guān)鍵技術(shù)介紹

HTML5介紹 HTML5是HTML標準的第五個版本，也是最新的版本，它在2014年10月由W3C（萬維網(wǎng)聯(lián)盟）發(fā)布。它提供了新的對富媒體的有效支持，如支持網(wǎng)頁端的Audio、Video等多媒體功能；還支持Web App的開發(fā)，實現(xiàn)了豐富的網(wǎng)頁交互功能和跨平臺性，實現(xiàn)了數(shù)據(jù)的本地存儲，提升了瀏覽的速度，增強了用戶體驗。

jQuery Mobile介紹 jQuery Mobile是一個基于jQuery框架的UI框架，它所提供的UI界面非常有利于在手機上點擊、觸摸、瀏覽，具有較好的跨平臺性，利用它開發(fā)的Web App能夠在多種移動平臺上運行。它還支持HTML、XML文本對象模型的操作、事件的處理，利用Ajax和服務(wù)器進行交互等。最重要的是它是免費的。

PhoneGap介紹 PhoneGap是一個用基于HTML、CSS和JavaScript的創(chuàng)建跨平臺移動應(yīng)用程序的快速開發(fā)平臺。利用它將Web App編譯成Native App時，需要特定平臺提供的附加軟件，如iPhone的IOS SDK，Android的Android SDK等。Web App的基本代碼是一樣的，但是還需要為每個平臺分別編譯應(yīng)用程序。

4 開發(fā)與實現(xiàn)

加入viewport meta標簽 不同的移動瀏覽器，默認的頁面寬度是不同的。因此，必須對呈現(xiàn)的內(nèi)容進行格式化，以便在手機屏幕上合理顯示。這就得在HTML文檔的head標簽里加入一個viewport meta標簽，讓移動瀏覽器知道顯示屏幕的大小。并設(shè)置一個標簽，指定如果屏幕最大寬度為480像素，就調(diào)用android.css樣式文件進行顯示。相關(guān)代碼如下：

引入jQuery Mobile等相關(guān)文件 jQuery Mobile框架的應(yīng)用，需要在HTML頁面頁眉中導(dǎo)入其組件，包括jQuery庫、jQuery Mobile CSS、jQuery Mobile庫，這些組件都可以從網(wǎng)上下載，然后將其放置于網(wǎng)頁相應(yīng)目錄下。另外，還下載了jquery.toastmessage相關(guān)文件放置于網(wǎng)頁目錄下，以便在網(wǎng)頁中制作Toast效果，以及導(dǎo)入自己編寫的JavaScript文件my.js。最后，在HTML頁面的標簽中導(dǎo)入以上這些組件的文件。

在開發(fā)過程中充分利用HTML5和jQuery Mobile框架中的data-*屬性，設(shè)計易于在手機屏幕上點擊、觸摸的外觀，帶來良好的用戶體驗。如：

使用Web數(shù)據(jù)存儲（Web Storage） Web數(shù)據(jù)存儲是HTML5中用于在網(wǎng)頁客戶端存儲數(shù)據(jù)的方法，有兩種形式：localStorage（本地存儲）和 sessionStorage（會話存儲）。它們有點兒類似于cookies，允許使用JavaScript設(shè)置“鍵值對”，并保存在客戶端中，支持跨多個頁面重新加載。HTML5還內(nèi)置了一個Web SQL數(shù)據(jù)庫，它為開發(fā)者提供了一個操作簡單但是功能強大的JavaScript數(shù)據(jù)庫API，用于把數(shù)據(jù)存儲在本地的SQLite數(shù)據(jù)庫中。開發(fā)者可以使用標準的SQL語言創(chuàng)建表，并能對表進行增、刪、改、查操作。本APP主要用Web SQL數(shù)據(jù)庫存儲閱讀筆記。

相關(guān)代碼如下：

//創(chuàng)建Note數(shù)據(jù)庫

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′”定義了數(shù)據(jù)庫文件名稱為Note，“version = ′1.0′”為版本號，“displayName = ′Note′”為數(shù)據(jù)庫顯示的名稱，“maxSize = 65536”表示數(shù)據(jù)庫文件的最大值，單位為kb。設(shè)置好這些參數(shù)后就調(diào)用openDatabase方法，并存儲這個連接在db變量中，如果這個數(shù)據(jù)庫不存在，就創(chuàng)建數(shù)據(jù)庫。調(diào)用db對象的事務(wù)（transaction）方法，傳遞一個事務(wù)對象（transaction object）給function函數(shù)，調(diào)用該事務(wù)對象的executeSql方法執(zhí)行SQL語句。這里是創(chuàng)建一個表（CREATE TABLE），如果notes這個數(shù)據(jù)庫不存在（IF NOT EXISTS notes），就創(chuàng)建它。創(chuàng)建好數(shù)據(jù)庫以后，就可以用相應(yīng)的SQL語句對數(shù)據(jù)庫內(nèi)容進行操作。

使用PhoneGap編譯成Native App 使用PhoneGap將Web App編譯成Native App，從而可以將APP安裝在手機上，便于學習者離線瀏覽學習內(nèi)容。在此以生成Android平臺的APP為例進行簡要介紹。首先，下載Android SDK并進行安裝；其次，下載Android PhoneGap并安裝，配置相關(guān)環(huán)境變量；再次，創(chuàng)建一個Android手機模擬器；最后，利用PhoneGap輸入相關(guān)命令，將Web App編譯成一個Native

Android App。

5 系統(tǒng)測試

本APP名為“C語言程序設(shè)計”學習APP。對于Web App利用Google Chrome瀏覽器的開發(fā)者工具，進入設(shè)備瀏覽模式進行測試，在多數(shù)移動設(shè)備上都能正常運行，操作起來也很方便，能較好滿足學習者的需求。圖1顯示了相關(guān)頁面在Chrome瀏覽器iPhone5模式下的運行結(jié)果。

另外，對于使用PhoneGap編譯好的Native Android App，可以將生成的*.apk文件安裝在Android平臺的手機上運行，經(jīng)過測試，也運行良好。

6 總結(jié)

本文通過介紹一種使用HTML5及jQuery Mobile開發(fā)移動學習APP的方法，其中移動設(shè)備的識別方案、UI設(shè)計、內(nèi)容呈現(xiàn)和一些交互功能主要使用HTML5和jQuery Mobile框架來實現(xiàn)，數(shù)據(jù)存儲使用HTML5的Web Storage，并使用PhoneGap將Web App編譯成Native App。相信隨著HTML5 等移動開發(fā)技術(shù)的快速發(fā)展，會有更多的人參與移動學習資源的開發(fā)，為學習型社會的創(chuàng)建貢獻自己的一份力。

參考文獻

[1]陳文沛，何皓怡.構(gòu)建基于關(guān)聯(lián)主義的計算機文化基礎(chǔ)研究性學習系統(tǒng)[J].中國教育技術(shù)裝備，2013（36）：19-21.

[2]何皓怡.基于JavaME和JavaEE的手機移動學習系統(tǒng)的設(shè)計與實現(xiàn)[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研究與實現(xiàn)[J].信息通信，2014（5）：84-85.