Cordova那些事儿（四）——Cordova插件开发

Cordova LOGO

编写规则

具体规则参见官网文档，比较清晰，有示例。
详情参考：
Plugin Development Guide
iOS Plugin Development Guide
Android Plugin Development Guide

一、Cordova-Plugin的组成部分

./cordova-plugin-network-information/
|-src/ ................................. 插件原生部分代码
|  |-android/ .......................... Android 平台
|  |  '-NetworkManager.java*
|  |-browser/ .......................... 浏览器 平台
|  |  '-network.js
|  '-ios/ .............................. iOS 平台
|      |-CDVConnection.h
|      |-CDVConnection.m
|      |-CDVReachability.h
|      '-CDVReachability.m
|-tests/ ............................... 测试
|  |-plugin.xml
|  '-tests.js
|-www/ ................................. 与原生桥接的 JS，如果不同平台代码有差异，这个文件夹下，也可以再分平台
|  |-android/
|  |-ios/
|  |-Connection.js
|  '-network.js
|-package.json ......................... 描述文件（用于在代码库注册关键字、描述依赖等）
`-plugin.xml ........................... 配置文件（安装插件时，会安装到平台的 config.xml 中）

二、插件中，负责桥接部分的 JS

可以多个平台共用，如有区别，也可以每个平台分开编写

cordova.define("mytestplg.ttt", function(require, exports, module) {
    var exec = require('cordova/exec');

    // 成功回调函数
    function successCallback(oo) {
        alert('ok ' + oo);
    }

    // 失败回调函数
    function failureCallback(ee) {
        alert('err ' + ee);
    }
    // 这里用于编写对外提供的调用方法
    var myJSObj = {
        myAdd: function(arg1, arg2) {
            alert('exec');
            //！！！重要！exec 是调用的核心方法，这里 exec 的五个参数：
            var ret = exec(
                successCallback, // 成功回调函数
                failureCallback, // 失败回调函数
                "MyPlugin2",     // config.xml 中对应 feature 的 name
                "doMyAdd",       // iOS 中为调用的具体方法名，通过 runtime 执行；Android中会执行固定方法，但是会把这个值作为参数传入，原生 Android 代码根据参数值来做区分执行
                [arg1, arg2]     // 参数数组
            );
            alert('rrr ' + ret);
            return ret;
        },
        vv: 'abc'
    };
    module.exports = myJSObj;
});

三、插件配置文件 plugin.xml

插件配置文件，安装时，根据配置，做相应平台的设置

• header-file、source-file 标签：插件原生代码路径，用于将文件复制到各个工程原生代码中
• config-file 标签：用于指定配置文件
• feature 标签：重要！！！用于指定各平台插件的配置方案，安装时，会把相应平台的配置，插入各个平台的 config.xml。插件负责桥接的 JS 中，exec 的第三个参数，就是 feature 的 name，feature 中，会指定插件加载的具体类
• js-module 标签：指定平台桥接 JS 的文件
• clobbers 标签：指定平台桥接 JS 中输出的对象注入的全局变量。由于这个变量由 HTML 开发人员在各平台统一调用，所以该值尽量要在各平台保持一致，这部分会被插入到 cordova_plugins.js 中，格式如下：

/**
    cordova_plugins.js
    此文件由命令行根据配置文件自动生成，不用修改。
    这里只做格式展示。
*/
cordova.define('cordova/plugin_list', function(require, exports, module) {
    module.exports = [{
        "file": "plugins/mytestplg/www/ttt.js", //js接口文件
        "id": "mytestplg.ttt", //标识
        "pluginId": "mytestplg-ttt", //标识
        "clobbers": [
            "ttt" //注入到浏览器中的变量名
        ]
    }];
});

<!-- plugin.xml，此文件需要插件开发时自行编写，与插件一起提供 -->
<?xml version="1.0" encoding="UTF-8"?>
<plugin id="mocha-plugin-demo" version="0.1.0" xmlns="http://apache.org/cordova/ns/plugins/1.0">
    <name>Plugin Demo</name>
    <author>Mocha</author>
    <description>插件演示</description>
    <license>MIT</license>
    <keywords>cordova, javascript</keywords>
    <repo/>
    <issue/>
    <!-- android -->
    <platform name="android">
        <source-file src="src/android/WebViewBack.java" target-dir="src/com/mochasoft/cordova/plugins/webback"/>
        <config-file parent="/*" target="res/xml/config.xml">
            <feature name="WebViewBack">
                <param name="android-package" value="com.mochasoft.cordova.plugins.webback.WebViewBack"/>
            </feature>
        </config-file>
        <js-module name="webviewback" src="www/android/goback.js">
            <clobbers target="WebViewBack"/>
        </js-module>
    </platform>
    <!-- ios -->
    <platform name="ios">
        <header-file src="src/ios/WebGoBack.h"/>
        <source-file src="src/ios/WebGoBack.m"/>
        <config-file parent="/*" target="config.xml">
            <feature name="WebViewBack">
                <param name="ios-package" value="WebGoBack"/>
                <param name="onload" value="true"/>
            </feature>
        </config-file>
        <js-module name="webviewback" src="www/ios/webviewback.js">
            <clobbers target="WebViewBack"/>
        </js-module>
    </platform>
</plugin>

四、原生插件编写（iOS）

插件的实现，继承关系，返回值方式

插件继承自 CDVPlugin

/**
    插件原生相关代码
 */

// ========================== MyPlugin.h ==================================
@interface MyPlugin : CDVPlugin
- (void)myInvokeMethod:(CDVInvokedUrlCommand *)command; // 具体执行的方法
@end

// ========================== MyPlugin.m ==================================
@interface MyPlugin ()
@end

@implementation MyPlugin

// 具体执行方法的实现
- (void)myInvokeMethod:(CDVInvokedUrlCommand *)command {

    // 通过command变量获取参数方式：
    id argument = [command argumentAtIndex:0 withDefault:@(50)];

    //初始化用于保存结果的 Dictionary
    NSMutableDictionary *result_dict = [NSMutableDictionary dictionary];
    CDVPluginResult *pluginResult = nil;
    if (执行成功) {
        // 配置成功时的 result_dict
        pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK
                                     messageAsDictionary:result_dict];
    }else {
        NSString *errMsg = [self getErrorMsg:self.errCode];
        // 配置失败时的 result_dict
        pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR
                                     messageAsDictionary:result_dict];
    }
    
    // 执行回调
    [self.commandDelegate sendPluginResult:pluginResult
                                callbackId:command.callbackId];
}

@end