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教程