林XX_1001012XXX_畢業(yè)設(shè)計(jì)(格式規(guī)范模版)(共30頁)

1、 畢 業(yè) 設(shè) 計(jì)中文題目微眾生活：基于phonegap的跨平臺LBS移動(dòng)應(yīng)用開發(fā)與實(shí)現(xiàn)英文題目Development and Implementation of Cross-platform LBS Mobile Application NamedVLife Based on Phonegap 院 系：商學(xué)院年級專業(yè)：201X級電子商務(wù)姓 名：林XX學(xué) 號：1001012XXX指導(dǎo)教師：XXX職 稱：XX20XX 年 XX 月 XX 日畢業(yè)設(shè)計(jì)(b y sh j)誠信聲明書本人(bnrn)鄭重聲明：在畢業(yè)設(shè)計(jì)(b y sh j)工作中嚴(yán)格遵守學(xué)校有關(guān)規(guī)定，恪守學(xué)術(shù)規(guī)范；我所提交的畢業(yè)設(shè)計(jì)是本人

2、在 XXX 指導(dǎo)教師的指導(dǎo)下獨(dú)立研究、撰寫的成果，設(shè)計(jì)中所引用他人的文字、研究成果，均已在設(shè)計(jì)中加以說明；在本人的畢業(yè)設(shè)計(jì)中未剽竊、抄襲他人的學(xué)術(shù)觀點(diǎn)、思想和成果，未篡改實(shí)驗(yàn)數(shù)據(jù)。本設(shè)計(jì)和資料若有不實(shí)之處，本人愿承擔(dān)一切相關(guān)責(zé)任。學(xué)生簽名： 20XX 年 XX 月 XX 日III微眾生活(shnghu)：基于(jy)phonegap的跨平臺LBS移動(dòng)應(yīng)用(yngyng)開發(fā)與實(shí)現(xiàn)摘 要目前流行的移動(dòng)操作系統(tǒng)種類較多，為了使移動(dòng)應(yīng)用能夠覆蓋更多用戶群體，需要針對各個(gè)操作平臺分別開發(fā)軟件，不可避免地導(dǎo)致高成本的開發(fā)、運(yùn)營與維護(hù)?？缙脚_移動(dòng)應(yīng)用開發(fā)技術(shù)能夠有效解決這方面的問題。本文基于HTML5、p

3、honegap等跨平臺移動(dòng)開發(fā)技術(shù)，結(jié)合jQuery mobile和百度地圖API等Javascript框架，設(shè)計(jì)開發(fā)“微眾生活”手機(jī)應(yīng)用。該應(yīng)用主要為用戶提供周邊生活服務(wù)搜索、公共交通與自駕路線查詢等功能。本文還對多種跨平臺開發(fā)技術(shù)進(jìn)行對比分析，總結(jié)這些技術(shù)的優(yōu)缺點(diǎn)，并記錄應(yīng)用開發(fā)過程中的技術(shù)難點(diǎn)，以期對今后的應(yīng)用開發(fā)提供借鑒。關(guān)鍵詞HTML5；phonegap；移動(dòng)應(yīng)用；跨平臺；移動(dòng)商務(wù)Development and Implementation of Cross- platform LBSMobile Application Named VLife Based on PhonegapAb

4、stract：There are many kinds of popular operating system at present, so the enterprises have to develop several versions of one application for all platforms to cover more customers, which inevitably issues in higher cost of development, operation and maintenance. Cross-platform mobile application de

5、velopment is a good consideration for these problems. In this research we design and develop a mobile application named Vlife based on cross-platform mobile development technologies like HTML5 and phonegap combining with jQuery mobile and Baidu Map Javascript framework. This application mainly provi

6、des local service search, public transit inquiry and driving route show function. Also, we make some analyses and comparisons of the above mentioned technologies, and summarize the advantages and shortages of them in this paper. I really wished that the difficult point recorded can be of some use fo

7、r reference to the latest researches.Keywords：HTML5; Phonegap; mobile application; cross-platform; M-Commerce目錄(ml) TOC o 1-2 h z u HYPERLINK l _Toc388209675 一、研究背景(bijng)及意義 一、研究背景(bijng)及意義（一）研究(ynji)背景艾瑞咨詢(zxn)統(tǒng)計(jì)數(shù)據(jù)顯示，2013年第三季度中國移動(dòng)購物市場交易規(guī)模達(dá)433.4億元，同比增速141.9%，環(huán)比增速15.5%，高于同期網(wǎng)絡(luò)購物市場整體增速。移動(dòng)商務(wù)的高速發(fā)展，很大程度

8、上得益于近年來智能移動(dòng)終端數(shù)量的迅速增長。移動(dòng)終端的便攜性和隨時(shí)隨地的移動(dòng)網(wǎng)絡(luò)接入能力使得人們能夠充分利用零碎時(shí)間進(jìn)行網(wǎng)購。而大部分移動(dòng)網(wǎng)絡(luò)購物行為都是通過移動(dòng)應(yīng)用進(jìn)行的，移動(dòng)應(yīng)用成為開展移動(dòng)商務(wù)的重要媒體，越來越多的企業(yè)投入移動(dòng)APP的運(yùn)營。由于移動(dòng)終端設(shè)備的差異性，運(yùn)行于不同移動(dòng)操作系統(tǒng)上的應(yīng)用相互之間無法通用。企業(yè)如果希望覆蓋更多的用戶群體，并且保證同一款應(yīng)用在不同操作系統(tǒng)上的用戶體驗(yàn)一致，就必須針對各個(gè)平臺分別開發(fā)一套軟件，這必然導(dǎo)致開發(fā)成本過高、周期太長等問題，后期維護(hù)也十分麻煩。對于移動(dòng)開發(fā)人員來說，如果要學(xué)習(xí)不同操作平臺的軟件開發(fā)，必須分別學(xué)習(xí)各平臺的原生開發(fā)語言，比如安卓開發(fā)需

9、要學(xué)習(xí)Java，iOS應(yīng)用開發(fā)需要學(xué)習(xí)Objective C，Windows Phone應(yīng)用的開發(fā)更要學(xué)習(xí)XAML、LINQ，以及C#或VB，學(xué)習(xí)成本較高。對于研發(fā)來說造成經(jīng)濟(jì)及時(shí)間的浪費(fèi)，降低了開發(fā)效率。這種狀況不僅跟互聯(lián)網(wǎng)的開放理念相背離，也對應(yīng)用開發(fā)商造成了現(xiàn)實(shí)的困擾1。（二）研究意義跨平臺移動(dòng)應(yīng)用開發(fā)技術(shù)是前述問題較為有效的解決方案?？缙脚_應(yīng)用只需開發(fā)一次，就可以在多種移動(dòng)操作系統(tǒng)上使用，有效降低了開發(fā)成本，其應(yīng)用前景十分廣闊。百度、淘寶、街旁和國外的維基百科、Daily Cost等應(yīng)用都采用過此技術(shù)。但此技術(shù)目前尚未成熟，仍存在許多缺陷。本文結(jié)合“微眾生活”手機(jī)項(xiàng)目的開發(fā)過程，對跨平

10、臺開發(fā)技術(shù)存在的問題進(jìn)行一定的總結(jié)，并提出相應(yīng)的建議，為跨平臺開發(fā)技術(shù)的發(fā)展進(jìn)行有益的實(shí)踐。二、相關(guān)技術(shù)體系（一）跨平臺移動(dòng)(ydng)應(yīng)用(yngyng)跨平臺移動(dòng)應(yīng)用(yngyng)主要可以分為兩大體系，即Web App和Hybrid App。1. Web AppWeb App使用HTML、CSS和Javascript開發(fā)，用戶通過瀏覽器訪問的方式直接打開應(yīng)用，其實(shí)質(zhì)就是一個(gè)專為移動(dòng)端設(shè)計(jì)的網(wǎng)站。Web App的維護(hù)非常容易，無需像原生應(yīng)用那樣重新發(fā)布安裝包，而是直接更新云端服務(wù)器上的文件來更新應(yīng)用。但其缺點(diǎn)也十分明顯，由于網(wǎng)頁對本地硬件設(shè)備的調(diào)用能力極其微弱，無法使用攝像頭、重力感應(yīng)之類

11、的硬件功能，使得Web App無法滿足很多需求。2. Hybrid AppHybrid App（混合應(yīng)用程序）介于Web App與Native App（原生應(yīng)用）兩者之間?；旌弦苿?dòng)應(yīng)用開發(fā)與Web應(yīng)用不同的是，無需啟動(dòng)瀏覽器來使用應(yīng)用，會(huì)有啟動(dòng)應(yīng)用的圖標(biāo)，以及通過Javascript APIs盡一切所能地訪問特定平臺的本地功能2。開發(fā)者可以使用熟悉的語言，如WEB語言進(jìn)行開發(fā)，無需學(xué)習(xí)一門新的語言。不同操作系統(tǒng)的底層功能被封裝為統(tǒng)一的Javascript接口進(jìn)行調(diào)用。開發(fā)者將應(yīng)用編寫為WEB文件并通過跨平臺開發(fā)工具打包生成各平臺的Native App，實(shí)現(xiàn)“Write once,run any

12、where”。嚴(yán)格地講，Hybrid App的實(shí)質(zhì)還是一個(gè)Web App，但已經(jīng)能夠調(diào)用底層功能，如重力感應(yīng)、攝像頭、陀螺儀和通訊錄等。使用Hybrid App的開發(fā)方案也并非一勞永逸，作為一種新興技術(shù)，它還有很多缺陷。首先在性能方面，因?yàn)槟_本語言的運(yùn)行效率較低、內(nèi)存管理能力較差，Hybrid App的響應(yīng)速度遠(yuǎn)遠(yuǎn)不如原生應(yīng)用。其次，由于Hybrid App與生俱來的使命就是提供跨平臺的解決方案，所以它必然要面對更多的分辨率規(guī)格，而跨平臺開發(fā)框架本身還沒有針對此問題的解決方法。再者，移動(dòng)互聯(lián)網(wǎng)應(yīng)用開發(fā)通常需要充分調(diào)用終端的硬件能力，但由于HTML5標(biāo)準(zhǔn)還未完成制定，因而各種移動(dòng)終端瀏覽器對HT

13、ML5支持程度還有很大差別，無法保證良好的跨平臺硬件能力調(diào)用3。（二）HTML5作為(zuwi)HTML的下一個(gè)(y )修訂版本，HTML5正以驚人的速度發(fā)展和推廣(tugung)。目前，各大主要瀏覽器廠商，包括Google Chrome、微軟IE、Mozilla Firefox、蘋果Safari和Opera，都在不斷地針對HTML5標(biāo)準(zhǔn)修改自身的發(fā)展策略，以期在此方面取得領(lǐng)先。HTML5之所以受到這樣的重視并非出于偶然，而是憑借自身的一系列革命性創(chuàng)新：1.簡潔的語法HTML5充分體現(xiàn)了“Write less,do more”的編程思想。對于使用傳統(tǒng)的HTML 4.01編寫的網(wǎng)頁，要實(shí)現(xiàn)多種表

14、單驗(yàn)證規(guī)則、文本框獲得焦點(diǎn)、語音搜索等功能，必須書寫大量的腳本代碼。而在HTML5中，很多功能使用一行代碼甚至一個(gè)屬性就能實(shí)現(xiàn)，大大降低了代碼的復(fù)雜性，同時(shí)也避免了無謂的重復(fù)制造輪子（Reinvent the Wheel）。另外，HTML5使用語義化（Semantics）標(biāo)簽代替?zhèn)鹘y(tǒng)的無意義的DIV標(biāo)簽。例如對一個(gè)WEB文檔結(jié)構(gòu)的描述，在HTML 4.01和HTML5中的表達(dá)如圖1所示。顯然，HTML5的標(biāo)簽對更加豐富，文檔結(jié)構(gòu)表達(dá)也更清楚，有利于代碼的維護(hù)。圖1 WEB文檔結(jié)構(gòu)的表達(dá)2.統(tǒng)一的標(biāo)準(zhǔn)傳統(tǒng)(chuntng)WEB開發(fā)(kif)的最難之處在于兼容各瀏覽器內(nèi)核的標(biāo)準(zhǔn)。Chrome和S

15、afari使用(shyng)的是Webkit內(nèi)核，IE使用的是Trident內(nèi)核，F(xiàn)irefox和Opera使用的又是不同的內(nèi)核。不僅如此，同一瀏覽器的不同版本也頗有差異，如IE6、IE7、IE8和IE9+對CSS和JS的解釋就各有不同。另外，即使是使用同一種內(nèi)核進(jìn)行外殼擴(kuò)展的瀏覽器，如360瀏覽器和獵豹瀏覽器，也會(huì)出現(xiàn)一些腳本無法正常工作的情況。所以在開發(fā)過程中，往往需要為解決兼容性的問題耗費(fèi)大量的時(shí)間和精力。HTML5的出現(xiàn)，意味著這種局面將有可能結(jié)束。作為下一代Web 技術(shù)標(biāo)準(zhǔn)，HTML5標(biāo)準(zhǔn)定義的規(guī)范非常廣泛，目前，已經(jīng)在移動(dòng)瀏覽器中得到支持4。一旦基于HTML5的統(tǒng)一標(biāo)準(zhǔn)制定，必將使

16、得瀏覽器市場標(biāo)準(zhǔn)混亂的局面大為改觀。3.多媒體支持目前，WEB上的富互聯(lián)網(wǎng)應(yīng)用（Rich Internet Applications），包括多媒體和游戲，主要都是依賴于瀏覽器插件，如Adobe Flash和微軟的Silverlight。HTML5的出現(xiàn)將使得瀏覽器對插件的依賴程度降低。HTML5本身提供了標(biāo)準(zhǔn)的視頻和音頻接口，無需安裝插件，就可以播放多媒體資源，甚至可以操控文件的時(shí)間軸數(shù)據(jù)和視頻中的字幕。4.豐富的API支持HTML5擁有更有效的服務(wù)器推送技術(shù)，Server-Sent Event和WebSockets就是其中的兩個(gè)特性，這兩個(gè)特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)推送到客戶端的功能5

17、，從而使得基于WEB的消息推送和實(shí)時(shí)應(yīng)用成為可能。它還支持本地文件的拖拽和讀寫以及離線存儲(chǔ)（Offline Storage）功能，推動(dòng)了Web App由Online到Offline的轉(zhuǎn)變。此外，HTML5還提供地理定位功能。通常設(shè)備可使用的定位技術(shù)主要有: IP地址、GPS、WiFi 及手機(jī)基站等, 各種技術(shù)的定位精度也各不相同。HTML5 Geolocation不指定設(shè)備使用哪種底層技術(shù)定位, 因此只要設(shè)備支持這幾種定位技術(shù)之一,就都可以使用HTML5 Geolocation 6。5.視覺表現(xiàn)能力HTML5本身(bnshn)具有強(qiáng)大的圖形繪制功能，再結(jié)合(jih)使用CSS3，就可以(ky)

18、制作出非常華麗的視覺效果，并且無需像過去一樣，通過書寫大量的腳本來控制樣式。隨著移動(dòng)設(shè)備GPU硬件加速的普及，CSS3的3D動(dòng)畫將會(huì)漸漸普及，甚至完全取代2D變換。6.向后兼容性HTML5所宣稱的立場是“非革命性發(fā)展”，也就是說，它并非完全顛覆傳統(tǒng)的WEB標(biāo)準(zhǔn)。HTML 4.01的大部分標(biāo)準(zhǔn)遷移到HTML5中兼容性仍然很高，被刪除的多為不便管理的標(biāo)簽，如、等，完全可以通過CSS來替代，且更符合“結(jié)構(gòu)-樣式-行為”相分離的原則。（三）PhonegapHybrid App有許多開發(fā)框架，比較著名的有RhoMobile、Phonegap、Titanium和Adobe Air等。這些框架各有優(yōu)劣，采用

19、哪個(gè)框架進(jìn)行開發(fā)要視具體情況而定，本次研究使用的是Phonegap框架。1. Phonegap的特點(diǎn)（1）支持的操作系統(tǒng)眾多Phonegap支持多達(dá)七種操作系統(tǒng)，涵蓋了目前最流行的iOS、Android、Windows Phone、黑莓、塞班等，各系統(tǒng)的多數(shù)硬件資源也均能調(diào)用，圖2為Phonegap對各移動(dòng)操作系統(tǒng)的支持情況：圖2 Phonegap支持(zhch)的操作系統(tǒng)（資料(zlio)來源：Phonegap官方網(wǎng)站. Supported FeaturesEB/OL. 2014-1-5. /about/feature/）（2）沒有(mi yu)獨(dú)立的集成開發(fā)環(huán)境Phonegap沒有獨(dú)立的I

20、DE（Intergrated Development Environment），它通過插件的形式與成熟的IDE協(xié)調(diào)工作。很難界定這是一個(gè)優(yōu)點(diǎn)還是缺點(diǎn)，筆者認(rèn)為對此沒有強(qiáng)加認(rèn)定的必要。應(yīng)該說，它給予開發(fā)者更多選擇的空間，開發(fā)人員可以選擇熟悉的工作環(huán)境，如Eclipse、Xcode、Visual Studio甚至Dreamweaver進(jìn)行開發(fā)。但這種方式也有缺陷，它不能夠像RhoMobile那樣將開發(fā)到部署的整個(gè)流程集成在一個(gè)環(huán)境內(nèi)完成，配置多個(gè)IDE比較耗時(shí)，對初學(xué)者有一定難度。（3）使用WEB語言開發(fā)借助Phonegap，開發(fā)者可以使用WEB技術(shù)開發(fā)基于抽象的跨平臺應(yīng)用程序并將代碼包裝為原生應(yīng)

21、用以訪問系統(tǒng)架構(gòu)7。相比其他框架而言，Phonegap的學(xué)習(xí)門檻較低。如RhoMobile需要使用Ruby語言，Adobe Air要求掌握ActionScript等多種語言，如果沒有相應(yīng)語言的使用經(jīng)驗(yàn)，就無法使用該工具。而Phonegap采用HTML、CSS和Javascript語言進(jìn)行應(yīng)用開發(fā)，普及度高，入門容易，相對簡單。另外，如果應(yīng)用界面不足，PhoneGap也提供使用者自行擴(kuò)充的接口（Plugin），以取得更多的應(yīng)用資源8。2. Phonegap的原理Phonegap的工作原理其實(shí)并不復(fù)雜。由于各移動(dòng)操作平臺一般都會(huì)提供WebView控件，Phonegap充分利用這一點(diǎn)，針對不同平臺的

22、WebView做了擴(kuò)展和封裝，WebView這個(gè)組件變成可訪問設(shè)備本地API的強(qiáng)大瀏覽器，所以開發(fā)人員在PhoneGap框架下可通過Javascript訪問設(shè)備本地API9。開發(fā)者只需使用WEB語言編寫出應(yīng)用界面和業(yè)務(wù)邏輯，再通過Phonegap提供的接口對硬件功能進(jìn)行調(diào)用，就可以開發(fā)出接近原生應(yīng)用的程序了。Phonegap的原理如圖3所示。圖3 Phonegap原理(yunl)示意圖（資料(zlio)來源：Hi Putto. 淺析PhoneGap工作(gngzu)原理及其改進(jìn)EB/OL. 2014-1-6. /post/2013-08-05/40052779683）3. Phonegap的缺

23、點(diǎn)Phonegap的缺點(diǎn)主要表現(xiàn)在性能方面。首先，作為腳本語言，Javascript的運(yùn)行效率不如移動(dòng)操作系統(tǒng)的原生編程語言，不論是基于虛擬機(jī)的Java和C#、VB，還是效率接近C語言的Objective C都是如此。其次，Javascript內(nèi)存管理的能力又要遜于原生語言，所以在進(jìn)行快速操作的時(shí)候，應(yīng)用響應(yīng)遲緩的問題會(huì)表現(xiàn)得尤為明顯。（四）jQuery Mobile使用Phonegap開發(fā)程序還有一大優(yōu)勢，就是可以在移動(dòng)應(yīng)用開發(fā)上繼續(xù)使用jQuery這類開源JS框架。不過，還有專門針對移動(dòng)平臺設(shè)計(jì)的更加輕量的Javascript框架，如Sencha Touch、jQTouch和jQuery

24、Mobile等。其中jQuery Mobile可以認(rèn)為是jQuery在移動(dòng)平臺上的延續(xù)，其設(shè)計(jì)的主要目的是盡可能使開發(fā)的移動(dòng)應(yīng)用看起來更像本地應(yīng)用，在樣式展現(xiàn)上做了很多改進(jìn)10。對眾多熟悉jQuery框架的開發(fā)者來說，使用jQuery Mobile更容易掌握，學(xué)習(xí)成本較低，可以快速制作出iOS風(fēng)格的界面。但jQuery Mobile也有缺陷，比如當(dāng)開發(fā)者需要根據(jù)自身的界面需求完全自定義界面時(shí)，jQuery Mobile預(yù)定義的格式反而會(huì)成為嚴(yán)重的干擾因素。（五）百度(bi d)地圖Javascript API由于(yuy)本次研究制作的是LBS類型(lixng)應(yīng)用，需要使用地圖框架。百度地圖

25、為開發(fā)者提供了Javascript版本，可用于跨平臺LBS手機(jī)應(yīng)用的開發(fā)。相對Google地圖而言，百度地圖API是后起之秀，性能和穩(wěn)定性等各方面較遜于Google地圖，但由于百度地圖專注于中國大陸本土地圖的信息服務(wù)，其商業(yè)信息較為豐富，所以本次研究選擇使用百度地圖協(xié)助開發(fā)。三、手機(jī)應(yīng)用分析與設(shè)計(jì)（一）需求分析1.功能需求本次研究制作的手機(jī)應(yīng)用名為微眾生活，是一款為用戶提供本地周邊生活服務(wù)快捷查詢的手機(jī)小程序?！拔ⅰ弊謴?qiáng)調(diào)其小巧，沒有華而不實(shí)的功能，“眾”字表明這是一款適合廣大手機(jī)用戶使用的APP。此應(yīng)用主要實(shí)現(xiàn)兩個(gè)功能：（1）查詢周邊商家服務(wù)。對用戶所在的地理位置和城市進(jìn)行定位，根據(jù)用戶所選

26、擇的服務(wù)分類或自定義關(guān)鍵字，搜索周邊地區(qū)提供該類產(chǎn)品的商家，對商家的詳情和地圖位置進(jìn)行展示，并提供前往該處的交通路線方案；（2）提供公共交通出行方案的搜索、公交路線的查詢，出租車費(fèi)用查詢和私人駕車的路線導(dǎo)航。2.用戶界面需求微眾生活手機(jī)應(yīng)用的界面采用以咖啡色為主的暖色調(diào)進(jìn)行渲染，營造一種溫馨的效果。應(yīng)用程序的圖標(biāo)設(shè)計(jì)為一只可愛的小狗，因?yàn)槿愑蟹浅ｌ`敏的嗅覺，代表著微眾生活能夠像犬類一樣，靈敏地捕捉到周邊地區(qū)的服務(wù)信息。溫馨和可愛的感覺可以在應(yīng)用使用之初就給用戶留下比較好的印象，對提升應(yīng)用的體驗(yàn)有潛在的效果。3.兼容性需求中國(zhn u)互聯(lián)網(wǎng)消費(fèi)調(diào)研中心數(shù)據(jù)(shj)表明，2013年第三季

27、度，安卓已占據(jù)(zhnj)全球智能手機(jī)市場81.9%的份額，iOS則占據(jù)了12.1%的份額。因此本次制作的手機(jī)應(yīng)用以兼容這兩種操作系統(tǒng)為主。由于安卓的開放性更好，首先在Android SDK環(huán)境下進(jìn)行開發(fā)和調(diào)試，再針對iOS平臺進(jìn)行編譯。（1）安卓系統(tǒng)如圖4所示，根據(jù)Google官方發(fā)布的數(shù)據(jù)顯示，目前仍有大量用戶在使用Android 2.2+的版本，所以安卓版本的開發(fā)選擇2.2版本對應(yīng)的API 8作為目標(biāo)版本，以期兼容更多安卓設(shè)備，包括原生系統(tǒng)和較為流行的ROM。圖4 安卓各版本占整體份額（資料來源：36氪. Jelly Bean在Android各版本系統(tǒng)中所占份額已突破至40.5%EB/O

28、L. 2014-1-7. /p/205144.html）（2）iOS系統(tǒng)應(yīng)做到兼容iOS 5.0以上設(shè)備，即iPhone4、iPhone4s和iPhone5設(shè)備。（3）分辨率兼容為兼容移動(dòng)智能終端主流分辨率，包括854*480、800*400、960*540、960*640等，此應(yīng)用進(jìn)行界面設(shè)計(jì)時(shí)，界面元素的CSS屬性取值單位都應(yīng)使用相對大小，即%或em，這種做法也更符合自適應(yīng)網(wǎng)頁設(shè)計(jì)（Responsive Web Design）的思想。4.性能需求對于程序(chngx)中較為耗時(shí)的操作，如定位(dngwi)操作，應(yīng)用程序會(huì)將相關(guān)的數(shù)據(jù)(shj)進(jìn)行緩存，避免重復(fù)發(fā)送相同的網(wǎng)絡(luò)請求，減少網(wǎng)絡(luò)的

29、流量和設(shè)備電源的消耗。優(yōu)美的界面以保障性能為前提。因?yàn)槭褂肞honegap創(chuàng)建的應(yīng)用較容易出現(xiàn)卡頓現(xiàn)象，而且有些轉(zhuǎn)場效果在低版本的安卓設(shè)備上無法得到支持，所以建議將華而不實(shí)的轉(zhuǎn)場動(dòng)畫去掉，保證應(yīng)用的運(yùn)行盡可能流暢。（二）開發(fā)方案1.應(yīng)用程序結(jié)構(gòu)圖5 微眾生活應(yīng)用結(jié)構(gòu)圖2.開發(fā)輔助工具工欲善其事，必先利其器。由于Android SDK實(shí)際上是基于Eclipse環(huán)境，可以充分利用Eclipse良好的擴(kuò)展性，安裝Aptana和Emmet插件，這兩種插件可以幫助WEB開發(fā)者快速書寫HTML代碼。必要時(shí)還可以使用專門的編輯器，如Sublime Text，進(jìn)行輔助開發(fā)。四、應(yīng)用程序具體實(shí)現(xiàn)（一）應(yīng)用界面設(shè)

30、計(jì)1.歡迎畫面應(yīng)用啟動(dòng)后，首先顯示歡迎畫面，然后再過渡到主界面。歡迎畫面的實(shí)現(xiàn)有兩種思路，一種是根據(jù)各操作系統(tǒng)的規(guī)則進(jìn)行配置(pizh)，另一種是使用Javascript進(jìn)行頁面跳轉(zhuǎn)。后者更符合跨平臺設(shè)計(jì)的思想(sxing)，實(shí)現(xiàn)起來也比較(bjio)容易，所以采用后種方式。圖6為歡迎畫面的示意圖。圖6 應(yīng)用程序歡迎畫面這一步實(shí)現(xiàn)的要點(diǎn)是：將程序的圖標(biāo)logo和文字logo等信息集成在一張PNG格式的圖片上，背景設(shè)為透明。在程序首頁面index.html中將圖片插入，然后設(shè)置img標(biāo)簽的CSS，使其相對整個(gè)屏幕居中：#welcomeImgwidth: 70%;position: absolut

31、e;margin: auto;top: 0; right: 0; bottom: 0; left: 0;值得注意的是，為了讓圖片能夠自動(dòng)適應(yīng)不同(b tn)分辨率的設(shè)備而不出現(xiàn)長寬比例失調(diào)，應(yīng)對寬度(kund)使用%而非px為單位(dnwi)進(jìn)行設(shè)置，并且不能對height屬性進(jìn)行設(shè)置，保證其能夠按比例自動(dòng)縮放調(diào)整。然后對文檔設(shè)置背景色：.uibackground: #DDC4A6;.ui是jQuery Mobile提供的CSS類，它默認(rèn)為頁面中的每個(gè)page元素添加淺灰色背景。傳統(tǒng)的WEB設(shè)計(jì)中對body元素設(shè)置背景色的做法在此無法達(dá)到預(yù)期的效果，因此建議對.ui的background屬性值

32、進(jìn)行修改，并且讓所有HTML文件共享此設(shè)置。最后，為了讓應(yīng)用程序在歡迎畫面停留一段時(shí)間，然后自動(dòng)跳轉(zhuǎn)，使用Javascript實(shí)現(xiàn)：setTimeout(location.href=search.html,1000);2.應(yīng)用程序主界面應(yīng)用程序主界面如圖7所示。圖7 應(yīng)用程序主界面應(yīng)用程序主界面大致分為三部分，即header、content和footer。header頭部區(qū)塊包含應(yīng)用的文字logo、兩個(gè)文本框和一個(gè)查詢按鈕。content主體區(qū)塊包含常用的九大類生活服務(wù)，點(diǎn)擊相應(yīng)的圖標(biāo)可以進(jìn)行快捷查詢，省去輸入文字的步驟。footer底部區(qū)塊用于在“周邊服務(wù)”和“交通路線”兩個(gè)模塊之間進(jìn)行切換

33、。搜索(su su)內(nèi)容文本框中的“我要搜”提示字樣(zyng)是通過為input元素設(shè)置(shzh)一個(gè)placeholder屬性實(shí)現(xiàn)的，此屬性是HTML5中新增的，這個(gè)功能在傳統(tǒng)的WEB設(shè)計(jì)中都是需要用腳本來實(shí)現(xiàn)的。另外，由于jQuery Mobile默認(rèn)對文本框應(yīng)用了樣式，為保證文本框的高度不會(huì)超過區(qū)塊的高度，進(jìn)而打亂布局，應(yīng)將input元素的CSS屬性line-height的值設(shè)為100%。3.搜索結(jié)果頁面此頁面用于展示與搜索關(guān)鍵字相匹配的商家列表，并提供一個(gè)查看多個(gè)商家集中地圖展示的按鈕。圖8是搜索結(jié)果頁面的示意圖。圖8 搜索結(jié)果頁面此界面左上角和右上角的圖標(biāo)，以及結(jié)果列表中的每一項(xiàng)

34、，均設(shè)置了單擊時(shí)出現(xiàn)淺灰色背景的效果，其中的訣竅是，可以使用CSS中的:active偽類來實(shí)現(xiàn)。如果通過Javascript來實(shí)現(xiàn)，代碼量會(huì)比較大，不利于維護(hù)。4.商家(shn ji)詳情頁此頁面用于展示商家的詳細(xì)信息。目前，百度(bi d)地圖API能夠(nnggu)提供的有商家名稱、地址、地理坐標(biāo)（經(jīng)過加密的GPS坐標(biāo)）、電話號碼等信息。圖9為商家詳情頁面示意圖。圖9 商家詳情頁面此處的電話號碼點(diǎn)擊時(shí)可跳轉(zhuǎn)到手機(jī)的電話撥號界面，這是使用HTML5中a標(biāo)簽href屬性值的新增類型“tel”實(shí)現(xiàn)的。另外正如前文所述，由于Phonegap應(yīng)用的實(shí)質(zhì)是一個(gè)經(jīng)過包裝的Web App，應(yīng)用其實(shí)是在一個(gè)

35、WebView容器中展現(xiàn)的，為了防止用戶通過長按文本的方式直接將文本內(nèi)容復(fù)制，破壞原生應(yīng)用體驗(yàn)感，還應(yīng)在CSS中設(shè)置：body-webkit-user-select:none;5.全屏地圖頁面由于(yuy)百度地圖不支持(zhch)在一個(gè)(y )HTML頁面中實(shí)例化兩個(gè)全局的Map類型對象，所以本應(yīng)用的“周邊服務(wù)” 模塊中涉及全屏地圖展示的各個(gè)部分均共享同一個(gè)Map實(shí)例。這樣做可以避免創(chuàng)建重復(fù)的對象，節(jié)省內(nèi)存資源，但是代碼設(shè)計(jì)的復(fù)雜度會(huì)比較高。圖10為全屏地圖展示頁面示意圖。圖10全屏地圖頁面此應(yīng)用設(shè)計(jì)的目標(biāo)是兼容多種操作系統(tǒng)，必須考慮到?jīng)]有返回鍵的蘋果設(shè)備，所以筆者為每個(gè)頁面都添加了返回按鈕

36、。但此頁面返回按鈕的實(shí)現(xiàn)比較特殊，由于地圖實(shí)例化在一個(gè)充滿整個(gè)屏幕的容器中，無法像其他頁面那樣添加一個(gè)普通的返回按鈕。于是改用一個(gè)懸浮于地圖上方，位置固定的返回圖標(biāo)。另外，因?yàn)榘俣鹊貓D本身可能涉及較多層的對象，因此建議將返回按鈕的z-index值設(shè)置為一個(gè)較大的值。.mapbackheight: 2em;position: absolute;top: 1em;left: 1em;z-index: 100;6.公交(n jio)出行頁面此頁面用于提供公交出行(chxng)方案的檢索，圖11為此(wi c)頁面的示意圖。圖11 公交出行頁面7.駕車導(dǎo)航頁面此頁面提供出租車費(fèi)用參考信息和跳轉(zhuǎn)到自駕路

37、線地圖展示頁面的鏈接。圖12為此頁面的示意圖。8.公交線路查詢頁面此頁面用于提供公共交通線路查詢服務(wù)，圖13為此頁面的示意圖。 圖12 駕車導(dǎo)航(dohng)頁面 圖13公交線路查詢(chxn)頁面（二）功能模塊代碼(di m)實(shí)現(xiàn)1.定位功能由于百度地圖自身使用的坐標(biāo)并非真正的GPS坐標(biāo)，而是經(jīng)過特殊算法加密的，為了便于使用后續(xù)的服務(wù)，免去坐標(biāo)轉(zhuǎn)換的麻煩，直接使用百度地圖提供的API進(jìn)行定位，而不使用Phonegap提供的定位功能：function locate () var localcity=new BMap.LocalCity(); localcity.get(function(r)

38、if (r!=null) if (=全國) alert(無法定位您所在的城市，請開啟GPS或輸入城市名。); $(#city).val(.substr(0,2); city=; ); var geolocation=new BMap.Geolocation(); geolocation.getCurrentPosition(function(r) if (r!=null) point=r.point; );此方法(fngf)中實(shí)例化了BMap.LocalCity類和BMap.Geolocation類，分別用于獲取用戶所在的城市和用戶的地理坐標(biāo)（百度地圖表示法，下文(xiwn)默認(rèn)）。2.周邊服

39、務(wù)搜索(su su)功能需要實(shí)例化百度地圖的BMap.LocalSearch類，其構(gòu)造函數(shù)的第一個(gè)參數(shù)可為地理坐標(biāo)、城市名稱或map對象，第二個(gè)參數(shù)包含一系列可選參數(shù)，通過對象字面量形式表示，以下是周邊服務(wù)搜索功能的核心方法：function doSearch(keyword,center)rpois=; /全局變量，用于保存當(dāng)前頁搜索結(jié)果 localSearch=new BMap.LocalSearch(center, onSearchComplete:function(r) /指定回調(diào)函數(shù) if (r!=null) if ($(#resultlist).is(:empty) /如果是第一頁

40、結(jié)果 var rcount=r.getNumPois(); $(#rtitle).text(keyword+(+rcount+個(gè)結(jié)果); currentpage=0; $.mobile.changePage(#resultpage); else $(.end).remove(); searchResult=r; centerpoi=null; loadList(r); /將搜索結(jié)果添加到結(jié)果列表容器 );$(#resultlist).empty(); localSearch.searchNearby(keyword,center,5000); /調(diào)用搜索(su su)方法BMap.LocalS

41、earch類的關(guān)鍵(gunjin)之處在于其工作(gngzu)模式。實(shí)例化該類時(shí)通過設(shè)置“onSearchComplete”的值指定回調(diào)函數(shù)，調(diào)用搜索方法后回調(diào)函數(shù)以參數(shù)的形式獲得搜索結(jié)果。此時(shí)可以通過遍歷結(jié)果集的方式訪問搜索結(jié)果第一頁的內(nèi)容。后續(xù)頁的搜索結(jié)果需要通過gotoPage()方法來取得。但每次調(diào)用gotoPage()方法，回調(diào)函數(shù)都會(huì)自動(dòng)啟用，所以必需在回調(diào)函數(shù)中加入相關(guān)的選擇結(jié)構(gòu)。3.無刷新自動(dòng)加載功能這是目前WEB設(shè)計(jì)中最為廣泛采用的功能之一。當(dāng)頁面滾動(dòng)至底部時(shí)，通過AJAX的方式自動(dòng)獲取更多數(shù)據(jù)，并加載到DOM中。本應(yīng)用通過監(jiān)聽 scrollstop事件，在用戶滾動(dòng)列表至到達(dá)

42、結(jié)尾時(shí)，自動(dòng)獲取下一頁搜索結(jié)果。此處的關(guān)鍵問題是，當(dāng)用戶滑動(dòng)過快時(shí)，將會(huì)導(dǎo)致多個(gè)scrollstop事件連續(xù)觸發(fā)，從而導(dǎo)致同一頁結(jié)果被多次加載的錯(cuò)誤。解決的思路是通過設(shè)置全局變量currentpage記錄當(dāng)前加載頁的頁碼，然后在scrollstop事件綁定的過程中對currentpage變量進(jìn)行自增長，并與保存搜索結(jié)果的變量進(jìn)行比較。由于多個(gè)scrollstop事件連續(xù)觸發(fā)的場合，畢竟存在先后之分，第一次觸發(fā)時(shí)，借助currentpage變量設(shè)置的條件相當(dāng)于被鎖定了，從而可以避免重復(fù)加載的錯(cuò)誤。以下是相關(guān)代碼：$(#resultlist).on(scrollstop,function () v

43、ar st=$(window).scrollTop();scrtop=st;var wh=$(window).height();var bh=$(#resultpage).height();if (st+wh=bh-100&st!=0) nextPage(););function nextPage () if (searchResult.getPageIndex()=currentpage) if (searchResult.getPageIndex()searchResult.getNumPages()-1) $(#resultlist).append($(玩命(wn mn)加載中 );lo

44、calSearch.gotoPage(searchResult.getPageIndex()+1);elseif(!($(#resultlist).is(:has(.end)$(#resultlist).append($(沒有(mi yu)更多結(jié)果了);currentpage+;4.全屏地圖(dt)展示功能涉及到BMap.Map類對象，必須對其生命周期十分了解，否則往往會(huì)導(dǎo)致地圖無法正常使用的現(xiàn)象，然而百度地圖官方API文檔卻未對此進(jìn)行強(qiáng)調(diào)。首先，由于多個(gè)模塊共享一個(gè)map，應(yīng)將其聲明為全局變量。其次，map對象初始化的時(shí)機(jī)非常重要。建議使用下列語句對map對象完成初始化：$(document

45、).ready(function()map=new BMap.Map(mapcontainer););這樣做的優(yōu)勢是：$(document).ready()函數(shù)內(nèi)的代碼在DOM加載完畢后執(zhí)行，地圖容器已準(zhǔn)備就緒，保證map對象能夠正常初始化。其次，$(document).ready()函數(shù)內(nèi)的代碼在網(wǎng)頁上的內(nèi)容（包括圖片等）加載完畢前執(zhí)行，有利于加快執(zhí)行速度。再者，將map對象的初始化語句放置于此，可與其他腳本共同管理，避免產(chǎn)生零碎的代碼。最后，map對象生命周期中還有很重要的一環(huán)，就是centerAndZoom()方法調(diào)用的時(shí)機(jī)。該方法用于設(shè)置地圖的顯示中心和縮放級別。由于使用了jQuery

46、 Mobile框架，同一個(gè)WEB文檔中存在多個(gè)page元素，應(yīng)在地圖容器所在的page顯示之后調(diào)用centerAndZoom()方法，否則會(huì)出現(xiàn)地圖中心偏移至視野之外的錯(cuò)誤。所以建議在地圖容器所在的page元素綁定的“pageshow”事件過程中調(diào)用centerAndZoom()方法：$(document).on(pageshow,#mappage,function() / map.centerAndZoom(point,14););雖然百度地圖提供的各種搜索服務(wù)均可以通過(tnggu)設(shè)置自動(dòng)將搜索結(jié)果添加到map對象上，但是這種做法(zuf)缺乏靈活性，實(shí)際開發(fā)(kif)中往往需要自行添加

47、地圖覆蓋物，所以應(yīng)該將添加地圖標(biāo)注和交通路線的功能寫成兩個(gè)方法以供調(diào)用，提高代碼的復(fù)用率和可維護(hù)性：function addMarker (map,point,opts,info,autoSelect) var marker=new BMap.Marker(point,opts);map.addOverlay(marker);marker.addEventListener(click,function () this.openInfoWindow(new BMap.InfoWindow(info););if (autoSelect) marker.openInfoWindow(new BMap

48、.InfoWindow(info);function drawLines (index,map) map.clearOverlays();var plan=transitResult.getPlan(index);for(var i=0;i0) map.addOverlay(new BMap.Polyline(walk.getPath(),strokeColor:green);/5.緩存地理位置功能由于定位通常(tngchng)需要花費(fèi)數(shù)秒的時(shí)間，為了(wi le)減少網(wǎng)絡(luò)流量和等待時(shí)間，將應(yīng)用(yngyng)設(shè)置為啟動(dòng)時(shí)更新地理位置，然后將坐標(biāo)緩存到本地。當(dāng)切換到其他頁面時(shí)，首先讀取本地緩存

49、的信息，在沒有讀取到相關(guān)信息的情況下才進(jìn)行重新定位。此功能使用HTML5的localStorage對象實(shí)現(xiàn)：if (point!=null) localStorage.setItem(lng,point.lng); /存儲(chǔ)經(jīng)度數(shù)值localStorage.setItem(lat,point.lat); /存儲(chǔ)緯度數(shù)值相應(yīng)的，讀取本地存儲(chǔ)信息的代碼為：var lng=localStorage.getItem(lng); /讀取經(jīng)度數(shù)值var lat=localStorage.getItem(lat); /讀取緯度數(shù)值值得注意的是，由于localStorage.setItem()方法只能以鍵值對（

50、key-value）形式存儲(chǔ)字符串值，應(yīng)將經(jīng)緯度數(shù)值分別存儲(chǔ)，否則將出現(xiàn)無法正確讀取保存值的問題。6.其他功能公交出行方案、駕車路線展示、出租車費(fèi)用估算和公交路線查詢功能雖然也都是本應(yīng)用的重要功能，但相比于前述功能而言，涉及的技術(shù)難點(diǎn)較少。限于篇幅，此處就不再贅述。（三）Xcode環(huán)境下的開發(fā)Android環(huán)境下的開發(fā)完成之后，其他平臺上的開發(fā)相對而言便較為容易。Xcode環(huán)境下的開發(fā)步驟如下：1.從Phonegap的官方網(wǎng)站上下載并安裝Phonegap。2.打開命令行模式，進(jìn)入Phonegap iOS文件夾，執(zhí)行命令：./create /Documents/ CordovaXY/XXX com.wz.Vlife Vlife創(chuàng)建一個(gè)iOS項(xiàng)目文件，并使用Xcode打開項(xiàng)目文件。3.項(xiàng)目目錄下的www文件夾即用于存儲(chǔ)開發(fā)的WEB文件和圖片等資源。將Android項(xiàng)目目錄下的www文件夾中的文件復(fù)制至此處。然后使用Xcode對項(xiàng)目進(jìn)行編譯即可。4.其他平臺版本的開發(fā)流程也類似。但可能需要針對各平臺的特點(diǎn)進(jìn)行少許配置。