Cordova自定义插件的开发

在Cordova项目的开发过程中，一些功能通过Web端的技术很难/无法实现，此时需要借助Cordova插件来调用Native代码实现。Cordova为我们提供了丰富的插件库，实现了诸如获取设备信息，获取通讯录，设置设备状态栏等基本功能。但有时我们仍需实现自定义的插件以满足项目需要，下面以iOS为例介绍其开发过程。

1. 创建Git仓库管理插件

在Github或是其他Git服务器上创建一个仓库：
https://github.com/easyfisher/easter-plugin-demo.git

2. 插件定义

在根目录下添加plugin.xml以定义一个插件。其中id是插件的唯一标识，安装插件时如果项目中有相同id的会被覆盖。

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://easter.com/mobile/plugins/1.0"
        id="easter-plugin-demo" version="1.0.0">
    <name>Demo</name>
    <description>Easter Plugin Demo</description>
    <license>Easter</license>
    <keywords>easter,demo</keywords>
</plugin>

3. JS接口实现

在plugin.xml中增加接口定义。下面js-module中的内容将www/Demo.js中实现的module导出为可全局访问的变量easter.demoPlugin。

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://easter.com/mobile/plugins/1.0"
        id="easter-plugin-demo" version="1.0.0">
    <name>Demo</name>
    <description>Easter Plugin Demo</description>
    <license>Easter</license>
    <keywords>easter,demo</keywords>

    <js-module src="www/Demo.js" name="Demo">
        <clobbers target="easter.demoPlugin" />
    </js-module>
</plugin>

接下来我们实现www/Demo.js。其中提供了greeting方法用于向Native代码传递消息。

var exec = require('cordova/exec');

var Demo = {};

Demo.greet = function(message, success, failure) {
  exec(success, failure, "Demo", "greet", [message]);
}

module.exports = Demo;

4.Native代码实现

在plugin.xml中添加Native相关配置。其中feature定义了ESDemo类作为消息入口。

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://easter.com/mobile/plugins/1.0"
        id="easter-plugin-demo" version="1.0.0">
    <name>Demo</name>
    <description>Easter Plugin Demo</description>
    <license>Easter</license>
    <keywords>easter,demo</keywords>

    <js-module src="www/Demo.js" name="Demo">
        <clobbers target="easter.demoPlugin" />
    </js-module>

    <platform name="ios">
        <config-file target="config.xml" parent="/*">
            <feature name="Demo">
                <param name="ios-package" value="ESDemo"/>
            </feature>
        </config-file>

        <header-file src="src/ios/ESDemo.h" />
        <source-file src="src/ios/ESDemo.m" />
    </platform>
</plugin>

下面实现ESDemo类。greet方法接收JS端传来的greet消息并在屏幕上显示一个提示框。至此我们就可以调用其他的本地代码以实现项目需要。

ESDemo.h

#import <Cordova/CDVPlugin.h>

@interface ESDemo : CDVPlugin

- (void)greet:(CDVInvokedUrlCommand*)command;

@end

ESDemo.m

#import "ESDemo.h"
#import <Cordova/CDVPlugin.h>


@implementation ESDemo

- (void)greet:(CDVInvokedUrlCommand*)command {
    NSString *message = command.arguments[0];
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"" message:message preferredStyle:UIAlertControllerStyleAlert];
    
    UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil];
    [alertController addAction:okAction];
    
    UIViewController *rootController = [UIApplication sharedApplication].delegate.window.rootViewController;
    [rootController presentViewController:alertController animated:YES completion:nil];
}

@end

5. 插件的安装与调试

在Cordova项目目录下运行以下命令来安装插件。安装后就可以在全局调用easter.demoPlugin('message')来使用了。

$ cordova plugin add https://github.com/easyfisher/easter-plugin-demo.git

---

参考文章

Plugin Development Guide
iOS Plugin Development Guide
Android Plugin Development Guide