基于HTML5和jQueryMobile的移動學(xué)習(xí)APP設(shè)計(jì)與實(shí)現(xiàn)

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

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

App等。

關(guān)鍵詞 HTML5；jQuery Mobile；移動學(xué)習(xí)；APP

中圖分類號：G652 文獻(xiàn)標(biāo)識碼：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ī)的普及率已經(jīng)非常高，這為移動學(xué)習(xí)的實(shí)現(xiàn)提供了至關(guān)重要的前提條件。但是，在當(dāng)前的數(shù)字化學(xué)習(xí)資源開發(fā)方面，針對移動學(xué)習(xí)而開發(fā)的資源卻較少。因此，如何為智能手機(jī)開發(fā)數(shù)字化學(xué)習(xí)資源，為移動學(xué)習(xí)者創(chuàng)設(shè)高效、靈活、可隨時(shí)隨地進(jìn)行學(xué)習(xí)的資源和環(huán)境，是一個(gè)亟待解決的問題。

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

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

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

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

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

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

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

本APP主要有3個(gè)功能模塊。

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

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

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

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

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

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

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

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

加入viewport meta標(biāo)簽 不同的移動瀏覽器，默認(rèn)的頁面寬度是不同的。因此，必須對呈現(xiàn)的內(nèi)容進(jìn)行格式化，以便在手機(jī)屏幕上合理顯示。這就得在HTML文檔的head標(biāo)簽里加入一個(gè)viewport meta標(biāo)簽，讓移動瀏覽器知道顯示屏幕的大小。并設(shè)置一個(gè)標(biāo)簽，指定如果屏幕最大寬度為480像素，就調(diào)用android.css樣式文件進(jìn)行顯示。相關(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頁面的標(biāo)簽中導(dǎo)入以上這些組件的文件。

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

使用Web數(shù)據(jù)存儲（Web Storage） Web數(shù)據(jù)存儲是HTML5中用于在網(wǎng)頁客戶端存儲數(shù)據(jù)的方法，有兩種形式：localStorage（本地存儲）和 sessionStorage（會話存儲）。它們有點(diǎn)兒類似于cookies，允許使用JavaScript設(shè)置“鍵值對”，并保存在客戶端中，支持跨多個(gè)頁面重新加載。HTML5還內(nèi)置了一個(gè)Web SQL數(shù)據(jù)庫，它為開發(fā)者提供了一個(gè)操作簡單但是功能強(qiáng)大的JavaScript數(shù)據(jù)庫API，用于把數(shù)據(jù)存儲在本地的SQLite數(shù)據(jù)庫中。開發(fā)者可以使用標(biāo)準(zhǔn)的SQL語言創(chuàng)建表，并能對表進(jìn)行增、刪、改、查操作。本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方法，并存儲這個(gè)連接在db變量中，如果這個(gè)數(shù)據(jù)庫不存在，就創(chuàng)建數(shù)據(jù)庫。調(diào)用db對象的事務(wù)（transaction）方法，傳遞一個(gè)事務(wù)對象（transaction object）給function函數(shù)，調(diào)用該事務(wù)對象的executeSql方法執(zhí)行SQL語句。這里是創(chuàng)建一個(gè)表（CREATE TABLE），如果notes這個(gè)數(shù)據(jù)庫不存在（IF NOT EXISTS notes），就創(chuàng)建它。創(chuàng)建好數(shù)據(jù)庫以后，就可以用相應(yīng)的SQL語句對數(shù)據(jù)庫內(nèi)容進(jìn)行操作。

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

Android App。

5 系統(tǒng)測試

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

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

6 總結(jié)

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

參考文獻(xiàn)

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

[2]何皓怡.基于JavaME和JavaEE的手機(jī)移動學(xué)習(xí)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].南寧：廣西師范學(xué)院，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的移動學(xué)習(xí)平臺Web App研究與實(shí)現(xiàn)[J].信息通信，2014（5）：84-85.