背景

之前一直在用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功能