近期把原先的navite app用flutter重写，原先app里面有大量通过JsBridge与web交互的逻辑，换到flutter这边之后发现没用现成可用的第三方库，然后自己写了一个bridge_webview_flutter。
第三方依赖
在原先的webview里面加上相关的逻辑和依赖
Android使用的是JsBridge
...
rootProject.allprojects {
repositories {
google()
jcenter()
maven { url 'https://jitpack.io' }
}
}
...
dependencies {
implementation 'androidx.annotation:annotation:1.0.0'
implementation 'androidx.webkit:webkit:1.0.0'
compile 'com.github.lzyzsd:jsbridge:1.0.4'
}
...
iOS使用的是WebViewJavascriptBridge
...
s.dependency 'Flutter'
s.dependency 'WebViewJavascriptBridge'
...
Navite与Flutter交互
通过MethodChannel进行交互
@override
Future<void> callHandler(String name, {dynamic data, BridgeCallBack onCallBack}) {
if (onCallBack != null) {
_bridgeCallBackMap[name] = onCallBack;
}
return _channel.invokeMethod("callHandler", {"name": name, "data": data});
}
@override
Future<void> registerHandler(String name, {dynamic response, BridgeCallBack onCallBack}) {
if (onCallBack != null) {
_bridgeCallBackMap[name] = onCallBack;
}
return _channel.invokeMethod("registerHandler", {"name": name, "response": response});
}
使用一个map来存储需要用到的回调函数
iOS
- (void)registerHandler:(FlutterMethodCall *)call {
NSString *name = [call arguments][@"name"];
id response = [call arguments][@"response"];
if (name) {
__weak typeof(self) weakSelf = self;
[_bridge registerHandler:name handler:^(id data, WVJBResponseCallback responseCallback) {
NSDictionary *callback = @{
@"name": name,
@"data": data
};
__strong typeof(weakSelf) strongSelf = weakSelf;
[strongSelf->_channel invokeMethod:@"bridgeCallBack" arguments:[self dictionaryToJsonString:callback]];
if (response) {
if ([response isKindOfClass:[NSDictionary class]]) {
responseCallback([self dictionaryToJsonString:response]);
} else {
responseCallback(response);
}
}
}];
}
}
- (void)callHandler:(FlutterMethodCall *)call {
NSString *name = [call arguments][@"name"];
id data = [call arguments][@"data"];
if (name) {
__weak typeof(self) weakSelf = self;
[_bridge callHandler:name data:data responseCallback:^(id responseData) {
NSDictionary *callback = @{
@"name": name,
@"data": responseData
};
__strong typeof(weakSelf) strongSelf = weakSelf;
[strongSelf->_channel invokeMethod:@"bridgeCallBack" arguments:[self dictionaryToJsonString:callback]];
}];
}
}
省略了一些配置代码，可以参考官方文档
Android
Android这边需要把原先的InputAwareWebView继承BridgeWebView
然后再把原先的WebViewClient替换成BridgeWebViewClient
webView.setWebViewClient(new BridgeWebViewClient(webView));
private void registerHandler(MethodCall call) {
final Map<String, Object> map = (Map<String, Object>) call.arguments;
final String name = (String) map.get("name");
if (name != null) {
webView.registerHandler(name, new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
Object response = map.get("response");
if (response != null) {
if (response instanceof HashMap) {
JSONObject jsonObject = new JSONObject((Map) response);
function.onCallBack(jsonObject.toString());
} else {
function.onCallBack((String) response);
}
}
JSONObject jsonObject = new JSONObject();
try {
jsonObject.put("name", name);
jsonObject.put("data", data);
methodChannel.invokeMethod("bridgeCallBack", jsonObject.toString());
} catch (JSONException e) {
Log.e("JsBridge", "json error");
}
}
});
}
}
private void callHandler(MethodCall call) {
final Map<String, Object> map = (Map<String, Object>) call.arguments;
final String name = (String) map.get("name");
if (name != null) {
Object data = map.get("data");
String dataStr = "";
if (data != null) {
if (data instanceof Map) {
JSONObject jsonObject = new JSONObject((Map) data);
dataStr = jsonObject.toString();
} else {
dataStr = (String) data;
}
}
webView.callHandler(name, dataStr, new CallBackFunction() {
@Override
public void onCallBack(String data) {
JSONObject jsonObject = new JSONObject();
try {
jsonObject.put("name", name);
jsonObject.put("data", data);
methodChannel.invokeMethod("bridgeCallBack", jsonObject.toString());
} catch (JSONException e) {
Log.e("JsBridge", "json error");
}
}
});
}
}
使用
通过flutter pub get加载依赖
dependencies:
bridge_webview_flutter: ^0.1.3
在onWebViewCreated方法里面通过webViewController调用
...
body: Builder(builder: (BuildContext context) {
return BridgeWebView(
initialUrl: 'https://flutter.dev',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
webViewController.registerHandler("methodName", response: "r1", onCallBack: (callBackData) { print(callBackData.name); // handler name
print(callBackData.data); // callback data ({'param': '1'})
});
webViewController.callHandler("methodName", data: "sendData", onCallBack: (callBackData) {
print(callBackData.name); // handler name
print(callBackData.data); // callback data (r2)
});
},
onPageStarted: (String url) {
print('Page started loading: $url');
},
onPageFinished: (String url) {
print('Page finished loading: $url');
},
gestureNavigationEnabled: true,
);
}
...
