Cordova自定义插件的开发

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

1. 创建Git仓库管理插件

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

2. 插件定义

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

    Demo
    Easter Plugin Demo
    Easter
    easter,demo

3. JS接口实现

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

    Demo
    Easter Plugin Demo
    Easter
    easter,demo

    
        
    

接下来我们实现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类作为消息入口。

    Demo
    Easter Plugin Demo
    Easter
    easter,demo

    
        
    

    
        
            
                
            
        

        
        
    

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

ESDemo.h

#import 

@interface ESDemo : CDVPlugin

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

@end

ESDemo.m

#import "ESDemo.h"
#import 


@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