ios - 使用自定义 Cordova 插件将原生 iOS 事件绑定(bind)到 webView

Question

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

我关注了this tutorial而且效果很好。

当我尝试将它调整到另一个应用程序时(我希望它比教程更通用)，它可以从 webView 到 native 部分，但不是其他方式。

我只是想点击导航栏上的按钮来更改我的 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;
}());

这是将事件监听器绑定(bind)到插件的 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];
}

感谢您的帮助!

Answer 1

尝试将此示例实现到您的项目中。

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

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

使用Objective-C代码实现插件

自定义插件.h

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

@interface CustomPlugin : CDVPlugin

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

@end

自定义插件.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);
}