基于jQuery Mobile的ENM記事本的設計與開發(fā)

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

關鍵詞：移動web；jQuery Mobile；ENM記事

中圖分類號：TP393.09

1 jQuery Mobile技術簡介

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

2 jQuery Mobile的頁面模板

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

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

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

3 ENM記事本的設計目標

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

4 ENM記事本的主要功能

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

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

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

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

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

圖1 ENM記事本的主要模塊

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

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

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

（3）點擊記事模塊。首先遍歷“l(fā)ocalStorage”對象保存記事本數(shù)據(jù)和記事ID號，通過JSON.parse（）方法將字符內(nèi)容轉(zhuǎn)換為JSON格式對象。在遍歷過程中，以累加方式記錄各個類別下記事數(shù)據(jù)的總量，獲取對應的記事數(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）在導航欄，ENM記事本添加了一些輔助功能，比如拍照、涂鴉、定位等。拍照，是一個根據(jù)OPERA瀏覽器提供的getUserMedia-API展現(xiàn)的HTML5攝像頭，輕觸畫面可以拍照，搖動設備清除照片；涂鴉功能主要是用jQuery Mobile去偵聽HTML5中Canvas的觸摸事件，通過bind（）方法綁定畫布元素的“tap”事件，在該事件中計算畫布元素在屏幕中的坐標距離，調(diào)用觸摸事件進行繪畫等。定位主要通過百度拾取坐標系統(tǒng)獲得點位的坐標。在網(wǎng)頁的中插入百度API引用腳本。其他的管理功能主要利用jQuery Mobile中的serialize（）方法將表單中每項數(shù)據(jù)字段序列化，通過$.ajax（）方法將序列化后數(shù)據(jù)以異步的形式調(diào)給服務端。

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

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

參考文獻：

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

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

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

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

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

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