下载包到本地,可选择android或者ios模拟器运行查看效果图
ZLBridge-flutter是为原生(android,ios)webview与JS提供数据交互更简单方便的一个小插件工具,其数据交互的原理iOS是基于[userContentController addScriptMessageHandler]以及android是基于webView.addJavascriptInterface接口执行js代码为window初始化一个zlbridge对象,后续数据交互都是通过window.zlbridge对象来共享。ZLBridge-flutter并不提供webview页面展示,只负责处理原生与js数据交互,可配合webview_flutter,flutter_webview_plugin等等三方库使用,可直接使用demo里封装好的webview_flutter_bridge,flutter_webview_plugin_bridge类也可自行创建。目前支持平台有
ZLBridge-iOS
ZLBridge-Android
ZLBridge-JS
ZLBridge-flutter
ZLBridge-RN
dependencies:
zlbridge_flutter:
git:
url: https://github.com/FPJack/ZLBridge-flutter
path: zlbridge_flutter
ZLBridge bridge = ZLBridge();
//调用对应三方库执行原生js的API接口,
//flutter_webview_plugin:flutterWebViewPlugin.evalJavascript(js);
//webview_flutter:webVC.evaluateJavascript(js);
bridge.evaluateJavascriptAction((js) => webVC.evaluateJavascript(js));
//用对应三方库的JavascriptChannel添加ZLBridge的channelName,以及回调成功时调用bridge.handleJSMessage(message),bridge的registHandler就能接受相对应注册的事件通知
JavascriptChannel(
name: ZLBridge.channelName,
onMessageReceived: (JavascriptMessage message) {
bridge.handleJSMessage(message.message);
});
原生
//!!!监听webview加载完成注入本地JS代码
bridge.injectLocalJS();
或者H5
//初始化完成后也可通过window.zlbridge拿zlbridge对象,详细请查看ZLBridge-JS
var zlbridge = require('zlbridge')
window.zlbridge.call('test',(arg) => {
});
window.zlbridge.call('test',{key:"value"},(arg) => {
});
bridge.registHandler("test", (obj, callback){
//true:jS调用一次test事件只能接受原生一次传值,false:JS一次事件可接受多次传值
callback(obj,true);
});
bridge.callHandler("jsMethod",args: ["原生信息"],completionHandler:(obj,error){
});
window.zlbridge.register("jsMethod",(arg) => {
return arg;
});
或者
window.zlbridge.registerWithCallback("jsMethod",(arg,callback) => {
//ture代表原生只能监听一次回调结果,false可以连续监听,默认传为true
callback(arg,true);
});
document.addEventListener('ZLBridgeInitReady', function() {
console.log('ZLBridge初始化完成');
},false);
ZLBridge-flutter is available under the MIT license. See the LICENSE file for more info.