Cordova - 與iOS原生代碼交互1（經過JS調用Swift方法）

時間 2019-11-11

標籤 cordova ios 原生代碼交互經過調用 swift 方法欄目 Cordova 简体版

原文原文鏈接

在前面的文章中介紹的瞭如何使用Cordova進行跨平臺應用的開發，使用Cordova的話基本上就不須要在寫系統原生代碼了，只要經過編寫html頁面和js方法便可。

但在有些特殊狀況下，仍是是須要html頁面能和系統原生代碼（ ios native code）進行交互。下面介紹如何實現 JS 與 Swift 代碼間的相互通訊。

假設咱們已經創建了一個名叫 HelloWorld 的Cordova工程項目（不太清楚如何使用Cordova的能夠參考我前面寫的幾篇文章：使用Cordova開發iOS應用實戰1（配置、開發第一個應用））

1，樣例說明
（1）雖然使用Cordova建立的工程是一個 OC 工程，但因爲蘋果能夠很方便的支持混合編程，因此咱們用 Swift 來實現與 JS 的交互也是能夠的。
（2）這裏咱們使用Swift來作個口令驗證的功能，因爲只是演示，因此代碼很簡單。Swift這邊接收傳輸過來的口令字符串，判斷正確與否並反饋回頁面。若是驗證失敗還會返回具體的失敗緣由信息。

2，樣例效果圖

3，實現步驟

（1）咱們在 Plugins 文件夾中新建一個Swift文件（HanggeSwiftPlugin.swift）。建立的時候系統會提示是否同時建立橋接頭文件，這裏選擇肯定。

（2）在新生成的橋接頭文件 HelloWorld-Bridging-Header.h 中把 Cordova/CDV.h 給 import 進來

 
         #import < 
         Cordova 
         /CDV.h>

（3）新建的 HanggeSwiftPlugin.swift 中添加以下代碼

 
         import 
         Foundation 
        
         @objc 
         ( 
         HWPHanggeSwiftPlugin 
         )  
         class 
         HanggeSwiftPlugin 
         :  
         CDVPlugin 
         { 
        
         //驗證口令方法 
        
         func 
         verifyPassword(command: 
         CDVInvokedUrlCommand 
         ) 
        
         { 
        
         //返回結果 
        
         var 
         pluginResult: 
         CDVPluginResult 
         ? 
        
         //獲取參數 
        
         let 
         password = command.arguments[0]  
         as 
         ?  
         String 
        
         //開始驗證 
        
         if 
         password ==  
         nil 
         || password ==  
         "" 
         { 
        
         pluginResult =  
         CDVPluginResult 
         (status:  
         CDVCommandStatus_ERROR 
         , 
        
         messageAsString:  
         "口令不能爲空" 
         ) 
        
         } 
         else 
         if 
         password !=  
         "hangge" 
         { 
        
         pluginResult =  
         CDVPluginResult 
         (status:  
         CDVCommandStatus_ERROR 
         , 
        
         messageAsString:  
         "口令不正確" 
         ) 
        
         } 
         else 
         { 
        
         pluginResult =  
         CDVPluginResult 
         (status: 
         CDVCommandStatus_OK 
         ) 
        
         } 
        
         //發送結果 
        
         self 
         .commandDelegate.sendPluginResult(pluginResult, callbackId: command.callbackId) 
        
         } 
        
         }

（4）在 config.xml 中添加以下配置，將咱們建立的功能類給配置上

 
         < 
         feature 
         name 
         = 
         "HanggeSwiftPlugin" 
         > 
        
         < 
         param 
         name 
         = 
         "ios-package" 
         value 
         = 
         "HWPHanggeSwiftPlugin" 
         /> 
        
         </ 
         feature 
         >

（5）首頁 index.html 代碼以下，修改運行後便可看到效果。

 
         <!DOCTYPE html> 
        
         <html> 
        
         <head> 
        
         <title>口令驗證</title> 
        
         <meta http-equiv= 
         "Content-type" 
         content= 
         "text/html; charset=utf-8" 
         > 
        
         <script type= 
         "text/javascript" 
         charset= 
         "utf-8" 
         src= 
         "cordova.js" 
         ></script> 
        
         <script type= 
         "text/javascript" 
         charset= 
         "utf-8" 
         > 
        
         //開始驗證 
        
         function 
         verify() { 
        
         //獲取輸入的口令 
        
         var 
         password = document.getElementById( 
         "pwd" 
         ).value; 
        
         //調用自定義的驗證插件 
        
         Cordova.exec(successFunction, failFunction,  
         "HanggeSwiftPlugin" 
         , 
        
         "verifyPassword" 
         , [password]); 
        
         } 
        
         //驗證成功 
        
         function 
         successFunction(){ 
        
         alert( 
         "口令驗證成功！" 
         ); 
        
         } 
        
         //驗證失敗 
        
         function 
         failFunction(message){ 
        
         alert( 
         "驗證失敗：" 
         +message); 
        
         } 
        
         </script> 
        
         <style> 
        
         * { 
        
         font-size:1em; 
        
         } 
        
         </style> 
        
         </head> 
        
         <body style= 
         "padding-top:50px;" 
         > 
        
         <input type= 
         "text" 
         id= 
         "pwd" 
         > 
        
         <button onclick= 
         "verify();" 
         >驗證</button> 
        
         </body> 
        
         </html>