Cordova - 與iOS原生代碼交互2（使用Swift開發Cordova的自定義插件）

時間  2019-11-11
標籤 cordova ios 原生 代碼 交互 使用 swift 開發 自定義 插件 欄目 Cordova 简体版
原文   原文鏈接
在前一篇文章中我介紹瞭如何經過 js 與原生代碼進行交互（Cordova - 與iOS原生代碼交互1（經過JS調用Swift方法）），當時是直接對Cordova生成的iOS工程項目進行編輯操做的（添加Swift類和相關配置等）。

原來我也說過，使用 Cordova 進行跨平臺應用開發時，不建議直接對生成的各個平臺項目進行編輯（除非目前只要開發單一平臺版本）。好比：html頁面應該是編輯Cordova工程根目錄下的 www 文件夾內容，再一次編譯發佈成多個平臺項目。

一樣的，若是須要實現與系統原生代碼的交互，咱們也應該將其封裝成一個個插件（像原來介紹過的 camera插件，console插件）。這樣就能夠實現動態地添加或移除插件，也便於在其餘項目中的複用。
本文介紹如何使用 Swift 開發一個Cordova功能插件。

1，自定義插件的功能說明
本文是將前文的口令驗證功能封裝成插件，因此最終實現的功能是同樣的。即Swift這邊接收傳輸過來的口令字符串，判斷正確與否並反饋回頁面。若是驗證失敗還會返回具體的失敗緣由信息。

2，自定義插件的使用效果圖
同前文仍是同樣的。
       原文:Cordova - 與iOS原生代碼交互2（使用Swift開發Cordova的自定義插件）       原文:Cordova - 與iOS原生代碼交互2（使用Swift開發Cordova的自定義插件）

       原文:Cordova - 與iOS原生代碼交互2（使用Swift開發Cordova的自定義插件）       原文:Cordova - 與iOS原生代碼交互2（使用Swift開發Cordova的自定義插件）

3，自定義插件的建立
咱們隨便在本地創建一個文件夾（好比叫 HanggeSwiftPlugin），在裏面放置插件的相關功能實現代碼和配置文件。目錄結構以下：
原文:Cordova - 與iOS原生代碼交互2（使用Swift開發Cordova的自定義插件）

下面分別介紹各個文件的內容和功能
（1）src文件夾
這個下面就是放置插件的功能實現代碼了，能夠看到目前 src 文件夾下只有一個 ios 子文件夾。由於本文只實現了 iOS 的驗證插件，若是還有 Android 版的驗證插件，那麼能夠在 src 文件夾下再建立個 android 文件夾，而後把相關的 java 代碼放到裏面。
因爲功能比較簡單，在 ios 文件夾下只有一個實現類 HanggeSwiftPlugin.swift，具體代碼以下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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)
     }
}

（2）hangge-swift-plugin.js
JS模塊文件，這裏封裝了插件的調用方法，這樣在頁面中使用的時候更加方便。
好比前文咱們經過 Cordova.exec() 來調用 Swift 代碼，這裏咱們使用 插件名稱.插件方法() 便可，這樣使用起來更加方便，代碼也更加清晰。其內容以下：
1
2
3
4
5
6
7
8
9
10
11
12
13
'use strict' ;
 
var exec = require( 'cordova/exec' );
 
var HanggeSwiftPlugin = {
 
   verifyPassword: function (sendMsg, onSuccess, onFail) {
     return exec(onSuccess, onFail, 'HanggeSwiftPlugin' , 'verifyPassword' , [sendMsg]);
   }
 
};
 
module.exports = HanggeSwiftPlugin;

（3）plugin.xml
插件的配置文件。用來配置插件的名字，JS模塊文件位置，以及各個平臺的功能實現源碼位置（這裏只實現的iOS的驗證功能，因此只配置了iOS平臺相關內容）。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<? xml version = "1.0" encoding = "UTF-8" ?>
< plugin xmlns = "http://apache.org/cordova/ns/plugins/1.0"
     id = "hangge-swift-plugin"
     version = "0.1" >
     
     < name >HanggeSwiftPlugin</ name >
     < description >This plugin use to verify password</ description >
     
     < js-module src = "hangge-swift-plugin.js" >
         < clobbers target = "window.HanggeSwiftPlugin" />
     </ js-module >
     
     <!-- iOS -->
     < platform name = "ios" >
         < config-file target = "config.xml" parent = "/*" >
             < feature name = "HanggeSwiftPlugin" >
                 < param name = "ios-package" value = "HWPHanggeSwiftPlugin" />
             </ feature >
         </ config-file >
         < source-file src = "src/ios/HanggeSwiftPlugin.swift" />
     </ platform >
     
</ plugin >

4，自定義插件的安裝
封裝好的插件咱們經過 cordova plugin add 命令來安裝，假設咱們要給 HelloWorld  這個工程添加剛纔作的那個自定義驗證插件。
（1）因爲插件是使用Swift語言寫的，首先在「終端」中進入到項目文件夾，並運行以下命令添加 Swift 支持插件：
1
cordova plugin add cordova-plugin-add-swift-support

（2）假設咱們作的自定義插件是在用戶「文稿」目錄下，運行以下命令把這個插件添加到工程中來：
1
cordova plugin add ~/Documents/HanggeSwiftPlugin

進入項目文件夾下的 plugins 文件夾能夠看到，自定義插件已經成功的添加進來。固然，這個自定義插件在各個平臺工程下也同步安裝了。
原文:Cordova - 與iOS原生代碼交互2（使用Swift開發Cordova的自定義插件）

（3）之後若是想移除這個自定義插件，運行以下命令便可：
1
cordova plugin rm hangge-swift-plugin

5，自定義插件的使用
修改首頁 index.html 爲以下內容。
（1）咱們仍是能夠經過Cordova.exec()來調用Swift驗證代碼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!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>

在「終端」中運行以下命令編譯：
1
cordova build
接着運行以下命令使用模擬器運行，便可看到效果：
1
cordova emulate ios

（2）固然仍是建議使用 模塊名.模塊方法() 的形式調用自定義插件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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;
                     //調用自定義的驗證插件
                     HanggeSwiftPlugin.verifyPassword(password, successFunction, failFunction);
                 }
 
                 //驗證成功
                 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>

（3）回調方法可使用匿名函數
1
2
3
4
5
6
7
8
9
10
11
//開始驗證
function verify() {
     //獲取輸入的口令
     var password = document.getElementById( "pwd" ).value;
     //調用自定義的驗證插件
     HanggeSwiftPlugin.verifyPassword(password,
       function () { alert( "口令驗證成功！" );},
       function (message){
           alert( "驗證失敗：" +message);
       });
}

（4）在使用自定義插件以前還能夠判斷下插件是否存在，以防報錯
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//開始驗證
function verify() {
     //獲取輸入的口令
     var password = document.getElementById( "pwd" ).value;
     //調用自定義的驗證插件
     if (window.HanggeSwiftPlugin) {
       HanggeSwiftPlugin.verifyPassword(password,
         function () { alert( "口令驗證成功！" );},
         function (message){
             alert( "驗證失敗：" +message);
         });
     } else {
       alert( "未安裝驗證插件!" );
     }
}

原文出自：www.hangge.com  轉載請保留原文連接：http://www.hangge.com/blog/cache/detail_1152.html
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程