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

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

Android開(kāi)發(fā)之Flutter與webview通信橋梁實(shí)現(xiàn)_Android

作者：Jenk ? 更新時(shí)間： 2022-08-01 編程語(yǔ)言

前言

最近業(yè)務(wù)有需求需要在flutter內(nèi)使用webview進(jìn)行內(nèi)嵌H5進(jìn)行展示，此時(shí)需要涉及到H5與flutter之間額通信問(wèn)題。比如發(fā)送消息或者H5調(diào)用Flutter的相機(jī)等等

webview選型

這里我們使用官方維護(hù)的插件webview_flutter

如何通信？

webview在初始化的時(shí)候需要向容器內(nèi)注冊(cè)一個(gè)全局方法供H5進(jìn)行調(diào)用

WebView(
    initialUrl: 'https://flutter.dev',
    javascriptMode: JavascriptMode.unrestricted,
    javascriptChannels: <JavascriptChannel>{
      _toasterJavascriptChannel(context),
    }
    ....
    ....
)
JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: 'Toaster',//注冊(cè)一個(gè)名字為T(mén)oaster的全局js方法
        onMessageReceived: (JavascriptMessage message) {
          //處理業(yè)務(wù)的代碼邏輯
          print(message)
        });
}

H5發(fā)送消息給flutter

H5發(fā)送消息采用xxxx.postMessage形式，注意這里對(duì)象需要JSON.stringify

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

flutter發(fā)送消息給H5

需要調(diào)用runJavascript方法，我們可以在H5中聲明一個(gè)全局windows方法

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

flutter發(fā)送采用runJavascript形式

WebViewController!.runJavascript('globalCallback(123)');//如果是對(duì)象也需要json.encode序列化

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

欄目分類(lèi)
最近更新