Cordova学习笔记-2.将Cordova框架导入到已有的工程中

写在前边

将cordova框架导入到已有的工程,是一种比较常见的操作,我遇到的场景是,之前有一个cordova框架编写的页面,当然是h5写的,现在想把他集成到已有的app中,就需要将h5的页面放到工程中,再向工程中导入cordova环境.由此可以看到,导入cordova项目到已有工程中,包括的是两部分,一部分是h5的页面部分,一部分是cordova环境.
我遇到的问题比较特别,我拿到的cordova项目只有h5页面,没有cordova环境,需要自己搞定cordova环境.这种情况,导入的方法也有两种,一种是新建cordova框架的Demo,然后将Demo的环境导入到已有项目中,再导入h5页面.另一种方法是,使用cocoapods 向已有项目中导入cordova环境,导入后再导入h5页面.
这篇文章将介绍这两种方法.

---

方法一:将Cordova的demo导入到已有项目中去

1. 拷贝文件夹

将cordova的Demo中的以下文件拷贝到已有项目中去.
文件包括cordova, cordovaLib, www, config.xml

图1:需要导入的文件

导入后的文件结构如图二.

图2:导入后的目录结构

2. 导入到项目

将config.xml导入到项目中
将www文件夹导入到项目中,记得是勾选Create folder references
CordovaLib文件夹中的CordovaLib.xcodeproj 导入到项目中,如图三:

图三

导入后项目的目录结构如图四:

图四:导入后项目的目录结构

3. 配置Build Settings

选择工程的Build Settings->Other Links, 设置-Objc -all_load

图五

4. 配置Build Phases

4.1 选择Build Phases->Target Dependencies,
添加CordovaLib
4.2 选择Build Phases->Link Binary With Librarys,
添加libCordova.a, MobileCoreServices,AssetsLibrary
4.3 选择Build Phases->New Run Script Phase，
将新增New Run Script Phase命名为copy www directory
并添加以下配置信息:

NODEJS_PATH=/usr/local/bin; NVM_NODE_PATH=~/.nvm/versions/node/`nvm version 2>/dev/null`/bin; N_NODE_PATH=`find /usr/local/n/versions/node/* -maxdepth 0 -type d 2>/dev/null | tail -1`/bin; XCODE_NODE_PATH=`xcode-select --print-path`/usr/share/xcs/Node/bin; PATH=$NODEJS_PATH:$NVM_NODE_PATH:$N_NODE_PATH:$XCODE_NODE_PATH:$PATH && node cordova/lib/copy-www-build-step.js

5. 创建用来显示网页的控制器

新建一个类,继承CDVViewController,我起名叫做CordovaViewController.
在viewController页面添加一个按钮,添加按钮.点击按钮跳转到CordovaViewController页面.
编译运行,点击按钮后跳转到新的页面,这个页面就是Cordova的Demo的那个页面.
看到这个页面说明集成成功了.

---

方法二:通过cocoapods向已有项目导入Cordova环境

1.确定已经装上cocoa pods,如果没装上,去度娘查查怎么装.(太恶心了,装不装的上,完全看运气)(算了,文章结尾附上cocoapods的安装和基本使用方法)

2.在Podfile文件中写: pod 'Cordova', '~> 3.6'

podfile.png

3.新建一个UIViewController类,把继承类由UIViewController改为CDVViewController.

代码1.png

4.在该控制器(继承自CDVViewController)的loadView方法中,使用以下方法可以更改html页面.

代码2.png

目录结构说明

---

Cordova环境说明

---

附: 安装和使用cocoapods

http://www.jianshu.com/p/893b8f3907f2