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来自定义本身的插件