sencha touch 擴充篇之將sencha touch打包成安裝程式（下）- 使用phonegap打包安裝程式

標籤：android   style   class   blog   code   http   

　     這講我們來講解下如何使用phonegapa建立項目環境並通過她們將sencha touch打包成app，這裡我們只講解打包android的apk，打包ios的過程有點類似，但是需要在mac環境下，最後通過xcode匯出成ipa安裝程式；

　　

　　一、phonegap環境搭建:

　　phonegap從3.0開始已經不再使用手動的方式搭建項目了，而是使用command-line命令列工具來搭建項目環境，並且外掛程式引入的機制也在3.0做了調整，採用了模組化的方式，即需要什麼功能模組就通過命令列工具來安裝對應的模組，而不是像3.0之前的那樣架包包含了所有功能，這樣，phonegap的項目體積就得了一定的縮減，項目載入的速度也就得到了一定的提升，截止到目前為止，phonegap已經更新到3.5.0版本了，更新的速度還是相當的快。

　　簡單的介紹之後我們開始來搭建我們的項目環境，

　　1.安裝node.js

　　首先，我們需要下載跟安裝node.js，對於nodejs我們就不做介紹了，網上一搜一大把，我們這裡安裝nodejs的目的是用來安裝phonegap或者cordova用的，

　　:http://nodejs.org/;

　　下載之後進行安裝，安裝完成之後我們點擊開始==>運行==>cmd，開啟命令列工具，輸入node -v,檢測下node.js是否安裝成功，安裝成功後會顯示對應的版本號碼：

　　

　　

　　2.安裝git：

　　:http://git-scm.com/

　　在這個介面下載對應版本的安裝程式，進行安裝，安裝完成後，我們在cmd命令工具中執行git --version 檢測下git是否安裝成功,

　　

 

　　3.安裝phonegap或者cordova：

　　phonegap跟cordova本質上沒什麼區別，但是在指令執行建立項目上有些差別，為了能更好的示範，我們這裡將phonegap跟cordova都安裝一下

　　開啟cmd命令列，windows環境下執行安裝phonegap的指令：

 npm install -g phonegap

　　如果是mac的環境，指令為

 sudo npm install -g phonegap

　　指令執行之後需要耐心等待一段時間，安裝的時間有時會比較長，

　　接著我們安裝cordova，指令跟上面類似，只是把phonegap替換成了cordova

　　windows:　　

 npm install -g cordova

　　mac:

 sudo npm install -g cordova

　　

　　phonegap跟cordova安裝完畢後，我們可以用指令驗證下是否安裝成功

　　

 

　　4.phonegap項目建立：

　　cordova跟phonegap都安裝完畢後，我們開始建立我們的android項目,

　　開啟cmd命令列工具，cd到你需要建立項目的檔案夾內，然後執行以下指令

　　phonegap的建立指令：　

 phonegap create hello com.example.hello HelloWorld

　　hello是指你的專案檔夾名稱，

　　com.example.hello是你的項目內部包名，packagename

　　HelloWorld是你的項目名稱，打包出的安裝程式安裝後顯示的名稱即這個

 

　　cordova的建立指令:　

 cordova create hello com.example.hello HelloWorld

　　參數跟phonegap的是一樣的

 

　　一般情況下，cordova建立項目的時間可能會稍微長一點

 

　　指令執行完畢後，會在你對應的檔案夾下建立一個hello的專案檔，

　　進入hello後，目錄結構大體如下：

　　

　　這裡需要你去關心的主要就是3個目錄，

　　platforms:這個目錄是用來產生各個移動平台項目的，用指令產生的各個平台的專案檔都將產生在這個目錄中

　　plugins：這個是添加phonegap外掛程式的目錄，你添加的過外掛程式都會在這個目錄中進行儲存

　　www: 這個是用來存放你的web項目的，這裡就是指我們的sencha touch項目，打包壓縮後的項目丟到這個裡面就可以了

　　在www目錄中，有個config.xml需要配置一下，一般情況下，cordova指令建立的項目的config.xml裡沒有過多的配置，你可以不用修改，

　　不過phonegap的項目存在一些問題，需要手動對config.xml裡的配置做一些調整，

　　首先要調整下config.xml裡的　

  <access origin="*" />

　　這裡是用來配置網路訪問白名單的，只有這裡配置了的網域名稱才能進行訪問，phonegap 3.5之前的版本預設是127.0.0.1，如果不進行配置，將無法訪問外部網路

　　

 <access origin="127.0.0.1" />

 

　　還有之前的phonegap版本config.xml中，<preference name="fullscreen" value="true" />的設定跟android的AndroidManifest.xml中的windowSoftInputMode會有衝突，所以如果需要螢幕能夠根據軟鍵盤調整大小需要將fullscreen設定為false;

　　將這些設定完畢後，可以根據自己的需要添加需要的phonegap外掛程式，

　　5.添加phonegap外掛程式：

　　我們在上面的項目的基礎上將cmd指令工具cd到hello項目目錄下，這個時候就可以通過指令來安裝外掛程式了，在這裡使用phonegap或者cordova的外掛程式添加指令都一樣，不過

官方文檔上都是提供的cordova的指令，一般我這也是複製黏貼，所以我們這使用cordova的指令來安裝外掛程式，指令格式　　

cordova plugin add <外掛程式名稱|外掛程式地址>

例如我要添加官方的照相機外掛程式，我可以執行

cordova plugin add org.apache.cordova.camera

也可以將外掛程式名稱寫成外掛程式地址，這個地址可以是遠程git上的地址，也可以是本地外掛程式的地址

cordova plugin add git://git.apache.org/cordova-plugin-camera.git

這個地址是官網的外掛程式地址，大家可以自己根據情況使用對應的外掛程式

http://docs.phonegap.com/en/edge/cordova_plugins_pluginapis.md.html#Plugin%20APIs

 

 　　6.使用phonegap建立對應的android項目

　　接下來我們來建立android平台的項目，使用phonegap的指令的話，我們只需要執行如下指令

　　

 phonegap build android

　　

　　如果是使用cordova指令的話需要先添加對應的平台，執行過程如下　　

 cordova platform add android

　　這樣就添加了一個android項目，接下來再執行

　　

 cordova build android

　　執行成功後，android項目中的外掛程式才會被添加進項目生效

 

　　7.使用eclipse匯入項目，然後將項目匯出成apk

　　這裡使用android官方提供專門用於android開發的eclipse，

　　選擇File==>import

　　然後選擇android項目

　　

　　選擇你建立的項目下的platforms並開啟，這時就能匯入你建立的android項目了，

 

　　最後就是匯出成apk的過程了

　　具體可以參照下面這篇文章

　　http://www.cnblogs.com/tianguook/archive/2012/09/27/2705724.html

 

　　這裡我們就不多做描述了，下一講，我們將介紹如何使用phonegap來自訂自己的外掛程式