Cordova 在iOS中的使用详解

Coder_Hedy
9,122 阅读9分钟

概述

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

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

Cordova的架构设计

使用Apache Cordova的人群:

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

Cordova是开发跨平台web App的工具, 使用前端技术来开发App, 可以节省成本和快速发布；Cordova的底层逻辑是:HTML+CSS搭建页面, 使用JS和原生平台交互来展示原生平台的功能；Cordova所有功能是建立在各种插件上的,所以插件开发是Cordova开发的重点。

小猪奔跑

一、纯Cordova开发

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

1、安装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命令，在没有任何参数的时候会打印一些帮助信息。

2、创建工程

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

➜  CordovaDemo cordova create hello com.example.hello HelloWorld

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

项目的目录如下：

工程目录

3、添加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/目录中的任何文件。当准备构建应用或者重新安装插件时这个目录通常会被重写。

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

目录

4、安装构建的先决条件

要构建和运行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需要用的工具全部安装完成。

5、构建App和运行

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

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

➜  hello cordova build ios

6、调试和测试 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：

xcode下载模拟器

现在万事俱备，我们通过执行一条命令就可以在模拟器上运行：

➜  hello cordova run ios --target="iPhone-8, 12.0"

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

➜  hello cordova run ios

运行结果如下：

运行结果

7、添加插件

你可以修改默认生成的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"

8、更新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

二、iOS工程中使用Cordova

1、将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

1、打开Target Dependencies和Link Binaries with Libraries都加入CordovaLibbuild后的产物CordovaLib.a, 如果看不到libCordova.a, 可以在Cordova项目目录下运行cordova build命令.

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

"$(TARGET_BUILD_DIR)/usr/local/lib/include"
"$(OBJROOT)/UninstalledProducts/include"
"$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include"
"$(BUILT_PRODUCTS_DIR)"

2、使用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

三、插件开发

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

1、插件工作的原理

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

2、插件开发示例

2.1、搭建插件结构

目前Cordova 官网存在一些插件，大家可以参考着看看。

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

➜  cordova-plugin-scan plugman create --name scan --plugin_id cordova-plugin-scan --plugin_version 1.0.0

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

plugin文件结构
2、文件结构包含以下几个：

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

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

scan.js

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

2.2、创建JavaScipt接口

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

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

2.3、原生iOS对插件接口功能实现

2.4、配置plugin.xml文件

2.5、插件调试

2.6、发布插件

未完待续

总结

Cordova功能强大，使用方便，可能我的理解还不是太完整、大家有什么需要讨论的请留言。

参考文章Cordova中文文档

DEMO地址

avatar
文章
阅读
粉丝