使用Cordova进行ios开发和在原有的iOS项目中添加cordova的详细使用


*使用Cordova进行ios开发


下面主要介绍一个开源的框架: Cordova,它的前身是PhoneGap,被Apache收购之后就改成Cordova了.

Cordova 是一个开源的移动开发框架。它可以让你使用标准的WEB技术比如HTML5,CSS3还有JavaScript来进行跨平台的开发,避开了每个移动平台的不同的开发语言。

1.首先安装好Node.js

2.打开终端输入如下命令

 $ sudo nam install -g cordova

使用Cordova进行ios开发和在原有的iOS项目中添加cordova的详细使用_第1张图片

安装 cordova

3. 然后就可以开始建立cordova项目了,如下:

$  cd Desktop/

$  cordova create Demo xidx Stevin_Y

上面第一个参数是project名,第二个是App id,第三个是文件夹名

建立完成之后我们可以加入iOS项目

$  cd Stevin_Y/               注意是 cd 到项目的主目录demo,在没有文件夹的情况

$  cordova platform add ios

4.显示已经安装的平台项目以及可安装的平台

 $  cordova  platform ls   


5.build iOS项目

 $  cordova build ios

使用Cordova进行ios开发和在原有的iOS项目中添加cordova的详细使用_第2张图片

6 . 使用 Xcode 打开项目,并且运行,效果如下:


使用Cordova进行ios开发和在原有的iOS项目中添加cordova的详细使用_第3张图片


在原有的iOS项目中添加cordova

1: 进入到"./platforms/ios" 路径

$ cd /Users/Mac/Desktop/Cordova/hello/platforms/ios
2: "/Users/Mac/Desktop/Cordova/hello/platforms/ios"  路径下面需要copy的4个文件夹copy到新建项目的根路径中

CordovaLib  cordova  www  platform_www
使用Cordova进行ios开发和在原有的iOS项目中添加cordova的详细使用_第4张图片

3:需要将下面的两个"config.xml" -> 各自copy到已存在的iOS项目的文件夹内

使用Cordova进行ios开发和在原有的iOS项目中添加cordova的详细使用_第5张图片

使用Cordova进行ios开发和在原有的iOS项目中添加cordova的详细使用_第6张图片

4:配置相关参数

使用Cordova进行ios开发和在原有的iOS项目中添加cordova的详细使用_第7张图片
2.2 将下图 "Copy www directory.png"  中①原名称"Run Script"修改为"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
使用Cordova进行ios开发和在原有的iOS项目中添加cordova的详细使用_第8张图片
2.3 Build Settings -> Other Linker Flags 中添加"-ObjC -all_load"
使用Cordova进行ios开发和在原有的iOS项目中添加cordova的详细使用_第9张图片
2.4 Add Files to ... -> CordovaLib.xcodeproj
使用Cordova进行ios开发和在原有的iOS项目中添加cordova的详细使用_第10张图片
2.5 Add Files to ... -> config.xml
使用Cordova进行ios开发和在原有的iOS项目中添加cordova的详细使用_第11张图片
2.6 Add Files to ... -> www文件夹
使用Cordova进行ios开发和在原有的iOS项目中添加cordova的详细使用_第12张图片
2.7 Schemes按照下图配置,然后编译一次程序,最后导入下面两项
Build Phases -> Target Dependencies -> CordovaLib
Build Phases -> Link Binary With Libraries -> libCordova.a


然后运行success

你可能感兴趣的:(使用Cordova进行ios开发和在原有的iOS项目中添加cordova的详细使用)