Cordova 在iOS中的使用详解

概述

Cordova 是使用HTML，CSS和JavaScript构建混合移动应用程序的平台。官方文档给了咱们Cordova的定义。

Apache Cordova是一个开源的移动开发框架。容许你用标准的web技术-HTML5,CSS3和JavaScript作跨平台开发。 应用在每一个平台的具体执行被封装了起来，并依靠符合标准的API绑定去访问每一个设备的功能，好比说：传感器、数据、网络状态等。

使用Apache Cordova的人群:

• 移动应用开发者，想扩展一个应用的使用平台，而不经过每一个平台的语言和工具集从新实现。
• web开发者，想包装部署本身的web。
• App将其分发到各个应用商店门户。

Cordova是开发跨平台web App的工具, 使用前端技术来开发App, 能够节省成本和快速发布；Cordova的底层逻辑是:HTML+CSS搭建页面, 使用JS和原平生台交互来展现原平生台的功能；Cordova全部功能是创建在各类插件上的,因此插件开发是Cordova开发的重点。

1、纯Cordova开发

这部分教你如何建立JS/HTMLCordova应用并发布到iOS原生移动平台，经过使用cordova命令行接口(CLI)。

一、安装Cordova CLI

• 下载和安装Node.js。安装完成后你能够在命令行中使用node 和 npm 。

• (可选)下载和安装git client, 若是你没有。安装成功后，你能够在命令行中使用 git。 这个命令行使用下载git仓库中的资源。

• 安装cordova 模块使用Nodejs的npm工具。cordova模块会被npm工具自动下载。

在OS X和Linux上:

➜  ~ sudo npm install -g cordova
复制代码

在OS X和Linux上,npm命令加上前缀sudo由于cordova可能须要安装在其余的受限制目录好比 /usr/local/share。若是你使用可选工具nvm/nave或者具备安装目录的写权限，那么你能够省略sudo前缀。这里有更多提示 可用在使用 npm 没有 sudo前缀时，若是你想那么作。

-g标志是告诉 npm 咱们全局安装 cordova。不然咱们将会安装在当前工做目录的 node_modules子目录。

安装完成后，你应该可以在命令行中运行cordova命令，在没有任何参数的时候会打印一些帮助信息。

二、建立工程

进入到你要建立的工程目录Cordava下，建立你的Cordova项目hello：

➜  CordovaDemo cordova create hello com.example.hello HelloWorld
复制代码

这将会为你的cordova应用创造必须的目录。默认状况下，cordova create命令生成基于web的应用程序的骨骼，项目的主页是 www/index.html 文件。

项目的目录以下：

三、添加iOS平台

全部后续命令都须要在项目目录或者项目目录的任何子目录运行:

➜  CordovaDemo cd hello 
➜  hello cordova platform add ios --save
Using cordova-fetch for cordova-ios@^5.0.0
Adding ios project...
Creating Cordova project for the iOS platform:
	Path: platforms/ios
	Package: com.example.hello
	Name: HelloWorld
iOS project created with cordova-ios@5.0.1
Plugin 'cordova-plugin-whitelist' found in config.xml... Migrating it to package.json
Discovered saved plugin "cordova-plugin-whitelist". Adding it to the project
Installing "cordova-plugin-whitelist" for ios
Adding cordova-plugin-whitelist to package.json
➜  hello cordova platform ls
Installed platforms:
  ios 5.0.1
Available platforms: 
  android ^8.0.0
  browser ^6.0.0
  electron ^1.0.0
  osx ^5.0.0
  windows ^7.0.0
复制代码

运行cordova platform add ios --save或者remove的命令将会影响项目 platforms的内容，在这个目录中每一个指定平台都有一个子目录。

注意:在你使用CLI建立应用的时候， 不要 修改/platforms/目录中的任何文件。当准备构建应用或者从新安装插件时这个目录一般会被重写。

如下是运行这些命令以后的项目目录：

四、安装构建的先决条件

要构建和运行App，你须要安装每一个你须要平台的SDK。另外，当你使用浏览器开发你能够添加 browser平台，它不须要任何平台SDK。

检测你是否知足构建平台的要求:

➜  hello cordova requirements

Requirements check results for ios:
Apple macOS: installed darwin
Xcode: installed 10.3
ios-deploy: installed 1.9.4
CocoaPods: installed 1.6.1
复制代码

至此构建app须要用的工具所有安装完成。

五、构建App和运行

默认状况下, cordova create生产基于web应用程序的骨架，项目开始页面位于www/index.html 文件。任何初始化任务应该在www/js/index.js文件中的deviceready事件的事件处理函数中。

运行下面命令为所添加的iOS平台构建:

➜  hello cordova build ios
复制代码

六、调试和测试 App

移动平台的SDK一般会绑定模拟器，它是一个可执行的设备镜像，这样你就能够在主屏幕启动你的App，看看它在多个平台是如何交互的。 在命令行运行下面的命令，会从新构建App并能够在特定平台的模拟器上查看:

➜  ~ hello cordova emulate ios
复制代码

为了能在终端上经过命令行直接部署，咱们还须要安装几个工具：

➜  ~ npm install -g ios-sim
➜  ~ npm install -g ios-deploy
复制代码

部署到模拟器以前，咱们须要肯定 target（机型 + 系统），能够经过执行如下命令来查看支持的机型：

➜  hello cordova run ios --list 
复制代码

至于系统须要从 XCode 安装，这里我安装了 12.0：

如今万事俱备，咱们经过执行一条命令就能够在模拟器上运行：

➜  hello cordova run ios --target="iPhone-8, 12.0"
复制代码

或者，你能够将你的手机插入电脑，在手机上直接测试App:

➜  hello cordova run ios
复制代码

运行结果以下：

七、添加插件

你能够修改默认生成的App经过标准的web技术，可是App要接触设备级别的特性，就须要你添加插件了。

一个插件 经过JavascriptAPI暴露原生SDK功能。插件一般由npm分发，你能够搜索他们在 插件搜索页。一些关键的API由Apache Cordova开源项目提供而且这些插件是做为[核心插件API]的。你也可使用CLI启动搜索页:

➜  hello cordova plugin search camera
cordova-plugin-whitelist 1.3.4 "Whitelist"
复制代码

plugin要添加camera插件，咱们须要指定camera的npm包名:

➜  hello cordova plugin add cordova-plugin-camera
Installing "cordova-plugin-camera" for ios
Adding cordova-plugin-camera to package.json
复制代码

插件也能够经过目录或者git仓库添加。

注意:CLI增长了适合各个平台的插件代码。若是你想伴随着低级别壳工具和平台SDK开发你能够看概述中讨论的, 你须要运行Plugman工具去给每一个平台单独添加。 (要知道更多信息, 请看 使用Plugman管理插件.)

使用 plugin ls (或者 plugin list, 或者 plugin本身)查看当前安装的插件。每一个插件显示它的标识:

➜  hello cordova plugin ls  
cordova-plugin-camera 4.1.0 "Camera"
cordova-plugin-whitelist 1.3.4 "Whitelist"
复制代码

八、更新Cordova和项目

在安装cordova工具以后，你能够运行下面命令更新到最新版本:

➜  hello sudo npm update -g cordova
复制代码

运行cordova -v查看当前版本。要查找最新的cordova版本，能够运行:

➜  hello npm info cordova version
9.0.0
复制代码

用下面语法安装指定版本:

➜  hello sudo npm install -g cordova@3.1.0-0.2.0
复制代码

要更新你要定位的平台:

➜  hello cordova platform update ios --save
复制代码

2、iOS工程中使用Cordova

一、将Cordova项目资源添加到Xcode项目中

• 第1步、使用Xcode建立一个iOS工程，工程名为DYCordovaDemo,新建一个podfile文件，内容以下：

platform :ios, '9.0'

target 'DyCordovaDemo' do
pod 'Cordova'
end
复制代码

• 第2步、建立一个Cordova工程，工程名为hello，并添加iOS平台, 由于后面须要用到cordova项目中的内容；

• 第3步、打开iOS项目DYCordovaDemo，将cordova工程工程名为hello中的config.xml文件复制到iOS项目下, 而且选择Create groups for any added folders选项；

• 第4步、将CordovaLib/CordovaLib.xcodeproj复制到Xcode项目中；

  

• 第5步、将 cordova 工程中的 hello 文件夹下 的www 文件夹 复制到Xcode项目中；

• 第6步、在Xcode项目导航栏中选择CordovaLib.xcodeproj, 而后在File Inspector中, 设置Location为Relative to Group；

  

• 第7步、选中Xcode项目的target, 而后在Build Settings中的Other Linker Flags中添加-force_load和-Objc；

注:这里有个bug, 官网说添加-force_load和-Objc, 发现添加-force_load后, 原生buildbuild报错. 因此网上有人推荐添加-all_load和-Objc.

• 第8步、打开Build Phases中的Link Binaries with Libraries, 将下面的库添加进去；

AssetsLibrary.framework
CoreLocation.framework
CoreGraphics.framework
MobileCoreServices.framework
复制代码

一、打开Target Dependencies和Link Binaries with Libraries都加入CordovaLibbuild后的产物CordovaLib.a, 若是看不到libCordova.a, 能够在Cordova项目目录下运行cordova build命令.

二、在Build Settings中的Header Search Paths.加入下面这些值:

"$(TARGET_BUILD_DIR)/usr/local/lib/include"
"$(OBJROOT)/UninstalledProducts/include"
"$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include"
"$(BUILT_PRODUCTS_DIR)"
复制代码

二、使用CDVViewController

使用CDVViewController加载cordova页面，以后Cordova中的webView就交给www下的前端资源来管理了，加载CDVViewController代码示例以下：

#import "ViewController.h"
#import <Cordova/CDVViewController.h>
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    [self initUI];
}
- (void)initUI {
    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    button.frame = CGRectMake(50, 120, 150, 60);
    [button addTarget:self action:@selector(goToCordovaVc) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
    button.backgroundColor = [UIColor redColor];
    [button setTitle:@"进入cordova页面" forState:UIControlStateNormal];
    [button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    self.view.backgroundColor = [UIColor whiteColor];
}
- (void)goToCordovaVc {
    CDVViewController * cordovaVC = [[CDVViewController alloc]init];
    //(可选)设置wwwFolderName属性, 默认为www:
    cordovaVC.wwwFolderName = @"www";
    //(可选),设置属性useSplashScreen, 默认值为NO:
//    cordovaVC.useSplashScreen = YES;
    //设置view frame, 总要设置为最新的值:
    cordovaVC.view.frame = CGRectMake(0,0,self.view.frame.size.width,self.view.frame.size.height);
    //设置标题
    cordovaVC.title = @"cordova";
    [self.navigationController pushViewController:cordovaVC animated:YES];
}
@end
复制代码

3、插件开发

Cordova项目中大量使用插件, 除了Cordova平台提供的核心插件外, 开发者须要针对一些额外需求自定义开发插件.

一、插件工做的原理

• Cordova插件是经过JavaScript对外提供接口来访问native功能, 从而能让前端在web app中开发相似native的功能；
• 每一个JavaScript对外提供的方法最终是经过调用Cordova提供的cordova.exec方法来调用native中的方法；
• 插件中方法最终都是调用native方法,因此须要相应的native方法实现；
• 插件开发包含三个主要部分分别是:JavaScript接口, 原生类的实现, config.xml配置文件。

二、插件开发示例

2.一、搭建插件结构

目前Cordova 官网存在一些插件，你们能够参考着看看。

一、使用plugman来建立一个扫码插件命名为Scan：

➜  cordova-plugin-scan plugman create --name scan --plugin_id cordova-plugin-scan --plugin_version 1.0.0
复制代码

运行成功以后的文件结构以下图所示：

二、文件结构包含如下几个：

• www 包含了一个 scan.js 文件，是插件的javaScript接口部分。

scan.js 文件的初始代码以下：

• src 原平生台代码实现，能够包含Android，iOS，WP等，你要支持哪一个平台，就在下面建立一个平台子文件夹。
• config.xml 该文件起配置做用，配置插件的关键信息。

2.二、建立JavaScipt接口

接下来咱们来编写提供给前端调用的js类型的scan接口：

一、打开插件目录下的 scan.js 文件，在其中编写js调用的scan接口

2.三、原生iOS对插件接口功能实现

2.四、配置plugin.xml文件

2.五、插件调试

2.六、发布插件

未完待续

总结

Cordova功能强大，使用方便，可能个人理解还不是太完整、你们有什么须要讨论的请留言。

参考文章Cordova中文文档

DEMO地址