关于向现有IOS项目中集成phoneGap配置方法（详情见附件）

关于向现有IOS项目中集成phoneGap配置方法（具体见附件）

百度云盘：http://pan.baidu.com/s/1pJylwy3

背景

公司当初创建老版本项目的时候没有使用phoneGap，现由于项目版本的需求，希望向老版本项目中引入phoneGap，具体配置方法如下。

 

注：本例中使用的phonegap版本为3.5.0，Xcode版本为5.1.1

配置方法

一、     创建phoneGap工程

1．        phoneGap 3.5.0使用命令行去创建应用程序的框架，然后我们基于命令行创建的程序去配置现有项目，命令如下：

cordova create Hello com.example.hello HelloWorld

 

其中，第一个参数Hello表示这个程序的名字，同时会创建一个Hello目录保存程序的代码，第二个参数com.example.hello表示代码中包的名字，第三个参数HelloWorld表示创建的应用的名字。

2．        打开终端，进入将保存创建程序的目录（本例保存在桌面），执行命令，显示如下：

3．        进入创建程序的目录，在终端执行如下命令，编译创建的phoneGap项目，显示如下：

命令：cd Hello

cordova platform add ios

cordova prepare  #OR cordova build

                 

 

    4.     返回桌面，找到使用命令所创建的项目，双击新建项目，使项目Xcode中打开，目录结构以及在模拟器编译运行如下：

至此，一个新的phoneGap项目创建完成。

 

注：查看phoneGap和cordova的当前版本，可以使用命令在终端查看，具体操作如下：

 

 

二、     向现有项目中引入phoneGap

 

1.    打开要引入phoneGap的项目（主项目，本例为Demo_Example），将相关的配置文件从新建的phoneGap（HelloWorld）项目中拷贝到主项目中， 操作如下：

（1）  在Xcode中右击HelloWorld,选择show in finder，显示如下：

（2）  右击Demo_Example，选择show in finder，将HelloWorld中cordova、CordovaLib、www文件夹拷贝到项目文件夹下，操作后显示如下：

 

（3）  进入CordovaLib文件目录下，将CordovaLib.xcodeproj文件拖入Xcode中Demo_Example工程下，同时将www文件夹也一并拖入，拖入www文件夹的时候会弹出提示框，选择如下即可：

   

（4）  用同样的方法，将HelloWorld中config.xml文件拷贝到Demo_Example中，操作结束后，Demo_Example目录结构显示如下：

 

2.    选择Demo_Example的“Build Phases”，在“Link Binary With Libraries”下添加“Workspace”下的“libCordova.a”，并加入如下库文件，添加完成后显示如下：

 

3.    在“Target Dependencies”添加“CordovaLib”,如下：

 

4.    编辑Demo_Example中“Build Settings”里的“Other Linker Flags”，添加如下配置项（project 和 targets均要添加），如下：

 

5.    编译运行，验证phoneGap是否成功配置到Demo_Example中，步骤如下：

（1） 在AppDelegate.h文件中，导入CDVViewController.h，并在AppDelegate.m文件中实现，具体如下：

 

（2） 编译运行，控制台输出提示信息，模拟器显示页面如下：

               

 

至此，向老版本项目引入phoneGapd配置完成。

 

三、     配置插件，验证phoneGap是否可以掉用本地插件

1.    编写插件后台实现代码，本例创建CDVUniqueCode类，如下：

 

 

2.    在www/js文件夹下创建js代码，如下：

   

3.    config.xml增加如下配置：

其中，UniqueCode为js文件名，CDVUniqueCode为类名。

 

4.    在index.html文件中，导入我们编写的JS文件，如下：

5.    在index.html文件中添加按钮测试，结果如下：

附上文件结构：

 

至此，phoneGap调用本地插件配置结束。

 

四、     登录页面按钮跳转到phoneGap项目首页

1.    phoenGap项目运行的首页展示在config.xml文件中配置，如下：

其中src 配置展示的首页

2.    新建一个viewController类，添加按钮，为按钮添加事件，单击按钮跳转到CDVViewController,CDVViewController.m会自动加载资源文件，读取配置,展示首页，代码实现如下：

   

3.    编译运行，各插件正常调用，页面跳转成功，如下：

          

 

 

 

 

总结：由于刚接触phoneGap，只是对phoneGap有个入门的了解，本次由于项目的需求，需要往现有的项目集成phoneGap，网上查找资料发现只有创建phoneGap的项目，并没有说到怎么集成，所以自己在解决这件事情的过程中，记录下过程，以供网上的朋友参考。

PS:由于不能上穿图片，所以具体的内容见附件。

百度云盘：http://pan.baidu.com/s/1pJylwy3