原生与H5交互：Cordova通信实践-CSDN博客

本文链接：https://blog.csdn.net/u011644318/article/details/54315364

本文探讨了原生应用与H5之间的通信问题，主要介绍了两种通信方式：直接调用JS方法和通过CDVPluginResult唤醒回调。直接调用方法可能面临找不到对应JS方法的风险，而CDVPluginResult方式则能更稳定地调用预定义的success和fail回调，实现数据的双向传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生和 h5 的通信问题

h5 到原生，原生返回 h5 的时候需要给 h5 传值。有两种方式：
1. 直接调用js的方法
2. 通过一个 CDVPluginResult 的对象来唤醒回调方法

直接调用js的方法

该方法是在显示 h5 页面的控制器（该控制器 A 是 CDVViewController 的子类），通过 webView 的 stringByEvaluatingJavaScriptFromString 方法，去调用 js 的方法。
该种方法我在 demo 里是写在 viewWillAppear 方法中的，通过给 A 传参，来判断是否走这一块代码。

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    if (self.isRefresh) {//需要给 h5 传值的时候 isRefresh 为 YES
        NSString *location = [NSString stringWithFormat:@"callBack('%@')",self.backMessage];
        [self.commandDelegate evalJs:location];
    }
}

js 中对应的有一个 callBack 方法

function callBack(results){
                document.getElementById("returnValue").value = results;
            }

缺点：需要知道 js 的方法中该方法名，不能保障找到该方法，找不到的后果就是所做操作无响应

通过一个 CDVPluginResult 的对象来唤醒回调方法

该方法是在原生页面进行操作之后，通过原生的通信方式，在自定义的插件类中发送 CDVPluginResult ，然后会自动映射调用 js 中 Cordova.exec 方法时定义的成功和失败的回调方法，并且根据需要去处理返回的值。
由于调用插件之后需要调到原生页面，然后从原生页面传值，所以我在插件里注册了一个通知，通知调用的方法也写在插件中，原生页面要传值的时候发送该通知。

- (void)requestNative:(CDVInvokedUrlCommand*)command {
    self.myCommand = command;
    NSString *myarg = [command.arguments objectAtIndex:0];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(changeValue:) name:@"soHigh" object:nil];
    NativeViewController *nativeVC = [[NativeViewController alloc] init];
    nativeVC.str = myarg;
    [self.viewController.navigationController pushViewController:nativeVC animated:YES];
}

- (void)changeValue:(NSNotification *)noti {
    [[NSNotificationCenter defaultCenter] removeObserver:self name:@"soHigh" object:nil];
    CDVPluginResult *pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:noti.object];
    [self.commandDelegate sendPluginResult:pluginResult callbackId:self.myCommand.callbackId];

}

js 中 Cordova.exec 的第一个参数就是一个带形参的方法(此处为 successFunction )，当插件中返回成功信息时，调用该方法，并将 CDVPluginResult 对象的 message 传递过来，用 successFunction 的参数接收

Cordova.exec(function successFunction(results){

document.getElementById("returnValue").value = results;
                             },
                             function failFunction(message){
                             document.getElementById("returnValue").value = results;
                             }, "CordovaPlugin", "requestNative", ["任性呵呵"]);

demo在此