webview_flutter与js互动

最新推荐文章于 2024-08-24 07:11:47 发布

原创最新推荐文章于 2024-08-24 07:11:47 发布 · 332 阅读

0 ·

CC 4.0 BY-SA版权

flutter 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍如何在Flutter中使用webview_flutter插件与网页JS进行双向通信。具体包括定义WebViewController，设置JavascriptChannel实现JS调用Flutter方法，以及通过evaluateJavascript实现Flutter调用JS函数。适用于希望增强WebView功能的Flutter开发者。

由于要求在webview_flutter与网页JS相互调用，这里做个简单说明

//前面要定义
WebViewController _webViewController;


 //js调用flutter关键地方
  JavascriptChannel _setScanBarcode(BuildContext context) {
    return JavascriptChannel(
        name: 'ScanBarcode',
        onMessageReceived: (JavascriptMessage message) async {
          print(message.message);         
        });
  }
  
_captionWEbview() {
    return WebView(
                initialUrl: url,
                //JS执行模式 是否允许JS执行
                javascriptMode: JavascriptMode.unrestricted,
                javascriptChannels: <JavascriptChannel>[
                    _setScanBarcode(context),
                ].toSet(),
                onWebViewCreated: (WebViewController controller) {
                  _webViewController = controller;
                },
              );
  }


//这里是flutter调用js,可以放在按钮事件里面
_webViewController.evaluateJavascript("SCANRsult('"+barcode+"')");


//这里是html里面的js
if(window.hasOwnProperty('ScanBarcode')){
                    window.ScanBarcode.postMessage("调用摄像头");  
                }