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开发的重点。

一、纯Cordova开发

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

1、安装Cordova CLI

  • 下载和安装Node.js。安装完成后你可以在命令行中使用 nodenpm

  • (可选)下载和安装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:

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

➜  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步、在Xcode项目导航栏中选择CordovaLib.xcodeproj, 然后在File Inspector中, 设置Location为Relative to Group;

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

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

  • 第7步 、打开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平台提供的核心插件外, 开发者需要针对一些额外需求自定义开发插件.

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章