使用自定义Cordova插件将本机iOS事件绑定到webView

时间:2014-04-01 01:45:52

标签: ios cordova phonegap-plugins cordova-plugins

我必须创建一个插件来捕获我的iOS应用程序的Cordova webView中发生的事件,并在应用程序的本机部分触发操作,反之亦然。

我已关注this tutorial并且效果很好。

当我尝试将其改编为另一个应用程序时(我希望它比教程更通用),它可以从webView到本机部分,但不是其他方式。

我只是想点击导航栏上的按钮来更改我的webView的背景颜色。目前,似乎插件的javascript代码没有收到该事件,因为只显示了iOS日志。

我的所有代码都在XCode中,因此我无法从Web部件中看到任何警告/错误。

以下是该插件的iOS部分:

@interface HybridBridge()

@property (nonatomic, retain) NSString *listenerCallbackId;

@end

@implementation HybridBridge

-(void)bindAction:(CDVInvokedUrlCommand*) command{

    self.listenerCallbackId = command.callbackId;

    CDVPluginResult *pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK];
    [pluginResult setKeepCallbackAsBool:true];
    [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}

-(void)reportEvent:(NSDictionary*)eventData{
    CDVPluginResult *pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsDictionary:eventData];
    [pluginResult setKeepCallbackAsBool:true];
    [self.commandDelegate sendPluginResult:pluginResult callbackId:self.listenerCallbackId];
}

这是插件的javascript部分:

var HybridBridge = (function() {
    var PLUGIN_NAME                         = "HybridBridge";
    var ACTION_BIND_LISTENER                = "bindAction";

    this.bindListener = function(listener) {
        cordova.exec(listener, listener, PLUGIN_NAME, ACTION_BIND_LISTENER, []);
    };

    return this;
}());

这是javascript事件监听器:

var NativeEventsListener = (function() {

    this.onReceivedEvent = function(eventData) {

        var eventHandler = function(){};

        switch (eventData.eventType){
            case "colorButtonClicked":
                eventHandler = colorButtonClickEvent;
                break;
            default: 
        }
        eventHandler(eventData);
    };

    function colorButtonClickEvent(eventData){
        changeBackgroundColor(eventData.color);

    }

    function changeBackground(color) {
        document.body.style.background = color;
    }

    return this;
}());

这是main.js文件,其中将事件侦听器绑定到插件:

function wlCommonInit(){    

    HybridBridge.bindListener(NativeEventsListener.onReceivedEvent);
}

function wlEnvInit(){
    wlCommonInit();
}

最后这是Objective-C中的插件调用:

- (IBAction)changeWebPageColor {
    redColor = !redColor;
    NSString *color = redColor ? @"red" : @"white";
    HybridBridge *bridge = [self.pluginObjects objectForKey:@"HybridBridge"];
    NSDictionary *eventData = [NSDictionary dictionaryWithObjectsAndKeys:
                               @"colorButtonClicked", @"eventType",
                               color, @"color",
                               nil];
    [bridge reportEvent:eventData];
}

感谢您的帮助!

1 个答案:

答案 0 :(得分:2)

尝试在您的项目中实施此示例。

确保您已在config.xml中定义插件

<feature name="CustomPlugin">
      <param name="ios-package" value="CustomPlugin" />
</feature>

使用Objective-C代码实现插件

CustomPlugin.h

#import <Foundation/Foundation.h>
#import <Cordova/CDV.h>

@interface CustomPlugin : CDVPlugin

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

@end

CustomPlugin.m

#import "CustomPlugin.h"

    @implementation CustomPlugin

    - (void)sayHello:(CDVInvokedUrlCommand*)command{

        NSString *responseString =
            [NSString stringWithFormat:@"Hello World, %@", [command.arguments objectAtIndex:0]];

        CDVPluginResult *pluginResult =
            [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:responseString];

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

    @end

从JavaScript调用插件

function initial(){
    var name = $("#NameInput").val();
    cordova.exec(sayHelloSuccess, sayHelloFailure, "CustomPlugin", "sayHello", [name]);
}

function sayHelloSuccess(data){
    alert("OK: " + data);
}

function sayHelloFailure(data){
    alert("FAIL: " + data);
}