前言: 在之前經(jīng)手某一個(gè)項(xiàng)目需要用到webview js交互方式, 通過(guò)js調(diào)用flutter方法,然后同步返回?cái)?shù)據(jù)給js層. 調(diào)研了以下的插件的推薦交互方式均沒(méi)有這種能力. 然后結(jié)合源碼以及web控制臺(tái)的觀察, 發(fā)現(xiàn)android/ ios 的方式就是給web的window對(duì)象注入一個(gè)method. 于是我做了以下嘗試

現(xiàn)有插件的問(wèn)題總結(jié)

1.以官方的WebView_flutter 插件舉例, javascriptChannels的onMessageReceived方法只能做一個(gè)單向通信, 也就是說(shuō)他只能做到JavaScript通過(guò)javascriptChannels的name 來(lái)postMessage()來(lái)調(diào)用webview

2.inappwebview 插件也有嘗試過(guò) , controller.addJavaScriptHandler確實(shí)有callback可以把數(shù)據(jù)給到JavaScript, 但是文檔上說(shuō)明"window.flutter_inappwebview.callHandler returns a JavaScript [Promise]" , 也就是說(shuō)他還是不能同步.

后面我就想有沒(méi)有辦法像android / ios那樣直接給window注入method 以及返回值直接給JavaScript來(lái)調(diào)用呢,于是就調(diào)研實(shí)驗(yàn)一下_webViewController?.runJavascript()方式

_webViewController?.runJavascript('JavaScript method name(${params})') //實(shí)際上我們從文檔獲取的方法應(yīng)該這個(gè)是一個(gè)調(diào)用JavaScript 方法的方式

實(shí)際上還可以這么用

_webViewController?.runJavascript('window.flutterWebView = {getUserInfo: function() '
        '{return${_getAppUserInfoStr()}}}');

//實(shí)際上就是給window創(chuàng)建一個(gè)flutterWebView對(duì)象 , 然后在flutterWebView里創(chuàng)建一個(gè)getUserInfo方法 ,然后它返回值是本地的_getAppUserInfoStr(),  它只能支持字符串.

//JavaScript端直接調(diào)用就可以獲取方法返回值了
window.flutterWebView.getUserInfo

//當(dāng)然如果實(shí)時(shí)數(shù)據(jù)有更新就需要runJavascript重新set一下返回值 


//需要注意的是webview的onWebViewCreated里注入會(huì)有效, 其他的可能會(huì)有時(shí)序差異