在前一篇文章中我介绍了如何通过 js 与原生代码进行交互（Cordova - 与iOS原生代码交互1（通过JS调用Swift方法）），当时是直接对Cordova生成的iOS工程项目进行编辑操作的（添加Swift类和相关配置等）。
原来我也说过，使用 Cordova 进行跨平台应用开发时，不建议直接对生成的各个平台项目进行编辑（除非目前只要开发单一平台版本）。比如：html页面应该是编辑Cordova工程根目录下的 www 文件夹内容，再一次编译发布成多个平台项目。
同样的，如果需要实现与系统原生代码的交互，我们也应该将其封装成一个个插件（像原来介绍过的 camera插件，console插件）。这样就可以实现动态地添加或移除插件，也便于在其他项目中的复用。
本文介绍如何使用 Swift 开发一个Cordova功能插件。
1，自定义插件的功能说明

本文是将前文的口令验证功能封装成插件，所以最终实现的功能是一样的。即Swift这边接收传输过来的口令字符串，判断正确与否并反馈回页面。如果验证失败还会返回具体的失败原因信息。

2，自定义插件的使用效果图
同前文还是一样的。

            
            
3，自定义插件的创建
我们随便在本地建立一个文件夹（比如叫 HanggeSwiftPlugin），在里面放置插件的相关功能实现代码和配置文件。目录结构如下：
下面分别介绍各个文件的内容和功能
（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"?>
    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 文件夹可以看到，自定义插件已经成功的添加进来。当然，这个自定义插件在各个平台工程下也同步安装了。

（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

Cordova - 与iOS原生代码交互2（使用Swift开发Cordova的自定义插件）的更多相关文章

  1. Cordova - 与iOS原生代码交互1（通过JS调用Swift方法）

    在前面的文章中介绍的了如何使用Cordova进行跨平台应用的开发,使用Cordova的话基本上就不需要在写系统原生代码了,只要通过编写html页面和js方法即可. 但在有些特殊情况下,还是是需要htm ...

  2. cordova与ios native code交互的原理

    非常早曾经写了一篇博客,总结cordova插件怎么调用到原生代码:cordova调用过程,只是写得太水.基本没有提到原理.近期加深了一点理解,又一次补充说明一下 js调用native 以下是我们产品中 ...

  3. unity调用ios原生代码objective-c和回调

    从c#到objective-c学习 https://www.runoob.com/w3cnote/objective-c-tutorial.html https://www.jianshu.com/p ...

  4. Unity与iOS原生代码之间的相互调用

    1.Unity调用iOS: 1.1.在Unity C#中: [ DllImport( "__Internal" )] private static extern int _show ...

  5. RN和IOS原生端交互

    1.RCTBridgeModule #import <Foundation/Foundation.h> #import "RCTBridgeModule.h" #imp ...

  6. 使用原生代码实现一个Events模块，可以实现自定义事件的订阅、触发、移除功能

    function Events() { // 放置所有添加的 监听事件 this._events = {} } Events.prototype = { on: function (name, fn, ...

  7. iOS原生APP与H5+JS交互////////////////////zzzz

    原生代码中直接加载页面 1.    具体案例 加载本地/网络HTML5作为功能介绍页 2.    代码示例 //本地 -(void)loadLocalPage:(UIWebView*)webView ...

  8. PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码

    PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...

  9. iOS原生和React-Native之间的交互1

    今天,记录一下iOS原生和React-Native之间的交互.如果第一次接触最好先移步至 http://www.cnblogs.com/shaoting/p/6388502.html 先看一下怎么在i ...

随机推荐

  1. 创建用户故事地图(User Story Mapping)的8个步骤

    ［小编］上周六了解了用户故事地图后,小编又查阅了一些资料,找到了以下这篇关于如何组织用户故事地图规划的文章,分享给大家.也希望大家如果有好的实践,也可以留言一起交流. 原文地址:http://winn ...

  2. 测试必备技能系列1 ：通过mysql命令进行脚本数据导入

    老徐,分享测试项目中实际能解决问题的干货!   今日分享: 如何通过mysql命令行,导入mysql脚本文件数据?   ----- 解决实际的问题: 工作过程中,经常需要导入mysql脚本文件 很多同 ...

  3. SQL Server（二）——语句

    表的创建: 1.创建列(字段):列名+类型 2.设置主键列(primary key):能够唯一标识一条数据 3.设置唯一(unique):内容不能重复 4.外键关系:一张表(从表)其中的某列引用自另外 ...

  4. SQL Server 2000：提示“未与信任SQL SERVER连接相关连”错误

    在使用“用户模式”登陆SQL Server 2000时提示“未与信任SQL SERVER连接相关连”错误,因为在安装SQL Server时选择“仅Windows”模式,所以所有用户都不可以登陆. 解决 ...

  5. java web 中的servlet讲解

    首先,解释一下解释一下什么是servlet?说一说Servlet的生命周期? servlet有良好的生存期的定义,包括加载和实例化.初始化.处理请求以及服务结束.这个生存期由javax.servlet ...

  6. 烂泥：【转】rsync命令参数详解

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. rsync安装完毕后,我们可以通过rsync –help查看rysnc命令的使用.如下: 有关rsync的命令格式,在此我们就不多介绍了.如果有想了解的 ...

  7. 多CPU下基于e1000e驱动的数据包以及网卡中断流程分析.doc

    http://wenku.baidu.com/link?url=mMKDH_fKmUXN7L6rANIFHjoHdKCYBLlDrqoYB1daDTEkNFk9Bt9xlJtS_4BKBj6w22WD ...

  8. 异或的精彩应用 FIX_BTMAP_END

    源文件是arch/x86/include/asm/fixmap.henum fixed_addresses {#ifdef CONFIG_X86_32        FIX_HOLE,...    _ ...

  9. uva 6757 Cup of Cowards（中途相遇法，貌似）

    uva 6757 Cup of CowardsCup of Cowards (CoC) is a role playing game that has 5 different characters (M ...

  10. Puppet3在CentOS6.5集群下的安装

    环境:3台主机, IP分别为10.211.55.11.12.13 puppet master安装在10.211.55.11 puppet agent安装在10.211.55.11.12.13 1.安装 ...