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

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

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

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

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

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

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

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

8、相似，既可以選擇jQuery，也可以選擇Zepto來作為底層腳本庫。 了解各個框架的特點后，就可以根據(jù)自己應(yīng)用的特性來選擇合適的框架了，如果應(yīng)用UI完全自己實現(xiàn)，頁面切換也是Single Page + 自己實現(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最好下載一個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驗證環(huán)境變量：cmd執(zhí)行java、javac、ant環(huán)境搭建Gloria標(biāo)題導(dǎo)航 | 標(biāo)題安裝phoneGap：1、安裝nodejs2、打開cmd執(zhí)行：npm install g phoneGap/cordova3.0環(huán)境搭建Gloria標(biāo)題導(dǎo)航 | 標(biāo)題打開CMD,CD到要存放工程的目錄執(zhí)行：/創(chuàng)建工程phonegap create hello1/創(chuàng)建工程并指定包名工

10、程名phonegap create hello com.test.hello HelloWord/切換到工程目錄 cd hello/創(chuàng)建adnroid平臺工程phonegap platform add android/編譯phonegap build/運行phonegap run android3.0創(chuà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)建項目Gloria標(biāo)題導(dǎo)航 | 標(biāo)題當(dāng)你環(huán)境搭建完成、helloword也完

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

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

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

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

15、都是非阻塞的，所以并不影響JavaScript層的性能。 我們用了androidpn實現(xiàn)了推送。那我們是不是可以寫個插件控制推送開關(guān)？是3.0以上版本 官方插件地址： 示例：phonegap plugin add com.example.hello.abcphoneGap官方文檔： PhoneGap插件Gloria標(biāo)題導(dǎo)航 | 標(biāo)題PhoneGap2.9插件實例Gloria編寫插件后臺代碼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插件實例Gloria添加config.xml插件配置標(biāo)題導(dǎo)航 | 標(biāo)題編寫前端JS代碼win