flutter app和h5之间的通信

H5端

<!DOCTYPE html>
<html>
<head>
    <title>H5 Page</title>
</head>
<body>
    <h1>Hello from H5!</h1>

    <script>
        // 定义一个函数来处理来自Flutter的通知
        function handleFlutterNotification(message) {
            alert('Received notification from Flutter: ' + message);
            // 在这里执行你的处理逻辑
        }

        // 添加一个事件监听器,监听来自Flutter应用程序的通知
        document.addEventListener('flutterNotification', function (e) {
            const message = e.detail; // 获取通知的详细信息
            handleFlutterNotification(message);
        });
    </script>
</body>
</html>

flutter端,'flutterNotification’是事件,detail可以当作是参数

// 在需要的地方发送通知到H5页面
final webViewController = await _controller.future;
final message = 'Hello from Flutter!';
webViewController.evaluateJavascript("document.dispatchEvent(new CustomEvent('flutterNotification', { detail: '$message' }))");

你可能感兴趣的:(flutter,flutter,javascript,前端)