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

更新時(shí)間：2022年06月08日 10:49:53 作者：Jenk

這篇文章主要為大家介紹了Android開(kāi)發(fā)之Flutter與webview通信橋梁實(shí)現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

最近業(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序列化

以上就是Android開(kāi)發(fā)之Flutter與webview通信橋梁實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于Android開(kāi)發(fā)Flutter webview通信的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

Android仿QQ空間主頁(yè)面的實(shí)現(xiàn)
今天模仿安卓QQ空間,打開(kāi)程序的啟動(dòng)畫(huà)面和導(dǎo)航頁(yè)面我就不做了，大家可以模仿微信的那個(gè)做一下，很簡(jiǎn)單。這次主要做一下主頁(yè)面的實(shí)現(xiàn),感興趣的朋友可以參考下
2013-01-01
android相冊(cè)選擇圖片的編碼實(shí)現(xiàn)代碼
本篇文章主要介紹了android相冊(cè)選擇圖片的編碼實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
Android開(kāi)發(fā)之關(guān)于項(xiàng)目
本文是此系列文章的第二篇，給大家介紹的是項(xiàng)目相關(guān)的內(nèi)容，非常的細(xì)致全面，有需要的小伙伴可以參考下
2016-02-02
android 復(fù)制粘貼剪切功能應(yīng)用
網(wǎng)上有很多android 復(fù)制粘貼剪切功能的文章，只是放到自己的程序中不知道如何處理，現(xiàn)在尋得一可行方法，需要的朋友可以參考下
2012-11-11
Android用Scroller實(shí)現(xiàn)一個(gè)可向上滑動(dòng)的底部導(dǎo)航欄
本篇文章主要介紹了Android用Scroller實(shí)現(xiàn)一個(gè)可上滑的底部導(dǎo)航欄，具有一定的參考價(jià)值，有興趣的小伙伴們可以參考一下
2017-07-07
Android WebView通過(guò)動(dòng)態(tài)的修改js去攔截post請(qǐng)求參數(shù)實(shí)例
這篇文章主要介紹了Android WebView通過(guò)動(dòng)態(tài)的修改js去攔截post請(qǐng)求參數(shù)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-03-03
超實(shí)用的Android手勢(shì)鎖制作實(shí)例教程
這篇文章主要介紹了一個(gè)超實(shí)用的Android手勢(shì)鎖制作實(shí)例教程,普通的圓環(huán)形圖標(biāo)變換,在App和系統(tǒng)的鎖屏界面中都可以調(diào)用,需要的朋友可以參考下
2016-04-04
Android繪制雙折線圖的方法
這篇文章主要為大家詳細(xì)介紹了Android繪制雙折線圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
Android中String與int相互轉(zhuǎn)換
大家好，本篇文章主要講的是Android中String與int相互轉(zhuǎn)換，感興趣的同學(xué)趕快來(lái)看一看吧，對(duì)你有幫助的話記得收藏一下，方便下次瀏覽
2021-12-12
Android仿淘寶訂單頁(yè)面效果
這篇文章主要介紹了Android仿淘寶訂單頁(yè)面效果，電商項(xiàng)目的訂單管理模塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-12-12