flutter 与前端JS 交互

1.flutter 与前端JS 交互

有时候学的东西太多容易忘记。
核心代码

1.flutter 端

 WebView(
        initialUrl: webUrl,
        javascriptMode: JavascriptMode.unrestricted,
        javascriptChannels: <JavascriptChannel>{
          _toasterJavascriptChannel(context),
        },
 _toasterJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: 'Toast', //注册一个名字为Toast的全局js方法
        onMessageReceived: (JavascriptMessage message) {
          //处理业务的代码逻辑
          if (kDebugMode) {
            print("html5按钮点我返回的${message.message}");
          }
        });
  }		

2,js端代码

document.getElementById("flutterTest").addEventListener("click",()=>{
			console.log('调用了吗')
			Toast.postMessage(
			  JSON.stringify({
			      name: 'tom',
			      age: 12
			  })
		);
})

你可能感兴趣的:(android,kotlin,flutter,混合开发,flutter,前端,javascript)