Flutter與webview通訊橋樑開發

最近業務有需求需要在flutter內使用webview進行內嵌H5進行展示，此時需要涉及到H5與flutter之間額通訊問題。比如傳送訊息或者H5呼叫Flutter的相機等等

webview選型

這裡我們使用官方維護的外掛webview_flutter

如何通訊？

webview在初始化的時候需要向容器內註冊一個全域性方法供H5進行呼叫

WebView(
    initialUrl: 'https://flutter.dev',
    javascriptMode: JavascriptMode.unrestricted,
    javascriptChannels: <JavascriptChannel>{
      _toasterJavascriptChannel(context),
    }
    ....
    ....
)
JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: 'Toaster',//註冊一個名字為Toaster的全域性js方法
        onMessageReceived: (JavascriptMessage message) {
          //處理業務的程式碼邏輯
          print(message)
        });
}

H5傳送訊息給flutter

H5傳送訊息採用xxxx.postMessage形式，注意這裡物件需要JSON.stringify

Toaster.postMessage(
  JSON.stringify({
      name: 'tom',
      age: 12
  })
);

flutter傳送訊息給H5

需要呼叫runJavascript方法，我們可以在H5中宣告一個全域性windows方法

window.globalCallback = function (data) {
    console.log(data)
};

flutter傳送採用runJavascript形式

 WebViewController!.runJavascript('globalCallback(123)');//如果是物件也需要json.encode序列化

交流群