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-filesource-file 标签:插件原生代码路径,用于将文件复制到各个工程原生代码中
  • config-file 标签:用于指定配置文件
  • feature 标签:重要!!!用于指定各平台插件的配置方案,安装时,会把相应平台的配置,插入各个平台的 config.xml。插件负责桥接的 JS 中,exec 的第三个参数,就是 featurenamefeature 中,会指定插件加载的具体类
  • 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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,519评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,842评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,544评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,742评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,646评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,027评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,513评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,169评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,324评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,268评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,299评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,996评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,591评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,667评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,911评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,288评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,871评论 2 341

推荐阅读更多精彩内容