技術標籤：javascriptflutter

Flutter與js通訊

1.匯入包flutter_webview_plugin: 0.3.10
2.定義變數:

 FlutterWebviewPlugin plugin = FlutterWebviewPlugin();

3.使用元件

WebviewScaffold(
        url: url,
        appBar: new AppBar(
          backgroundColor: ColorConstant.mainColor,
          elevation: 0,
          centerTitle:
 
 true,
          title: new Text(
            ObjectUtil.isEmptyString("標題") ? "第三方H5獲取使用者資訊" : "1111",
            style: TextStyle(
                color: ColorConstant.whiteColor,
                fontSize: TextConstant.titleFontSize),
          ),
        ),
        initialChild:
 
 Container(), //初始化頁面
        withZoom: true, //允許網頁縮放
        withLocalStorage: true,
        withJavascript: true, //允許執行 js 程式碼
        useWideViewPort: true,
        displayZoomControls: true,
        withOverviewMode: true,
        javascriptChannels: [_toasterJavascriptChannel(context)].toSet(),
      )
 
;

4.js呼叫flutter

//js呼叫flutter
  JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: 'Print', //這個那麼是和js端約定的一個協議名，可以自定義
        onMessageReceived: (JavascriptMessage message) {
          print(message.message);  //js返回資料
          plugin.evalJavascript('想要傳送的資料給後端');
        });
  }

5.js程式碼

//點選按鈕可以將資料從flutter獲取並且顯示到js頁面中
<button type="button" onclick="callJS()">Click Me!</button>

name1: <input type="text" name="fname" id="name1" value="" /></br></br>

function callJS() {
		Print.postMessage("js呼叫了flutter");
	}
function ueitUserInfo(message){
//message接受獲取的資料
	    document.getElementById("name1").value=message;
	}