日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Android開發之Flutter與webview通信橋梁實現_Android

作者：Jenk ? 更新時間： 2022-08-01 編程語言

前言

最近業務有需求需要在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序列化

原文鏈接：https://segmentfault.com/a/1190000041933782

欄目分類
最近更新