本文轉(zhuǎn)自：http://www.cnblogs.com/zhwl/archive/2013/07/26/3217155.html

本文細(xì)致探討了 Xcode（以 iOS 設(shè)備為目標(biāo)）中的 PhoneGap（也稱為 Apache Cordova）應(yīng)用程序本機(jī)插件。如果您剛開始接觸 PhoneGap 或者需要回顧 PhoneGap 基礎(chǔ)知識(shí)，請(qǐng)先閱讀 Xcode for iOS 的 PhoneGap 入門，然后再繼續(xù)閱讀本文。

本文交替使用術(shù)語(yǔ) Cordova 和 PhoneGap 指示同一開源應(yīng)用程序平臺(tái)，該平臺(tái)可供您使用 HTML 和 JavaScript 創(chuàng)建本機(jī)安裝的移動(dòng)應(yīng)用程序。PhoneGap 代碼庫(kù)已遷移至 Apache 軟件基金會(huì)的開放資源中，名為 Cordova。Adobe 則仍以 PhoneGap 名稱進(jìn)行分發(fā)。有關(guān)更多信息，請(qǐng)參閱 Brian Leroux 發(fā)布的博客文章“PhoneGap、Cordova、名稱有什么關(guān)系？”正如 Brian 在這篇文章中所說(shuō)，“目前唯一的區(qū)別在于下載包名稱的不同，并且這種情況仍將維持一段時(shí)間。

PhoneGap 不僅可讓您利用 Web 技術(shù)為本機(jī)安裝的移動(dòng)應(yīng)用程序構(gòu)建用戶界面，還能提供基于 JavaScript 的 API 供您與本機(jī)設(shè)備功能進(jìn)行交互。默認(rèn)情況下，PhoneGap 可訪問(wèn)設(shè)備攝像頭、加速計(jì)、文件系統(tǒng)、GPS 位置及其他功能間的媒體重放。但是，PhoneGap 并未揭示供您在 JavaScript 應(yīng)用程序內(nèi)使用的每一個(gè)本機(jī) API。如果您希望 PhoneGap 執(zhí)行其默認(rèn)功能集以外的操作，可以使用 PhoneGap 本機(jī)插件模型擴(kuò)展核心 PhoneGap API 的功能。

PhoneGap 本機(jī)插件與桌面瀏覽器的插件不同；它們?yōu)槟峁┝艘环N插件自定義代碼以增加 PhoneGap 應(yīng)用程序框架功能的方式。PhoneGap 本機(jī)插件可讓您以本機(jī)代碼的形式創(chuàng)建全新的自定義功能，并通過(guò) PhoneGap 的本機(jī)-JavaScript 橋?qū)⑵滹@示給 PhoneGap 應(yīng)用程序。這意味著，您可以顯示所有本機(jī)庫(kù)或框架，以便在基于 JavaScript 的 PhoneGap 應(yīng)用程序內(nèi)部使用。

了解 PhoneGap 本機(jī)插件的結(jié)構(gòu)

在您開始編寫 PhoneGap 本機(jī)插件之前，了解 PhoneGap 應(yīng)用程序容器如何向基于 JavaScript 的應(yīng)用程序顯示本機(jī)操作系統(tǒng)功能將會(huì)有所幫助。

所有 Cordova API 均包含以下兩個(gè)有關(guān)部件：一個(gè)可以在您的應(yīng)用程序內(nèi)部進(jìn)行訪問(wèn)的基于 JavaScript 的界面，以及用于以本機(jī)代碼執(zhí)行操作的對(duì)應(yīng)本機(jī)類。通常情況下，JavaScript 類和本機(jī)類具有相互鏡像的 API，這樣就能輕松地進(jìn)行跟蹤。JavaScript 類使用 Cordova.exec() 函數(shù)調(diào)用本機(jī)代碼。當(dāng)它調(diào)用 Cordova.exec 時(shí)，可將其傳遞至結(jié)果處理程序函數(shù)和錯(cuò)誤處理程序函數(shù)，同時(shí)還會(huì)將一組參數(shù)傳遞至本機(jī)代碼，并將引用傳遞至本機(jī)類名稱和本機(jī)函數(shù)名稱。Cordova 將負(fù)責(zé)管理 JavaScript 與本機(jī)之間的通信，您可以專心構(gòu)建自己的應(yīng)用程序。

要了解有關(guān) PhoneGap 本機(jī)插件的更多信息，請(qǐng)登錄 Cordova wiki 查看該核心 API 的源代碼。整個(gè) PhoneGap 框架均構(gòu)建于同一模式之上，您可以在這里了解這一模式。

構(gòu)建首個(gè)插件

要開始構(gòu)建您的首個(gè) PhoneGap 插件，您需要按照 Xcode for iOS 的 PhoneGap 入門一文中所述的步驟創(chuàng)建一個(gè)新 PhoneGap 項(xiàng)目。我將自己的項(xiàng)目命名為 MyFirstPhoneGapNativePlugin。

JavaScript 類

在您設(shè)置完 Hello Xcode 項(xiàng)目后， 即可準(zhǔn)備為本機(jī)插件創(chuàng)建 JavaScript 界面。您需要使用函數(shù)（將要鏡像通過(guò)本機(jī)代碼顯示的邏輯）創(chuàng)建類。在 www 文件夾下，創(chuàng)建一個(gè)名為 HelloPlugin.js 的 JavaScript 文件，其中包含如下所示的簡(jiǎn)單 JavaScript 類。

var HelloPlugin = { callNativeFunction: function (success, fail, resultType) { return Cordova.exec( success, fail, "com.tricedesigns.HelloPlugin", "nativeFunction", [resultType]); } };

HelloPlugin 類包含一個(gè)名為 callNativeFunction 的函數(shù)，它接收了一個(gè)成功回調(diào)函數(shù)、一個(gè)錯(cuò)誤回調(diào)函數(shù)和一個(gè) resultType 字符串參數(shù)。callNativeFunction 函數(shù)包含 Cordova.exec 函數(shù)，因而將會(huì)調(diào)用實(shí)際本機(jī)代碼。此類中沒(méi)有其他 JavaScript，但您可以根據(jù)自身需要在此處添加 JavaScript 代碼。

調(diào)用 Cordova.exec 后，將會(huì)看到以下五個(gè)參數(shù)：

• 一個(gè)成功回調(diào)函數(shù)（本機(jī)代碼層成功響應(yīng)時(shí)調(diào)用的函數(shù)）引用
• 一個(gè)錯(cuò)誤回調(diào)函數(shù)（本機(jī)代碼層錯(cuò)誤響應(yīng)時(shí)調(diào)用的函數(shù)）
• 一個(gè)本機(jī)代碼類字符串引用（我將會(huì)在下文進(jìn)行詳細(xì)介紹）
• 一個(gè)應(yīng)當(dāng)調(diào)用的函數(shù)名稱字符串引用
• 一個(gè)將要傳遞至本機(jī)代碼的參數(shù)數(shù)組

請(qǐng)記住，JavaScript 和本機(jī)代碼層之間的代碼執(zhí)行操作并不同步，因此，在開發(fā) PhoneGap 本機(jī)插件時(shí)需要使用回調(diào)函數(shù)和異步編碼實(shí)踐。

本機(jī)類

要?jiǎng)?chuàng)建本機(jī)代碼層，請(qǐng)首先創(chuàng)建一個(gè)新的本機(jī) Objective-C 類，它擴(kuò)展核心 Cordova API 的 CDVPlugin 類：

右鍵單擊 PhoneGap 項(xiàng)目?jī)?nèi)的 Plugins 目錄，然后選擇 New File（參見圖 1）。

圖 1. 創(chuàng)建新文件。

在 New File 向?qū)е?#xff0c;選擇 Objective-C 類模板，然后單擊 Next（參見圖 2）。

圖 2. 選擇 Object-C class 模板。

鍵入 HelloPlugin 作為新類的名稱，并將該類納為 CDVPlugin 的子類（參見圖 3）。

圖 3. 命名該類。

CDVPlugin 類是所有 Cordova 類均必須擴(kuò)展的父類。CDVPlugin 類通過(guò) PhoneGAP API 封裝本機(jī) JavaScript 通信所需的所有必要邏輯。PhoneGap.exec 函數(shù)可讓您調(diào)用該新類上的函數(shù)。CDVPlugin 類包含一個(gè)名為 writeJavascript 的核心函數(shù)，可讓您調(diào)用 PhoneGap 應(yīng)用程序 Web 視圖內(nèi)的 JavaScript。本機(jī)到 Web JavaScript 這一方向的所有通信均必須使用 writeJavascript 函數(shù)完成。

單擊 Next。

出現(xiàn)提示后，為新文件指定位置（最好指定在 Xcode 項(xiàng)目?jī)?nèi)的 Plugins 目錄下），然后單擊 Finish 繼續(xù)操作。

您將會(huì)在 PhoneGap 項(xiàng)目?jī)?nèi)看到一個(gè)新的頭文件 (.h) 和一個(gè)新的實(shí)現(xiàn)文件 (.m)（參見圖 4）。

圖 4. 新的本機(jī)類文件。

接下來(lái)，在您的 .h 文件中為 nativeFunction 函數(shù)添加定義；例如：

#import <Cordova/CDV.h> @interface HelloPlugin : CDVPlugin - (void) nativeFunction:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options; @end

此定義包含以下兩個(gè)參數(shù)：一個(gè)是 NSMutableArray，其中包含從 JavaScript 層和選項(xiàng)字典（地圖）接收到的參數(shù)。在本例中，您只需要關(guān)注參數(shù)數(shù)組。頭文件只包含方法簽名；您無(wú)需在 .h 文件中包含任何應(yīng)用程序邏輯。

在您創(chuàng)建類簽名后，將邏輯添加到 .m 文件的 nativeFunction 函數(shù)實(shí)例中。您將在下面看到此本機(jī)插件類內(nèi)部使用的 Objective-C 函數(shù)示例。

#import "HelloPlugin.h" @implementation HelloPlugin - (void) nativeFunction:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options { //get the callback id NSString *callbackId = [arguments pop]; NSLog(@"Hello, this is a native function called from PhoneGap/Cordova!"); NSString *resultType = [arguments objectAtIndex:0]; CDVPluginResult *result; if ( [resultType isEqualToString:@"success"] ) { result = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString: @"Success :)"]; [self writeJavascript:[result toSuccessCallbackString:callbackId]]; } else { result = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString: @"Error :("]; [self writeJavascript:[result toErrorCallbackString:callbackId]]; } } @end

在 nativeFunction 方法內(nèi)部，您首先需要獲取一個(gè) NSString callbackId 引用，核心 PhoneGap API 借此將此函數(shù)響應(yīng)映射到調(diào)用此函數(shù)的原始 JavaScript。

接下來(lái)，此方法使用 NSLog 將消息寫入 Xcode 調(diào)試控制臺(tái)；這只是表明它目前正在執(zhí)行本機(jī)代碼。

寫入到調(diào)試控制臺(tái)后，該函數(shù)將會(huì)檢查傳遞到該函數(shù)的 resultType，然后創(chuàng)建相應(yīng)的 CDVPluginResult 實(shí)例。resultType 值是一個(gè)簡(jiǎn)單字符串。如果 resultType 是 success"，則該函數(shù)將創(chuàng)建 success 結(jié)果，并使用 [self writeJavascript] 函數(shù)將成功回調(diào)函數(shù)寫入 JavaScript 層。任何其他 resultType 參數(shù)值均將生成 error 結(jié)果，并且該函數(shù)會(huì)將錯(cuò)誤回調(diào)寫入 JavaScript 層。

當(dāng)您將成功或錯(cuò)誤回調(diào)函數(shù)寫回 JavaScript 時(shí)，始終使用 CDVPluginResult 實(shí)例。但是，您也可以使用 writeJavascript 函數(shù)將任意 JavaScript 字符串傳遞回 JavaScript 層。這項(xiàng)技術(shù)甚至還可用于將數(shù)據(jù)從本機(jī)層實(shí)時(shí)推送至 JavaScript 層。

調(diào)用插件

鑒于您已經(jīng)創(chuàng)建插件，因而可以從 PhoneGap 應(yīng)用程序內(nèi)部進(jìn)行調(diào)用。

首先，您需要向新插件的 JavaScript 接口類 (HelloPlugin.js) 添加一個(gè)引用。在您的 index.html 文件內(nèi)添加一個(gè)新的 <script> 標(biāo)記：

<script type="text/javascript" charset="utf-8" src="HelloPlugin.js"></script>

同樣也是在onDeviceReady() 函數(shù)后，添加 JavaScript 以調(diào)用本機(jī)插件及處理插件結(jié)果。添加名為 callNativePlugin、nativePluginResultHandler 和 nativePluginErrorHandler 的 JavaScript 函數(shù)，如下所示：

function callNativePlugin( returnSuccess ) { HelloPlugin.callNativeFunction( nativePluginResultHandler, nativePluginErrorHandler, returnSuccess ); } function nativePluginResultHandler (result) { alert("SUCCESS: \r\n"+result ); } function nativePluginErrorHandler (error) { alert("ERROR: \r\n"+error ); }

callNativePlugin 函數(shù)只需調(diào)用 JavaScript 的本機(jī)插件類接口。當(dāng)其調(diào)用 callNativeFunction 方法時(shí)，即會(huì)傳遞從本機(jī)代碼層接收到的成功和錯(cuò)誤狀態(tài)回調(diào)函數(shù)。如果本機(jī)層成功返回回調(diào)函數(shù)，將會(huì)調(diào)用 nativePluginResultHandler 函數(shù)，而當(dāng)本機(jī)層傳回錯(cuò)誤回調(diào)時(shí)，則調(diào)用 nativePluginErrorHandler 函數(shù)。

接下來(lái)，根據(jù)下列代碼添加兩個(gè) JavaScript 按鈕以調(diào)用該插件。

<body onload="onBodyLoad()"> <h1>Hey, it's Cordova!</h1> <button onclick="callNativePlugin('success');">Click to invoke the Native Plugin with an SUCCESS!</button> <button onclick="callNativePlugin('error');">Click to invoke the Native Plugin with an ERROR!</button> </body>

單擊第一個(gè)按鈕將調(diào)用 callNativeFunction 方法，同時(shí)生成參數(shù) "success"。PhoneGap 將于隨后執(zhí)行本機(jī)代碼并在 JavaScript 層調(diào)用成功回調(diào)（它將會(huì)調(diào)用 nativePluginResultHandler 函數(shù)）。

當(dāng)您單擊第二個(gè)按鈕時(shí)，將會(huì)調(diào)用 callNativeFunction 方法，同時(shí)生成參數(shù) "error"。PhoneGap 將執(zhí)行本機(jī)代碼并在 JavaScript 層調(diào)用錯(cuò)誤回調(diào)（它將會(huì)調(diào)用 nativePluginErrorHandler 函數(shù)）。

映射本機(jī)代碼類

此時(shí)，您幾乎已將所有事物串聯(lián)起來(lái)并可準(zhǔn)備執(zhí)行操作，但您還必須再完成一個(gè)步驟，才能調(diào)用 JavaScript 中的本機(jī)代碼。

您必須添加一個(gè)映射，以便 Cordova 識(shí)別您的本機(jī)代碼類。還記得在調(diào)用 Cordova.exec 時(shí)用來(lái)識(shí)別本機(jī)類的字符串引用嗎？您需要將該字符串映射到 Cordova.plist 文件中的實(shí)際類實(shí)例。Cordova.plist 文件包含當(dāng)前 Cordova 項(xiàng)目的所有配置信息。

在項(xiàng)目導(dǎo)航器中，打開 Supporting Files 文件夾，然后單擊名為 Cordova.plist 的文件。

在右側(cè)向下滾動(dòng)至 Plugins 條目并單擊將其展開。

添加一個(gè)帶有 code>com.tricedesigns.HelloPlugin 項(xiàng)和 "HelloPlugin" 值的條目（參見圖 5），用貴公司的標(biāo)識(shí)替換 com.tricedesigns。當(dāng)調(diào)用 Cordova.exec 時(shí)，您將利用此字符串引用識(shí)別第三個(gè)參數(shù)中的本機(jī)類。

key 是 PhoneGap.exec 映射至本機(jī)代碼類所使用的唯一一個(gè)字符串引用。value是將要調(diào)用的實(shí)際本機(jī)類名稱。

保存更改。

圖 5. 編輯 Cordova.plist。

現(xiàn)在，您可以啟動(dòng)該應(yīng)用程序并進(jìn)行徹底檢查。

要啟動(dòng)該應(yīng)用程序，請(qǐng)單擊 Run 按鈕或選擇 Product > Run。

在 iOS Simulator 中（或連接設(shè)備上）啟動(dòng)該應(yīng)用程序后，您將會(huì)看到帶有兩個(gè)按鈕的簡(jiǎn)單界面（參見圖 6）。單擊任一按鈕調(diào)用本機(jī)插件的本機(jī)代碼，無(wú)論調(diào)用成功回調(diào)還是錯(cuò)誤回調(diào)，都會(huì)通過(guò) JavaScript 顯示一條警告消息。

圖 6. iOS 模擬器中運(yùn)行的應(yīng)用程序。

當(dāng)調(diào)用本機(jī)代碼時(shí)，您還能夠在 Xcode 調(diào)試控制臺(tái)窗口中看到輸出內(nèi)容，反映調(diào)用本機(jī)插件 NSLog 生成的輸出內(nèi)容（參見圖 7）。

圖 7. Xcode 調(diào)試控制臺(tái)的記錄信息。

下一步閱讀方向

現(xiàn)在，您已經(jīng)了解如何在 iOS 設(shè)備上開始為 PhoneGap 應(yīng)用程序創(chuàng)建本機(jī)插件。您可以利用這項(xiàng)技術(shù)訪問(wèn)核心 PhoneGap SDK 未顯示的 iOS 框架，包括（但不僅限于）游戲中心、核心音頻及 Bonjour 框架，或者任何其他本機(jī)代碼。與此同時(shí)，不要忘記檢查開源社區(qū)已經(jīng)開發(fā)的大量現(xiàn)有 GitHub PhoneGap 本機(jī)插件。

+

本產(chǎn)品經(jīng) Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 許可。Adobe 提供超出該許可范圍、與本產(chǎn)品包含的代碼示例相關(guān)的權(quán)限。

轉(zhuǎn)載于:https://www.cnblogs.com/luoguoqiang1985/p/3492205.html

總結(jié)

以上是生活随笔為你收集整理的系统设计 － 使用面向 iOS 的本机插件扩展的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。