Flutter与Webview交互

项目中用到了webview_flutter这个插件，它允许我们在Flutter里面嵌套WebView，同时我们也可以利用
addJavaScriptChannel方法来让H5和我们交互。
但现在有一个问题就是，addJavaScriptChannel可以让h5单向给flutter发消息，但如何在收到消息后回调h5呢？

我们可以利用runJavaScriptReturningResult方法来调用h5里面js的方法，
例如

controller.runJavaScriptReturningResult(
            "window.JSBridgeCallback($id, '${json.encode(result)}')");

这段代码的的意思就是执行js中的

window.JSBridgeCallback = JSBridgeCallback;

const JSBridgeMap = {};
let callID = 0;

function JSBridgeCallback(id, params) {
    console.log("JSBridgeCallback", id, params);
    JSBridgeMap[id](params);
    JSBridgeMap[id] = null;
    delete JSBridgeMap[id];
}

方法。

接下来是具体步骤

1. 在flutter里面，调用addJavaScriptChannel方法来在js的window对象上挂载一个对象

addJavaScriptChannel("Flutter", onMessageReceived: (message) {
        print("Flutter received: ${message.message}");

        final jsonObject = json.decode(message.message);
        final id = jsonObject['callID'];

        const result = {"version": 10};

        controller.runJavaScriptReturningResult(
            "window.JSBridgeCallback($id, '${json.encode(result)}')");
      })

我们需要h5告诉我们回调id、方法名称和参数

2. 在H5项目中新建一个js文件，添加如下内容

export function callFlutter(name, params, callback) {
    if (window.Flutter) {
        const id = callID++;
        const paramsObj = {
            method: name,
            callID: id,
            data: params || null
        }
        JSBridgeMap[id] = callback || ((result) => {
        });
        // JSBridgeHandle.call(method, JSON.stringify(paramsObj));
        window.Flutter.postMessage(JSON.stringify(paramsObj));
    }

}


window.JSBridgeCallback = JSBridgeCallback;

const JSBridgeMap = {};
let callID = 0;

function JSBridgeCallback(id, params) {
    console.log("JSBridgeCallback", id, params);
    JSBridgeMap[id](params);
    JSBridgeMap[id] = null;
    delete JSBridgeMap[id];
}

我们声明一个JSBridgeCallback方法，并把它挂载到window上，叫什么名字看你的喜好，不一定非要这个名字。
暴露callFlutter给外面调用，callFlutter代码的大致意思是
把回调函数保存到JSBridgeMap里面，然后把方法id、参数和方法名称打包成一个json通过window.Flutter.postMessage传给flutter。

3. 在H5的一个按钮上调用callFlutter方法，给flutter传递参数并拿到flutter的回调，我这里用的框架是React

function App() {

    const [text, setText] = React.useState('Hello, Flutter!');


    return (
        <div className="App">
            <h1>{text}</h1>
            <button onClick={() => {
                callFlutter('getAppVersion', {method: 'showToast', args: ['Hello, Flutter!']}, (result: any) => {

                    // console.log("收到了来自Flutter的回调: " + result);
                    setText(result);
                });
            }}>点我
            </button>
        </div>
    );
}

测试

我们在flutter里面的h5页面点击按钮，拿到了flutter传来的结果并显示

Screenshot_20231112-211205.png

flutter项目地址
React项目地址