Hybrid App(二):Cordova插件开发

上一章已经将Cordova集成进我们的项目中去了,下面我们创建插件来扩展使用场景。

创建Plugin插件

  • 新建文件夹Plugins,并添加进项目中
    此处输入图片的描述
  • 在Plugins中,commend + N 新建继承CDVPlugin的TestPlugin插件
    1
    2
    3
    4
    5
    6
    7
    8
    .h
    #import <Cordova/CDV.h>

    @interface TestPlugin : CDVPlugin

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

    @end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.m
#import "TestPlugin.h"
#import <Cordova/CDV.h>

@implementation TestPlugin{
NetWorkManager *manager;
}

- (void)test:(CDVInvokedUrlCommand*)command
{
DLog(@"%@",command.arguments);
manager = [NetWorkManager sharedNetWorkManager];
[self loadNewData:command];
}


- (void) loadNewData:(CDVInvokedUrlCommand*)command
{ //网络请求,将传递过来的第一个参数作为网络请求的参数
[manager networkHealthInfoAll:command.arguments[0] ...

CDVPluginResult* pluginResult = nil;
//要传递回去的参数,responDict为网络请求回来的数据
NSDictionary * ret = @{@"success":@"1",@"message":@"参数不为空",@"code":@(200),@"data":responDict};

pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsDictionary:ret];

[self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}

@end

写入配置文件

  • 打开文件夹下的config.xml文件,在widget标签下输入:
    1
    2
    3
    <feature name="TestPlugin">
    <param name="ios-package" value="TestPlugin" />
    </feature>

此时Cordova可以找到插件,完成JavaScript和Objective C的桥接,现在可以使用JavaScript来调用TestPlugin插件了

调用插件

  • 打开js文件,进行调用
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    btn.onclick = function(){

    //test plugin
    cordova.exec(function(msg){
    //成功的回调函数
    alert(msg.data.newsTitles[0].healthInfoTitle);
    },
    function(){
    //失败的回调函数
    },
    "TestPlugin",//插件名
    "test",
    ["行业动态"]);//需要传递至native的参数

    }

至此一个简易的插件就完成了,后续可根据项目业务需求进行开发。

此处输入图片的描述