布景

之前一直在用flutter做混合开发,现在准备借助flutter多平台代码共用的才能做多平台开发,所以做了前期的调研,由于移动端工程内运用WebViewBridge做的JS交互,所以对flutter web的交互才能进行验证

调研

dart调用js

flutter供给了dart:js的包,运用该包可完结与js的交互,官方文档
(如果在工程中调用了import 'dart:js'就无法打包成APP)

以调用js alert为例

js.context.callMethod("alert", [content]);

第一个参数为js办法名,后面一个为该办法的参数,这样就可以使alert弹出

dart调用WebviewBridge

那咱们现在知道了怎么调用js,依然无法调用WebviewBridge,因为WebviewBridge与原生交互是需求增加一个js办法的,所以咱们需求再写一个桥接文件,完结办法的注册,这样就可以调用WebviewBridge了

function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
       return callback(WebViewJavascriptBridge); 
    }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    window.WVJBCallbacks = [callback]; // 创建一个 WVJBCallbacks 大局属性数组，并将 callback 刺进到数组中。
    var WVJBIframe = document.createElement('iframe'); // 创建一个 iframe 元素
    WVJBIframe.style.display = 'none'; // 不显示
    WVJBIframe.src = 'https://__BRIDGE_LOADED__'; // 设置 iframe 的 src 属性
    document.documentElement.appendChild(WVJBIframe); // 把 iframe 增加到当前文导航上。
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
function webviewBridge(fun,data) {
  setupWebViewJavascriptBridge(function(bridge){
      if ( window.WebViewJavascriptBridge) {
        window.WebViewJavascriptBridge.callHandler(fun,{'data':data});
      }
  });
}
function webviewCallBackBridge(fun,callback,data) {
    setupWebViewJavascriptBridge(function(bridge){
        if ( window.WebViewJavascriptBridge) {
            window.WebViewJavascriptBridge.callHandler(fun,{'data':data},callback);
          }
    });
}
window.setupWebViewJavascriptBridge = setupWebViewJavascriptBridge;
window.webviewBridge = webviewBridge;
window.webviewCallBackBridge = webviewCallBackBridge;

在index.html中引证一下该js文件,这样dart就可以调用咱们封装的办法了
(在js中尽量不要运用es6的语法,在测试过程中有一部安卓手机内核版本较低,不支持es6导致无法成功调用)

详细完成

详细完成可以看见代码:git代码

写了一份代码完成,主要完成了dart调用js、dart调用原生、dart调用原生回来数据、原生调用dart、查看cookie功能