基于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.