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地址