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

　     這講咱們來說解下如何使用phonegapa建立項目環境並經過她們將sencha touch打包成app，這裏咱們只講解打包android的apk，打包ios的過程有點相似，可是須要在mac環境下，最後經過xcode導出成ipa安裝程序；

　　

　　1、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來自定義本身的插件