最近公司新出了一个项目，要求的是iOS内嵌H5网页，故选用Cordova框架 ，由于本人自带的“编程相关皆玄学”的属性，在搭配环境的时候依旧出了一堆寻常码农所不寻常遇之问题，故写下此文，一方面为己鸣钟，一方面警示他人

另外若你和我一样自带的“编程相关皆玄学”的属性，那请保存好本文以便出问题时使用

PS：以下操作皆以 Mac Pro 环境下进行，Windows 环境朋友情自便（原谅我废话，iOS 开发哪有 Windows 环境的），另外本人电脑初始设置的问题，所有的 npm 命令皆以 sudo 前行这里不做展示防止给某些朋友带来困扰

1.安装Node.js

这步不做多余阐述，Node.js 官网自行下载安装（不会你就退圈吧）

2.创建第一个Cordova工程

2.1 新建项目

继续，打开终端，cd 切换目录到工作目录下（我选的桌面 Desktop），输入以下命令，同样，可能需要点时间来完成

cordova create cordovaDemo com.cordova.demo.cordova HelloCordova

参数描述： cordovaDemo(参数是必填)：将为你的项目生成一个Demo目录 www子目录是应用程序的主页，以及各种资源(css,js,img)，遵循共同的web开发文件命名规范。这些资源将存储在设备上的本地文件系统，而不是远程服务。config.xml文件包含重要的需要生成和分发应用程序的元数据。

com.cordova.demo.cordova(参数可选)：App ID，如果不填写这个参数，第三个参数就要省略，默认值是 io.cordova.hellocordova，但建议你填写一个适当的值。

HelloCordova(参数可选)：应用程序的项目名 这个参数的默认值就是 HelloCordova，但建议你填写一个适当的值。

2.2 添加平台支持

所有后续命令在项目的目录中进行，可在该项目任何子目录中，cd 切换到项目目录下：

cd cordovaDemo

在构建项目之前，你需要指定一组目标平台。你能够运行这些命令取决于您的机器是否支持每一个SDK，合理是否已安装SDK。在MAC上运行命令：

cordova platform add ios

如果需要查看Cordova支持平台以及已经添加的平台，终端输入命令：

cordova platforms ls

如图所示，上面是已安装 + 下面未安装（可安装）= Cordova支持平台

这块有兴趣的同学可以自行了解其他平台，这里不做赘述（其实是我不会╮(╯▽╰)╭）

2.3 添加插件

根据项目具体功能需要，可添加插件以简单方便调用原生接口，如需添加插件，可以去Cordova插件库 搜索需要的插件：

 cordova plugin add com.phonegap.plugins.barcodescanner
 cordova plugin add org.apache.cordova.file-transfer
 cordova plugin ls

并非所有的插件都是全平台支持的，有些可能只支持安卓，也有的可能同时支持安卓和iOS，所以在多平台开发时，请慎重选择插件。个人建议，可自定义插件类，可参考官网Cordova自定义插件。

2.4 迭代项目
 // 在工程目录下运行下面的命令来构建项目：
  cordova build
 // 或者，指定生成iOS平台代码项目：
  cordova platform add ios iOS_Cordova

在这里 cordova build 的时候我遇到了错误

然后百度说需要

npm install -g ios-deploy

或者

npm install -g ios-deploy --unsafe-perm=true

一下，结果又出了一个错误（以 npm install -g ios-deplo 为例，整个错误挺长的，而且中间的不是给正常程序猿看的，所以就不放出来了，挑首尾能看懂的放）

然后再次查询错误，发现需要

npm install -g ios-deploy --unsafe-perm=true --allow-root

重点是 --allow-root 这个权限，输入后回车，经过一大串依旧不知所云的文字之后，出现如下结果

成功！

然后重新运行 cordova platform add ios iOS_Cordova ，结果如下图

成功！接下来就可以愉快的继续使用了！

3.Cordova 必要项目文件转移到自己的 iOS 项目中

3.1 找到相关路径，复制文件到工程目录

首先，进入到上一篇文章中创建的Cordova项目的路径中/Users/**/Desktop/Demo/platforms/ios,找到下面需要copy的4个文件夹（ CordovaLib ，cordova， www， platform_www ）copy到工程项目的根路径中，如图：

3.2 拷贝对应的config.xml文件到对应的工程目录

然后将下面图中所示的config.xml文件copy到需要的iOS项目路径文件夹内，如图：

4.配置相关参数

4.1 打开工程，进入工程TARGETS -> Build Phases 下，然后入下图所示，点击①中的按键，创建New Run Script Phase,②为创建的Run Script:

4.2 将下图示意图中，①原名称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

4.3 在工程 Build Settings -> Other Linker Flags 中添加 -ObjC -all_load

4.4 Add Files to … -> CordovaLib.xcodeproj

4.5 Add Files to … -> config.xml

4.6 Add Files to … -> www文件夹

4.7 Schemes按照下图配置，然后编译一次程序（command+R），最后导入下面两项
Build Phases -> Target Dependencies -> CordovaLib
Build Phases -> Link Binary With Libraries -> libCordova.a

4.8 Schemes按照下图配置，将”ViewController.h” 文件改为:
#import <Cordova/CDVViewController.h>
#import <Cordova/CDVCommandDelegateImpl.h>
#import <Cordova/CDVCommandQueue.h>
@interface ViewController : CDVViewController
@end

注意！千万别忘了 UIViewController 改为 CDVViewController！

至此，Cordova 嵌入已存的开发项目就已经完成了，运行程序就可看到工程中 www 文件目录下，index.html 文件中的网页信息了。默认是 Cordova 的一个简单界面，没有交互，如果是用本地网页，那我们可以对index.html文件进行定制，以及拓展，直接成为webApp，不过一般需求，都是远端网页和原生交互，那么问题来了，Cordova怎么打开远端网页呢？

5.允许接入外部网页

首先在项目的info.plist里面添加字段 App Transport Security Settings，在子字段里面添加Allow Arbitrary Loads 设置为BOOL类型，赋值为YES，如图：

打开我们的config.xml文件，在allow-intent href=”https://* / *下面添加如下代码：

<!-- 允许跳转外部网页 开始 -->
<allow-navigation href="https://*/*" />
<allow-navigation href="http://*/*"  />
<!-- 允许跳转外部网页 结束 -->

配置如图：

然后在我们的ViewController.m文件里面实现如下代码

NSURLRequest * rq = [NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]];
// 跳转外部网页
[self.webViewEngine loadRequest:rq];

至此，整体操作已完成，接下来就可以愉快的开发了！

另外我把搞项目时遇到的几个小问题整理归纳了一下放到了下一篇文章里，有需要的朋友可以自行移步

2018-10-20续：

今天要说的事很简单，就是没有特殊情况的话，建议直接在 crodova 创建好的项目里去进行操作，没有必要自己去新建项目再整合，免去不必要的麻烦（可能这样麻烦的话也就是在配置 icon launchimage 上了，但是想想你要拖拽一大堆文件改代码我觉得这样好像是很轻松了吧……）

（后续 BUG 持续开发中……）