Cordova – 与iOS原生代码交互2(使用Swift开发Cordova的自定义插件)

在前一篇文章中我介绍了如何通过
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,具体代码如下:

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 代码,这里我们使用
插件名称.插件方法() 即可,这样使用起来更加方便,代码也更加清晰。其内容如下:

'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平台相关内容)。

<?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 支持插件:

cordova plugin add cordova-plugin-add-swift-support

(2)假设我们做的自定义插件是在用户“文稿”目录下,运行如下命令把这个插件添加到工程中来:

cordova plugin add ~/Documents/HanggeSwiftPlugin

进入项目文件夹下的
plugins 文件夹可以看到,自定义插件已经成功的添加进来。当然,这个自定义插件在各个平台工程下也同步安装了。




(3)以后如果想移除这个自定义插件,运行如下命令即可:

cordova plugin rm hangge-swift-plugin


5,自定义插件的使用

修改首页
index.html 为如下内容。


(1)我们还是可以通过Cordova.exec()来调用Swift验证代码

<!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>

在“终端”中运行如下命令编译:

cordova build

接着运行如下命令使用模拟器运行,即可看到效果:

cordova emulate ios


(2)当然还是建议使用 模块名.模块方法() 的形式调用自定义插件

<!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)回调方法可以使用匿名函数

//开始验证
function verify() {
    //获取输入的口令
    var password = document.getElementById("pwd").value;
    //调用自定义的验证插件
    HanggeSwiftPlugin.verifyPassword(password,
      function() { alert("口令验证成功!");},
      function(message){
          alert("验证失败:"+message);
      });
}


(4)在使用自定义插件之前还可以判断下插件是否存在,以防报错

//开始验证
function verify() {
    //获取输入的口令
    var password = document.getElementById("pwd").value;
    //调用自定义的验证插件
    if (window.HanggeSwiftPlugin) {
      HanggeSwiftPlugin.verifyPassword(password,
        function() { alert("口令验证成功!");},
        function(message){
            alert("验证失败:"+message);
        });
    }else{
      alert("未安装验证插件!");
    }
}

源码下载

HanggeSwiftPlugin.zip

THE END