JS在Android/iOS WebView中反调接口统一，调用更简单

2023-12-15 08:50:57

前言

在移动开发中，经常需要在WebView中加载网页内容。为了实现与网页内容的交互，我们需要使用JS调用接口的方式来实现。然而，由于Android和iOS平台的差异，JS调用接口的方式也有所不同，这给跨平台开发带来了一定的不便。

EasyJSBridge 简介

EasyJSBridge是一个开源库，它可以帮助开发者统一JS调用接口的方式，从而简化跨平台开发的过程。EasyJSBridge提供了统一的接口，允许JS在Android和iOS WebView中反调接口，并提供了详细的步骤和示例代码，帮助开发者轻松实现跨平台开发。

实现步骤

在Android项目中添加EasyJSBridge库

dependencies {
    compile 'com.github.lzyzsd:EasyJSBridge:1.0.7'
}

在iOS项目中添加EasyJSBridge库

pod 'EasyJSBridge'

在JS代码中使用EasyJSBridge

window.easyjsbridge.callHandler('methodName', 'data', function(response) {});

在Android代码中实现JS调用接口的回调

WebView webView = (WebView) findViewById(R.id.webView);
webView.addJavascriptInterface(new Object() {
    @JavascriptInterface
    public void methodName(String data, ValueCallback<String> callback) {
        // 处理JS调用接口的逻辑
        callback.onReceiveValue("response");
    }
}, "methodName");

在iOS代码中实现JS调用接口的回调

@protocol EasyJSBridgeDelegate <NSObject>

- (void)easyJSBridge:(EasyJSBridge *)bridge callHandler:(NSString *)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback;

@end

@interface ViewController : UIViewController <EasyJSBridgeDelegate>

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    EasyJSBridge *bridge = [EasyJSBridge bridgeForWebView:self.webView delegate:self];
    [bridge registerHandler:@"methodName" handler:^(id data, WVJBResponseCallback responseCallback) {
        // 处理JS调用接口的逻辑
        responseCallback(@"response");
    }];
}

@end