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資料夾中的檔案，我們需要直接拿到我們的專案中，具體的檔案如圖：
開啟工程從目錄中移除資料夾cordova、CordovaLib（不是移除到廢紙簍，只是刪除目錄），然後匯入CordovaLib資料夾中的CordovaLib.xcodeproj，然後test專案結構就成了如圖所示：
接下來我們繼續配置，在target裡面選中test，進入到Build Phases中，新增檔案，如圖：
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
配置如圖：
首先在專案的info.plist裡面新增欄位 App Transport Security Settings，在子欄位裡面新增Allow Arbitrary Loads 設定為BOOL型別，賦值為YES，如圖：
<!-- 允許跳轉外部網頁 開始 -->
<allow-navigation href="https://*/*" />
<allow-navigation href="http://*/*" />
<!-- 允許跳轉外部網頁 結束 -->
配置如圖：
- (void)loadSettings
{
CDVConfigParser* delegate = [[CDVConfigParser alloc] init];
[self parseSettingsWithParser:delegate];
// Get the plugin dictionary, whitelist and settings from the delegate.
self.pluginsMap = delegate.pluginsDict;
self.startupPluginNames = delegate.startupPluginNames;
self.settings = delegate.settings;
// And the start folder/page.
if(self.wwwFolderName == nil){
self.wwwFolderName = @"www";
}
if(delegate.startPage && self.startPage == nil){
self.startPage = delegate.startPage;
}
if (self.startPage == nil) {
self.startPage = @"index.html";
}
// Initialize the plugin objects dict.
self.pluginObjects = [[NSMutableDictionary alloc] initWithCapacity:20];
}
所以我們需要在父類的viewdidload呼叫之前，讓page和folder賦值，不過，現在我們已經不需要再使用這麼麻煩的了。就像之前給大家看的圖片一樣，我們現在只需要使用如下程式碼：
NSURLRequest * rq = [NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]];
// 跳轉外部網頁
[self.webViewEngine loadRequest:rq];
在viewwillappear裡面執行，就可以跳轉外部網頁了。我在這裡跳轉了我的個人主頁，如圖：
Cordova外掛
簡介：外掛是Cordova生態系統的核心部分，它們提供了一個Cordova和本地元件互動的介面和繫結標準裝置的API。這能讓你通過JavaScript呼叫原生代碼，Cordova專案包含一系列叫做核心外掛的外掛集合。這些核心的外掛能讓你的應用高效的訪問裝置，比如電池、攝像頭、聯絡人等等.除了這些核心的外掛之外，這些還有一些提供在所有平臺上不必要的額外特徵的第三方外掛。可以通過外掛搜尋或npm進行查詢Cordova外掛。也可以開發你自己的外掛，比如，外掛可以實現自定義本地元件和Cordova的互動。
文章開頭我們也介紹了常見的使用場景：
- 網頁中按鈕事件互動、引數獲取、方法呼叫
- 根據返回值修改原生介面的title、檢視大小、新增檢視、新增按鈕、顏色等
- 使用webViewEngine的loadRequest方法跳轉到Safari調起第二個App
最簡單的外掛
我們來開發一個最簡單的外掛，點選網頁按鈕呼叫本地彈窗提示：
1.首先我們來新建一個檔案，檔案繼承自CDVPlugin，如圖：
<!-- 自己定義的plugin 開始 -->
<feature name="MyTestPlugin">
<param name="ios-package" value="MyTestPlugin" />
<param name="onload" value="true" />
</feature>
<!-- 自己定義的plugin 結束 -->
配置如圖：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="cordova_plugins.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", yourCallbackFunction, false);
// 自己定義的button點選事件
// Cordova.exec後三個繫結外掛的引數分別是：外掛名、外掛方法、傳輸內容
function BTClick(){
Cordova.exec(successFunction, failFunction, "MyTestPlugin", "testMethod", ["彈出alertView"]);
}
// 失敗回撥
function failFunction(error){
alert(error);
}
// 成功回撥
function successFunction(ok){
alert(ok);
}
</script>
</head>
<body>
<!-- 自己定義的button,設定JS事件 -->
<p>點選下面按鈕彈出alertView</p>
<button onclick="BTClick()">彈出alertView</button>
</body>
</html>
5.在自定義外掛裡面新增常用攔截方式，testMethod:(CDVInvokedUrlCommand *)cmd，在.m檔案中實現一下，程式碼如下：
- (void)testMethod:(CDVInvokedUrlCommand *)cmd{
if ([[cmd.arguments objectAtIndex:0]isEqualToString:@"彈出alertView"]) {
// 開啟彈窗
UIAlertView * alert = [[UIAlertView alloc]initWithTitle:@"提示" message:@"點選網頁按鈕彈出提示" delegate:nil cancelButtonTitle:@"好的" otherButtonTitles:nil, nil];
[alert show];
}
}
演示效果如下：
如果有小夥伴不理解我自定義的方法 testMethod:(CDVInvokedUrlCommand *)cmd 怎麼就能獲取網頁的返回值的，可以去Cordova的官網檢視iOS查件製作教程喲。
好啦我們接著往下看，在這裡我分享一段帶註釋的程式碼，也是剛才在5步驟的程式碼拓展的：
- (void)testMethod:(CDVInvokedUrlCommand *)cmd{
/*
cmd所帶回來的資訊：
callbackId 回撥時的命令id
className 回撥的類名
methodName 回撥的方法名
arguments 回撥的引數
*/
// 該方法使用後臺執行緒，避免阻塞，也可以把裡面的方法寫出到外面來
[self.commandDelegate runInBackground:^{
// 一般根據cmd的arguments（儲存為字串）來判斷我們想要實現的方法
NSLog(@"%@",cmd.arguments);
/**
比如：
if ([[cmd.arguments objectAtIndex:0]isEqualToString:@"設定頁面title"]) {
// 設定title
}
if ([[cmd.arguments objectAtIndex:0]isEqualToString:@"跳轉頁面"]) {
// 跳轉頁面
}
if ([[cmd.arguments objectAtIndex:0]isEqualToString:@"記錄某個值"]) {
// 記錄值
}
*/
/**
一般互動，我們只是根據H5的點選事件來完成本地操作，如果需要互動，返回資料就用以下方法：
pluginResult 返回資料
CDVCommandStatus 狀態
__block CDVPluginResult* pluginResult = nil;
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:@"App反饋給網頁的字串"];
[self.commandDelegate sendPluginResult:pluginResult callbackId:cmd.callbackId];
*/
}];
}
使用Cordova做互動的時候，外掛會自動返回互動資訊，這個cmd裡面包含有四個引數：
| 屬性 | 作用 |
|---|---|
| callbackId | 回撥時的命令id |
| className | 回撥的類名 |
| methodName | 回撥的方法名 |
| arguments | 回撥的引數 |
我們一般常用的就是回撥的引數arguments，一般根據專案需求來決定怎麼使用和拓展。
大家可以看看上面的程式碼，有很多註釋，包括一個返回互動，裡面可以設定Cordova的返回資訊，比如我們本地收到網頁的互動通知了，我們在原生的App中做完事務之後，要返回給網頁一個狀態，或者資訊，這時候我們就需要使用sendPluginResult方法來完成。
最簡單的互動返回
1.首先我們來修改index.html檔案的方法，讓網頁收到CDVCommandStatus_OK狀態的時候，把我們從App傳到網頁的資訊展示出來，在外掛部分的4步驟中，index.html已經寫好了成功的回撥，程式碼如下：
function successFunction(ok){
alert(ok);
}
2.我們來修改外掛的方法，在點選“彈出alertView”按鈕的時候，把在外掛部分的5步驟中的alertView程式碼去掉，使用如下程式碼：
__block CDVPluginResult* pluginResult = nil;
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:@"上傳給網頁的字串"];
[self.commandDelegate sendPluginResult:pluginResult callbackId:cmd.callbackId];
網頁的彈窗執行效果如下：
