摘 要：本文主要介紹了jQuery Mobile在移動web開發(fā)中的優(yōu)勢和主要技術(shù)，并且通過一個完整的移動終端ENM記事本的開發(fā)，詳細介紹了jQuery Mobile在導(dǎo)航頁、記事本的增加刪除修改以及拍照、繪圖等實現(xiàn)過程，最后通過PhoneGap打包實現(xiàn)了跨平臺的訪問。

關(guān)鍵詞：移動web；jQuery Mobile；ENM記事

中圖分類號：TP393.09

1 jQuery Mobile技術(shù)簡介

目前，移動應(yīng)用的開發(fā)平臺總體分為三個方向，一個是收益穩(wěn)定的iOS系統(tǒng)，另一個是如其中天的Android系統(tǒng)，還有一個是蓄勢待發(fā)的Windows Phone系統(tǒng)。豐富的開發(fā)平臺增加了開發(fā)人員選擇的靈活性，但同時也帶來一個問題就是應(yīng)用平臺的兼容性。WebApp開發(fā)應(yīng)用將會成為移動開發(fā)的一個方向，但是移動設(shè)備中瀏覽器的運行環(huán)境遠比PC端復(fù)雜，因此使用原有的頁面框架遠不能解決各類型移動設(shè)備中瀏覽器的兼容性問題，必須引入其他輕量級高性能的Web頁面框架，而jQuery Mobile在眾多移動頁面開發(fā)框架中脫穎而出，成為眾多開發(fā)者的首選。jQuery Mobile為開發(fā)應(yīng)用程序提供了簡單的應(yīng)用接口。概括而言，主要具有以下特點：強大的Ajax驅(qū)動導(dǎo)航；以Jquery Mobile UI為框架核心；強大的瀏覽器兼容性；框架輕量級；支持觸摸與其他鼠標(biāo)事件；強大的主體化框架等。

2 jQuery Mobile的頁面模板

首先jQueryMobile通過Viewport的meta標(biāo)簽設(shè)定瀏覽器怎樣展示頁面的縮放等級和范圍，沒有設(shè)置時多數(shù)移動設(shè)備會默認頁面寬度900px。此外，head中還要調(diào)用相應(yīng)的文件，引入jQuery Mobile的樣式和框架文件，制作移動風(fēng)格的網(wǎng)站或營業(yè)程序。

在body標(biāo)簽內(nèi)，移動web的每一個視圖或者page都要通過data-role屬性來定義。

jQuery Mobile頁面模板主要包含以下幾個內(nèi)容塊：Header、conten和footer

3 ENM記事本的設(shè)計目標(biāo)

本文通過開發(fā)一個ENM（易弄喵）記事本管理系統(tǒng)，來實現(xiàn)跨平臺Webapp的開發(fā)。本系統(tǒng)將實現(xiàn)通過瀏覽器的方式登錄帳號進入記事本管理系統(tǒng)，實現(xiàn)用戶在生活中的隨身記，拍照，照片拼圖等功能，并且該系統(tǒng)也可以打包到應(yīng)用程序中，比如apk文件，直接運行在手機中。

4 ENM記事本的主要功能

在ENM記事本管理系統(tǒng)中，主要包括以下模塊：

（1）新手導(dǎo)航頁，以左右滑動圖片的方式顯示系統(tǒng)功能介紹，單擊進入首頁。

（2）進入首頁后，首頁展示了系統(tǒng)的主要模塊：隨筆、散文、記事、日記、便簽、管理等。首頁的下方是導(dǎo)航欄，主要包括涂鴉、拍照、定位和其他功能。

（3）進入記事模塊，主要以列表形式展示各種記事類別的信息，單擊進入某類記事列表項，可以新增記事，也可以更改記事內(nèi)容、刪除記事等。

（4）進入導(dǎo)航欄，可以看到涂鴉模塊，這個模塊可以實現(xiàn)隨手涂鴉、并且有很多顏色字體相關(guān)設(shè)置。進入拍照模塊，可以實現(xiàn)隨手拍，進入定位，可以查看自己所在位置。

圖1 ENM記事本的主要模塊

5 ENM記事本的設(shè)計與實現(xiàn)

（1）新手導(dǎo)航頁。該模塊在page容器中添加多張圖片介紹系統(tǒng)功能，當(dāng)用戶滑動圖片時，觸發(fā)綁定的滑動事件，驅(qū)使圖片向左或向右滑動，滑到最后一張圖片時，通過“l(fā)ocalStorage”對象保存查看狀態(tài)，當(dāng)用戶再次進入系統(tǒng)時，該狀態(tài)值不為空，則進入系統(tǒng)首頁，否則進入新手導(dǎo)航頁。

（2）首頁。該模塊主要用div顯示ENM記事本的功能列表，主要包括隨筆、散文、記事、日記、便簽、賬單等，首頁尾部是導(dǎo)航欄，包括涂鴉、定位、拍照等功能。

（3）點擊記事模塊。首先遍歷“l(fā)ocalStorage”對象保存記事本數(shù)據(jù)和記事ID號，通過JSON.parse（）方法將字符內(nèi)容轉(zhuǎn)換為JSON格式對象。在遍歷過程中，以累加方式記錄各個類別下記事數(shù)據(jù)的總量，獲取對應(yīng)的記事數(shù)據(jù)。通過ul列表顯示類別名稱和數(shù)據(jù)，通過collapsible實現(xiàn)記事的折疊是查看。單擊“增加”按鈕，便可進入增加記事頁，在該頁面，用戶可以選擇記事的類別，輸入記事主題和內(nèi)容后，單擊“保存”按鈕，即可實現(xiàn)一條新記事數(shù)據(jù)的增加。在編輯記事頁，以文本框的方式顯示某條記事數(shù)據(jù)的類別主題和內(nèi)容，用戶可以對這三個內(nèi)容進行修改，修改后，單擊“更新”按鈕，即可實現(xiàn)該條記事數(shù)據(jù)的更新。如果想刪除，可通過“刪除”按鈕的delegate（）方法實現(xiàn)一條記事的刪除。

（4）在導(dǎo)航欄，ENM記事本添加了一些輔助功能，比如拍照、涂鴉、定位等。拍照，是一個根據(jù)OPERA瀏覽器提供的getUserMedia-API展現(xiàn)的HTML5攝像頭，輕觸畫面可以拍照，搖動設(shè)備清除照片；涂鴉功能主要是用jQuery Mobile去偵聽HTML5中Canvas的觸摸事件，通過bind（）方法綁定畫布元素的“tap”事件，在該事件中計算畫布元素在屏幕中的坐標(biāo)距離，調(diào)用觸摸事件進行繪畫等。定位主要通過百度拾取坐標(biāo)系統(tǒng)獲得點位的坐標(biāo)。在網(wǎng)頁的中插入百度API引用腳本。其他的管理功能主要利用jQuery Mobile中的serialize（）方法將表單中每項數(shù)據(jù)字段序列化，通過$.ajax（）方法將序列化后數(shù)據(jù)以異步的形式調(diào)給服務(wù)端。

6 ENM記事本的發(fā)布

由于本記事本是跨平臺開發(fā)的系統(tǒng)，因此，只要在手機上任何一個瀏覽器都可以實現(xiàn)該系統(tǒng)的發(fā)布。此外，也可以通過PhoneGap將該記事本打包成適合于各種平臺訪問的app入口。本文已經(jīng)在Android和IOS以及Windows Phone上測試過，均可正常訪問。Jquery Mobile具有上手迅速、支持快速迭代、支持跨平臺和跨設(shè)備開發(fā)等優(yōu)點，將會成為移動web開發(fā)中UI開發(fā)的主流框架。

參考文獻：

[1]陶國榮.jQuery Mobile權(quán)威指南[M].北京：機械工業(yè)出版社，2012（08）.

[2]徐尤華，熊傳玉.jQuery Mobile1.2移動web開發(fā)方法研究[J].信息技術(shù)，2013（08）.

[3]朱赟.跨平臺移動開發(fā)技術(shù)jQuery Mobile的應(yīng)用分析[J].福建電腦，2013（07）.

作者簡介：李方方（1981.04-），女，江蘇徐州人，教師，講師，碩士，研究方向：軟件技術(shù)、移動互聯(lián)網(wǎng)開發(fā)。

作者單位：南京信息職業(yè)技術(shù)學(xué)院，南京 210043

基金項目：2013年度省級大學(xué)生創(chuàng)新項目（項目編號：201313112002Y）。