iOS开发-Cordova配置-Cordova交互-Cordova插件开发iOS项目接入Cordova-Cordova跳转外部网页

本期内容：

• Cordova 详细配置
• Cordova 接入iOS项目
• Cordova 访问外部网页
• Cordova iOS交互插件开发

---

Cordova简介

Cordova是一个开源的移动开发框架，它允许你使用WEB开发技术(HTML5、CSS3、JavaScript)进行跨平台开发，可以在每个平台的封装器中执行，并且依赖规范的API对设备进行高效的访问，比如传感器、数据、网络状态等等。Cordova可以让JS与原生代码互相通信的一个库，并且提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。这些API插件类都是基于JS与Objective-C可以互相通信的基础的。

Cordova支持iOS, Android等系统。

常见的使用场景：

• 网页中按钮事件交互、参数获取、方法调用
• 根据返回值修改原生界面的title、视图大小、添加视图、添加按钮、颜色等
• 使用webViewEngine的loadRequest方法跳转到Safari调起第二个App

前段时间在公司项目中使用了Cordova来配合EF同事做H5的交互，用起来比网络请求的交互方便很多，今天来简单的分享一下使用方式。

---

Cordova配置

首先说明一下，因为在做Cordova的时候会有坑，已经踩过，会在下文继续写出来。

1.下载Node.js并安装（点击红框位置的资源下载）

2.安装好Node.js之后，我们就能使用npm命令来安装Cordova了
打开终端，输入以下命令：

sudo npm install -g cordova

过程中会有提示你输入密码，和输入yes，直接按照过程通过就行。

3.安装完成之后，开始创建
3.1使用命令行工具创建一个空白的Cordova项目，cd到创建项目的目录，输入以下代码：

sudo cordova create YourApp

如果有不确定和不知道的情况，可以使用以下代码进行查看：

cordova help create

3.2切换到YourApp目录，并修改指定平台，代码如下：

cd YourApp
sudo cordova platform add ios

3.3让这个配置好的demo项目跑起来：

cordova run ios

当以上步骤都完成了，我们就使用Find打开YourApp的文件夹，查看内部文件，大概样子如下：

然后我们打开platforms文件夹里面ios文件夹，就会看到Cordova的demo项目，如图：

Cordova配置到这里就结束啦，如果有兴趣可以直接打开看一下文件结构以及方法调用等信息。

---

项目简单接入Cordova

现在我们开始在项目中接入Cordova，先打开Xcode创建一个名为test的空项目。然后看上面的图片可以看到demo文件夹中的文件，我们需要直接拿到我们的项目中，具体的文件如图：


当文件都拷贝到我们的项目（这里使用test项目）中，test项目文件目录如下：

打开工程从目录中移除文件夹cordova、CordovaLib（不是移除到废纸篓，只是删除目录），然后导入CordovaLib文件夹中的CordovaLib.xcodeproj，然后test项目结构就成了如图所示：

接下来我们继续配置，在target里面选中test，进入到Build Phases中，添加文件，如图：

并在这里创建一个新的项 New Run Script Phases，名为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

配置如图：

在工程的 Build Settings中找到 Linking，包含项Other Linker Flags中添加-ObjC、-all_load，如图：

这样Cordova就接入好我们的test项目了，接下来就是让它跑起来，打开test项目的ViewController.h文件，导入CD头文件，把ViewController 继承自CDVViewController，如图所示：

然后就 cmd + r 运行项目，效果如图：

运行的程序看到的网页信息，是就工程中wwww文件目录下的index.html文件。如果公司是本地网页，那我们可以对index.html文件进行定制，以及拓展，直接成为webApp，不过一般需求，都是远端网页和原生交互&#x