研發(fā)三部系列培訓(xùn)010-phonegaphtml5視頻初泳飛phonegaphtml

1、基于phonegap+html5的移動(dòng)端應(yīng)用解決方案介紹東華股份公司 研發(fā)三部醫(yī)院協(xié)同組 初泳飛2014/12/18 北京市海淀區(qū)東華合創(chuàng)大廈16層?xùn)|華軟件股份公司現(xiàn)在手機(jī)應(yīng)用的發(fā)展速度令人難以想象，有些實(shí)力的企業(yè)都在開(kāi)發(fā)自己的手機(jī)端應(yīng)用。目前市場(chǎng)上常用的手機(jī)開(kāi)發(fā)平臺(tái)有ios，android，symbian，Windows Phone，WebOS，BlackBerry等等，市場(chǎng)份額最大的還是ios和android，ios應(yīng)用采用Objective-C來(lái)開(kāi)發(fā)，基于C的面向?qū)ο笳Z(yǔ)言，而android是java語(yǔ)言。要開(kāi)發(fā)一個(gè)像樣的手機(jī)端應(yīng)用，無(wú)論是開(kāi)發(fā)周期，還是開(kāi)發(fā)成本，對(duì)中小企業(yè)來(lái)說(shuō)還是相對(duì)偏高

2、的。并且之后的維護(hù)，版本更新等等也會(huì)需要安排專崗，不方便采用外包的形式。phonegap可以把用html+javascript開(kāi)發(fā)的純靜態(tài)應(yīng)用打包成不同的手機(jī)端應(yīng)用，其中就包括ios，android，當(dāng)然還有Blackberry，WindowsPhone，WebOS，Symbian，基本上可以覆蓋所有的智能機(jī)。為手機(jī)應(yīng)用開(kāi)發(fā)提供了一套快捷的開(kāi)發(fā)方案。Html5+PhoneGap | 背景背景GloriaPhoneGap是什么 PhoneGap是一個(gè)用基于HTML，CSS和JavaScript的，創(chuàng)建移動(dòng)跨平臺(tái)移動(dòng)應(yīng)用程序的快速開(kāi)發(fā)框架。它使開(kāi)發(fā)者能夠利用iPhone，Android，Palm，

3、Symbian,WP7,Bada和Blackberry智能手機(jī)的核心功能包括地理定位，加速器，聯(lián)系人，聲音和振動(dòng)等，此外PhoneGap擁有豐富的插件，可以以此擴(kuò)展無(wú)限的功能。PhoneGap是免費(fèi)的，但是它需要特定平臺(tái)提供的附加軟件，例如iPhone的iPhone SDK，Android的Android SDK等，也可以和DW5.5配套開(kāi)發(fā)。使用PhoneGap只比為每個(gè)平臺(tái)分別建立應(yīng)用程序好一點(diǎn)點(diǎn)，因?yàn)殡m然基本代碼是一樣的，但是你仍然需要為每個(gè)平臺(tái)分別編譯應(yīng)用程序。 PhoneGap針對(duì)不同平臺(tái)的WebView做了擴(kuò)展和封裝，使WebView這個(gè)組件變成可訪問(wèn)設(shè)備本地API的強(qiáng)大瀏覽器，所

4、以開(kāi)發(fā)人員在PhoneGap框架下可通過(guò)JavaScript訪問(wèn)設(shè)備本地API。 WebView是什么（WebView組件實(shí)質(zhì)是移動(dòng)設(shè)備的內(nèi)置瀏覽器 WebView這個(gè)內(nèi)置瀏覽器特性是Web能被打包成本地客戶端的基礎(chǔ)，可方便的用HTML5、CSS3頁(yè)面布局，這是移動(dòng)Web技術(shù)的優(yōu)勢(shì)相對(duì)于原生開(kāi)發(fā)） 。Html5+PhoneGap | 背景Gloria標(biāo)題導(dǎo)航 | 標(biāo)題Gloria(1)可跨平臺(tái)：PhoneGap是唯一的一個(gè)支持7個(gè)平臺(tái)的開(kāi)源移動(dòng)框架（PhoneGap包括地理定位，加速器，聯(lián)系人，聲音和振動(dòng)等，此外PhoneGap擁有豐富的插件，可以以此擴(kuò)展無(wú)限的功能，幾乎Native App能

5、完成的功能他都能完成）。它的優(yōu)勢(shì)是無(wú)以倫比的：開(kāi)發(fā)成本低據(jù)估算，至多Native App的五分之一！(2)易用性，基于標(biāo)準(zhǔn)的Web開(kāi)發(fā)技術(shù) (html + css +js)(3)提供硬件訪問(wèn)控制（api）(4)可利用成熟javascript框架（JqueryMobile SenchaTouch等）(5)方便的安裝和使用優(yōu)勢(shì)標(biāo)題導(dǎo)航 | 標(biāo)題Gloria(1) PhoneGap應(yīng)用程序的運(yùn)行是寄托于移動(dòng)設(shè)備上各平臺(tái)的內(nèi)置瀏覽器webkit的，受到webkit處理速度影響，以及各個(gè)平臺(tái)的硬件與軟件的性能制約，其程序運(yùn)行的速度會(huì)比原生的程序慢、內(nèi)存消耗比原生態(tài)大些、穩(wěn)定性差一些。但是這些問(wèn)題在1-2

6、年內(nèi)都會(huì)有所緩解，因?yàn)楝F(xiàn)在的硬件的發(fā)展速度太快了。(2)還有一些底層的功能需要插件來(lái)實(shí)現(xiàn)比如（推送功能）(3)平臺(tái)差異化不同，PhoneGap應(yīng)用程序在所有平臺(tái)上運(yùn)行界面看起來(lái)都一樣。即使這個(gè)應(yīng)用程序與原生應(yīng)用很相像，但對(duì)于習(xí)慣了iOS與 Android 平臺(tái)的用戶來(lái)說(shuō)，會(huì)覺(jué)得不習(xí)慣，他們還是會(huì)很快看出差異。不足標(biāo)題導(dǎo)航 | 標(biāo)題Gloria關(guān)于前端框架 移動(dòng)設(shè)備上的前端框架目前發(fā)展非常迅速，從Phonegap Development Tool列表上就可以看出，很大一部分都是前端開(kāi)發(fā)框架?？蚣艿姆N類很多，有打包了UI實(shí)現(xiàn)的例如Sencha Touch、jQuery Mobile、jQ Touc

7、h、jQ.Mobi等，也有UI無(wú)關(guān)的例如Zepto。 jQuery Mobile的實(shí)現(xiàn)方式是在jQuery的基礎(chǔ)上寫了一套Mobile相關(guān)的代碼，例如事件、各種模擬的Native UI等。這種基于PC上的框架來(lái)實(shí)現(xiàn)移動(dòng)框架的方式，使用時(shí)還必須先引用龐大（相對(duì)于移動(dòng)設(shè)備而言）的jQuery。jQuery兼容了PC上各種瀏覽器的實(shí)現(xiàn)，而相對(duì)于移動(dòng)設(shè)備較為單一的瀏覽器環(huán)境而言是臃腫的。 jQ.Mobi則換了種方式，它針對(duì)移動(dòng)設(shè)備重寫了jQuery中最常用的部分接口（jqMobi），因此在代碼體積和效率上有更佳的表現(xiàn)，此外，在jqMobi的基礎(chǔ)上還提供了jqUi。 jQ Touch與jQ.Mobi也很

8、相似，既可以選擇jQuery，也可以選擇Zepto來(lái)作為底層腳本庫(kù)。 了解各個(gè)框架的特點(diǎn)后，就可以根據(jù)自己應(yīng)用的特性來(lái)選擇合適的框架了，如果應(yīng)用UI完全自己實(shí)現(xiàn)，頁(yè)面切換也是Single Page + 自己實(shí)現(xiàn)切換，因此基本上使用Zepto或者jqMobi就足夠了。標(biāo)題導(dǎo)航 | 標(biāo)題準(zhǔn)備：JDK1.6以上ADT（Android Development Tool）內(nèi)包含 Android sdk、eclipsenode.js（官網(wǎng)下載就行） 注：3.0以上需要安裝以上注意: 3.0以上android sdk最好下載一個(gè)4.4以上版本環(huán)境搭建Gloria標(biāo)題導(dǎo)航 | 標(biāo)題設(shè)置環(huán)境變量：設(shè)置JAVA環(huán)

9、境變量之后還需要添加如下內(nèi)容系統(tǒng)變量path后面添加D:ADTeclipsepluginsorg.apache.ant_1.8.3.v201301120609D:ADTsdkplatform-toolsD:ADTsdktools驗(yàn)證環(huán)境變量：cmd執(zhí)行java、javac、ant環(huán)境搭建Gloria標(biāo)題導(dǎo)航 | 標(biāo)題安裝phoneGap：1、安裝nodejs2、打開(kāi)cmd執(zhí)行：npm install g phoneGap/cordova3.0環(huán)境搭建Gloria標(biāo)題導(dǎo)航 | 標(biāo)題打開(kāi)CMD,CD到要存放工程的目錄執(zhí)行：/創(chuàng)建工程phonegap create hello1/創(chuàng)建工程并指定包名工

10、程名phonegap create hello com.test.hello HelloWord/切換到工程目錄 cd hello/創(chuàng)建adnroid平臺(tái)工程phonegap platform add android/編譯phonegap build/運(yùn)行phonegap run android3.0創(chuàng)建項(xiàng)目Gloria標(biāo)題導(dǎo)航 | 標(biāo)題下載2.9的包并解壓Cmd窗口cd到.phonegap-2.9.0libandroidbin執(zhí)行：create d:hello com.test.hello HelloWord2.9創(chuàng)建項(xiàng)目Gloria標(biāo)題導(dǎo)航 | 標(biāo)題當(dāng)你環(huán)境搭建完成、helloword也完

11、成后。接下來(lái)的問(wèn)題就是如何與后臺(tái)交互。 首先，PhoneGap是針對(duì)不同平臺(tái)的WebView做了擴(kuò)展和封裝，所以我們完全可以把PhoneGap生成的應(yīng)用看成一個(gè)瀏覽器。既然是瀏覽器，那么大家也可以想像的到，它的通訊方式是跟普通的BS架構(gòu)的web程序是一樣的。 唯一不同的地方是：這里所有的前端頁(yè)面元素（html、js、css、img等）都是直接存在于客戶端的，而不是訪問(wèn)服務(wù)端時(shí)響應(yīng)返回的。 因?yàn)榍岸说捻?yè)面元素存在于客戶端，那么當(dāng)我們請(qǐng)求服務(wù)端時(shí)就只需要業(yè)務(wù)數(shù)據(jù)，拿到數(shù)據(jù)后往客戶端頁(yè)面填充就可以；所以這里與服務(wù)端交互時(shí)只能采用異步的方式（AJAX），否則客戶端將會(huì)顯示服務(wù)端返回的內(nèi)容。 當(dāng)我們采用

12、AJAX方式訪問(wèn)服務(wù)端時(shí)，因?yàn)榭蛻繇?yè)面與服務(wù)端不處于同一個(gè)域，這時(shí)就會(huì)出現(xiàn)一個(gè)跨域請(qǐng)求的問(wèn)題。下邊是PhoneGap給出的解決方案。/ 支持跨域$(document).on(mobileinit, function() / support cross-domain requests 支持跨域 $.support.cors = true; $.mobile.allowCrossDomainPages = true;);后臺(tái)交互Gloria標(biāo)題導(dǎo)航 | 標(biāo)題關(guān)于服務(wù)器端向Android客戶端的推送，主要有三種方式： 1.客戶端定時(shí)去服務(wù)端取或者保持一個(gè)長(zhǎng)Socket，從本質(zhì)講這個(gè)不叫推送，這是去服

13、務(wù)端拽數(shù)據(jù)。但是實(shí)現(xiàn)簡(jiǎn)單，主要缺點(diǎn)：耗電等 2.Google的C2DM，具體不細(xì)說(shuō)，缺點(diǎn)，服務(wù)器在國(guó)外，你懂得，不是很穩(wěn)定。 3.XMPP協(xié)議，它是一種基于XML的傳遞協(xié)議，具有很強(qiáng)的靈活性和可擴(kuò)展性。它的特點(diǎn)是將復(fù)雜性從客戶端轉(zhuǎn)移到了服務(wù)器端。聽(tīng)說(shuō)GTalk、QQ、IM等都用這個(gè)協(xié)議。 這里給大家推薦的androidpn就是基于xmpp協(xié)議。聽(tīng)說(shuō)是韓國(guó)人寫的、一個(gè)很輕量的項(xiàng)目。項(xiàng)目包含服務(wù)端跟客戶端兩部分。當(dāng)然都是JAVA寫的哈。 服務(wù)端網(wǎng)上有tomcat+spring+struts2版本。所以如果想的話，完全可以把服務(wù)端當(dāng)做一個(gè)組件集成到自己的工程（當(dāng)然了，前提是你的工程是javaweb）

14、，即使你不使用spring、struts2。 如果只是使用的話，網(wǎng)上教程還挺多的，這里就不寫了，下邊有幾個(gè)鏈接。貼個(gè)鏈接： Android下推送方案（androidpn）GloriaIOS推送只有一種方法。通過(guò)蘋果服務(wù)推標(biāo)題導(dǎo)航 | 標(biāo)題 JavaScript的速度雖然在近些年提高了100倍，其速度還是無(wú)法和原生代碼相比。在編寫復(fù)雜的業(yè)務(wù)邏輯時(shí)JavaScript顯得力不從心。那么PhoneGap有沒(méi)有辦法解決這個(gè)問(wèn)題呢？答案是肯定的。PhoneGap平臺(tái)提供了插件功能，開(kāi)發(fā)者可以將重量級(jí)的功能封裝在原生代碼開(kāi)發(fā)的插件中，并將接口暴露給JavaScript，JavaScript在調(diào)用插件功能時(shí)

15、都是非阻塞的，所以并不影響JavaScript層的性能。 我們用了androidpn實(shí)現(xiàn)了推送。那我們是不是可以寫個(gè)插件控制推送開(kāi)關(guān)？是3.0以上版本 官方插件地址： 示例：phonegap plugin add com.example.hello.abcphoneGap官方文檔： PhoneGap插件Gloria標(biāo)題導(dǎo)航 | 標(biāo)題PhoneGap2.9插件實(shí)例Gloria編寫插件后臺(tái)代碼package org.apache.cordova.plugin;import org.apache.cordova.api.CallbackContext;import org.apache.cordov

16、a.api.CordovaPlugin;import org.json.JSONArray;import org.json.JSONException;/* This class echoes a string called from JavaScript. */public class Echo extends CordovaPlugin Overridepublic boolean execute(String action, JSONArray args,CallbackContext callbackContext) throws JSONException if (action.eq

17、uals(echo) String message = args.getString(0);this.echo(message, callbackContext);return true;return false;private void echo(String message, CallbackContext callbackContext) if (message != null & message.length() 0) callbackContext.success(message); else callbackContext.error(Expected one non-empty string argument.);標(biāo)題導(dǎo)航 | 標(biāo)題PhoneGap2.9插件實(shí)例Gloria添加config.xml插件配置標(biāo)題導(dǎo)航 | 標(biāo)題編寫前端JS代碼win