使用自定义Cordova插件将本机iOS事件绑定到webView [英] Bind a native iOS event to a webView using a custom Cordova plugin

问题描述

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

我已遵循本教程，并且它的工作原理完美。

当我尝试适应另一个应用程序（我想它比教程是更通用的），它的工作原理从webView到本机部分，但不是

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

我的所有代码都在XCode中，因此我可以

这是插件的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，[]）; 
}; 
 
 ; 
}（））; 
  

这里是javascript事件侦听器：

  var NativeEventsListener =（function（）{
 
 this.onReceivedEvent = function（eventData）{
 
 var eventHandler = function }; 
 
 switch（eventData.eventType）{
 casecolorButtonClicked：
 eventHandler = colorButtonClickEvent; 
 break; 
默认值：
 } 
 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）; 
} 
 
函数wlEnvInit（）{
 wlCommonInit（）; 
} 
  

最后是objective-C中的插件调用：

   - （IBAction）changeWebPageColor {
 redColor =！redColor; 
 NSString * color = redColor？ @红白; 
 HybridBridge * bridge = [self.pluginObjects objectForKey：@HybridBridge]; 
 NSDictionary * eventData = [NSDictionary dictionaryWithObjectsAndKeys：
 @colorButtonClicked，@eventType，
 color，@color，
 nil]; 
 [bridge reportEvent：eventData]; 
} 
  

感谢您的帮助！

请务必在config.xml中定义您的插件

 < feature name =CustomPlugin> 
< param name =ios-packagevalue =CustomPlugin/> 
< / feature> 
  

使用Objective-C代码实现插件

CustomPlugin.h

  #import< Foundation / Foundation.h> 
 #import< Cordova / CDV.h> 
 
 @interface CustomPlugin：CDVPlugin 
 
  - （void）sayHello：（CDVInvokedUrlCommand *）command; 
 
 @end 
  

CustomPlugin.m

#importCustomPlugin.h

@implementation CustomPlugin

- （void）sayHello：（CDVInvokedUrlCommand * command 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）。 
 cordova.exec（sayHelloSuccess，sayHelloFailure，CustomPlugin，sayHello，[name]）; 
} 
 
 function sayHelloSuccess（data）{
 alert（OK：+ data）; 
} 
 
 function sayHelloFailure（data）{
 alert（FAIL：+ data）; 
} 
  

I have to create a plugin to catch events occurring in the Cordova webView of my iOS application and trigger actions in the native part of the app, and vice versa.

I have followed this tutorial and it works perfectly.

When I try to adapt it to another app (I wanted it more general than the tutorial is), it works from the webView to the native part, but not the other way.

I am just trying to click on a button on a navigationBar to change the background color of my webView. At the moment, it seems that the javascript code of the plugin doesnt receive the event, because only the iOS logs are displayed.

All my code is in XCode so I can not see any warning/errors from the web part.

Here is the iOS part of the plugin:

@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];
}

Here is the javascript part of the plugin:

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;
}());

Here is the javascript event listener:

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;
}());

Here is the main.js file where be bind the event listener to the plugin:

function wlCommonInit(){    

    HybridBridge.bindListener(NativeEventsListener.onReceivedEvent);
}

function wlEnvInit(){
    wlCommonInit();
}

And finally here is the plugin call in 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];
}

Thank you for your help!

解决方案

Try implement this example into your project.

make sure you already define your plugin in your config.xml

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

Implementing the plug-in by using Objective-C code

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

Calling a plug-in from 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);
}

这篇关于使用自定义Cordova插件将本机iOS事件绑定到webView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！