webview_flutter 与H5交互

使用方法

在pubspec.yaml添加依赖

dependencies:
  flutter:
    sdk: flutter
    webview_flutter: 0.3.21

基本使用


 WebView(
    onWebViewCreated: (WebViewController webViewController) {
    controller = webViewController;
    _controller.complete(webViewController);
                },
    javascriptChannels:[_jsChannel(viewService.context)].toSet() ,
//  initialUrl: 'data:text/html;base64,${base64Encode(const Utf8Encoder().convert(htmlString))}', //加载本地html
    initialUrl: url,
    javascriptMode: JavascriptMode.unrestricted,
    onPageStarted: (url){
              //开始网页加载,打开加载条
                },
    onPageFinished: (url){
              //完成网页加载,关闭加载条
                },
   gestureNavigationEnabled: true,

              )

js发消息给Flutter

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./build/calendar.css">
    <style>
        .btn{
            background: #f00;color:#fff
        }
    </style>
</head>
<body style="background:#ddd;">
<div style="text-align: center">
    <button id="button" onclick="send()">发送数据到react native</button>
    <p style="text-align: center">收到react native发送的数据: <span id="data"></span></p>
</div>
</body>
<script>
    function send () {
         appobject.postMessage("msg from js");

    }
    
  
  function flutterCallJsMethod(message) {
      document.getElementById("data").innerText = message;
  }
</script>
</html>

//Flutter 接收  
  JavascriptChannel _jsChannel(BuildContext context) => JavascriptChannel(
      name: 'appobject',
      onMessageReceived: (JavascriptMessage message) {
        print("前端交互: ${message.message}");

      });

注意name一定要和HTML【postMessage】前面对应上

Flutter发消息给js

controller.evaluateJavascript('flutterCallJsMethod("msg from flutter")');

结合着上面代码看【flutterCallJsMethod一定要对应上】,接受方法可以在html片段里面看

webview_flutter 与H5交互

使用方法

基本使用

js发消息给Flutter

Flutter发消息给js

猜你喜欢