Flutter与H5通信：新手入门教程-原创手记-慕课网

概述

本文详细介绍了Flutter与H5通信的过程和方法，包括双向数据传递和函数调用。文章涵盖了从环境准备到实现Flutter调用H5和H5调用Flutter的完整步骤。同时，文中还提供了常见问题的解决方法和调试技巧，帮助开发者更好地理解和应用Flutter与H5通信技术。

什么是Flutter与H5通信

Flutter与H5通信是指Flutter应用程序与嵌入在Flutter中的H5页面之间互相传递数据和执行函数的过程。这种双向通信机制允许Flutter和H5页面共享信息，以实现更复杂的交互功能。

通信的意义和应用场景

Flutter与H5通信的意义在于提供了一个灵活的解决方案，使开发者能够在Flutter应用中整合现有的H5页面资源，实现高度定制化的交互体验。应用场景包括：

利用H5页面实现某些特定功能，例如广告展示、问卷调查等。
允许用户在Flutter应用中浏览H5页面并执行与Flutter应用交互的操作。

准备环境

安装Flutter和创建项目

安装Flutter：
- 下载Flutter SDK：https://flutter.dev/docs/get-started/install
- 安装Flutter环境（如Dart SDK等）。
创建Flutter项目：
- 使用命令行工具创建新的Flutter项目：
```
flutter create my_flutter_app
```
启动Flutter项目：
- 在项目根目录下执行：
```
flutter run
```

配置H5页面

准备H5页面：

创建一个简单的HTML文件，例如index.html。

在该文件中编写简单的H5页面代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My H5 Page</title>
</head>
<body>
    <h1>Hello from H5!</h1>
    <button id="callFlutter">Call Flutter Function</button>
</body>
</html>

将H5页面代码添加到Flutter项目中，例如在assets目录下创建index.html。
在pubspec.yaml文件中添加如下代码，以确保H5页面可以被Flutter项目识别：
```
flutter:
  assets:
    - assets/index.html
```

实现Flutter调用H5

创建H5页面并嵌入Flutter

将H5页面代码添加到Flutter项目中，例如在assets目录下创建index.html。
在pubspec.yaml文件中添加如下代码，以确保H5页面可以被Flutter项目识别：
```
flutter:
  assets:
    - assets/index.html
```
在Flutter项目中添加webview_flutter包：
- 打开pubspec.yaml文件，在dependencies部分添加：
```
dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^3.0.0
```
- 运行flutter pub get命令以下载并添加依赖。

在Flutter项目中创建一个展示H5页面的页面：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class H5Page extends StatefulWidget {
  @override
  _H5PageState createState() => _H5PageState();
}

class _H5PageState extends State<H5Page> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("H5 Page"),
      ),
      body: WebView(
        initialUrl: 'file:///android_asset/index.html',
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
      ),
    );
  }
}

通过JavaScript通道调用H5页面的函数

在H5页面中添加JavaScript函数，例如在index.html中添加：

<script>
function callFlutterFunction() {
    JavaScriptChannel.postMessage('Hello from H5');
}
</script>

在Flutter代码中使用JavaScript通道调用这个函数：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class H5Page extends StatefulWidget {
  @override
  _H5PageState createState() => _H5PageState();
}

class _H5PageState extends State<H5Page> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("H5 Page"),
      ),
      body: WebView(
        initialUrl: 'file:///android_asset/index.html',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
          _controller.addJavaScriptChannel(
            'flutterChannel',
            onMessageReceived: (JavascriptMessage message) {
              print(message.message);
            },
          );
        },
        javascriptChannels: <JavascriptChannel>[
          JavascriptChannel(
            name: 'flutterChannel',
            onMessageReceived: (JavascriptMessage message) {
              print(message.message);
            },
          ),
        ].toSet(),
      ),
    );
  }
}

实现H5调用Flutter

在H5页面中设置回调函数

在H5页面中设置回调函数，例如在index.html中添加：

<script>
window.flutter_inappwebview = {
    onMessage: function(message) {
        console.log(message);
    }
};
</script>

在Flutter中监听H5页面的回调

在Flutter代码中监听H5页面的回调：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class H5Page extends StatefulWidget {
  @override
  _H5PageState createState() => _H5PageState();
}

class _H5PageState extends State<H5Page> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("H5 Page"),
      ),
      body: WebView(
        initialUrl: 'file:///android_asset/index.html',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
        javascriptChannels: <JavascriptChannel>[
          JavascriptChannel(
            name: 'flutterChannel',
            onMessageReceived: (JavascriptMessage message) {
              print(message.message);
            },
          ),
        ].toSet(),
      ),
    );
  }

  void sendMessageToH5(String message) {
    _controller.evaluateJavascript('window.flutter_inappwebview.onMessage("${message}")');
  }
}

示例：在H5页面触发事件，Flutter接收并处理

在H5页面中添加触发事件的按钮，例如在index.html中添加：

<button id="callFlutter">Call Flutter Function</button>
<script>
document.getElementById("callFlutter").addEventListener("click", function() {
    window.flutter_inappwebview.onMessage("Hello from H5");
});
</script>

在Flutter代码中处理H5页面触发的事件：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class H5Page extends StatefulWidget {
  @override
  _H5PageState createState() => _H5PageState();
}

class _H5PageState extends State<H5Page> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("H5 Page"),
      ),
      body: WebView(
        initialUrl: 'file:///android_asset/index.html',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
        javascriptChannels: <JavascriptChannel>[
          JavascriptChannel(
            name: 'flutterChannel',
            onMessageReceived: (JavascriptMessage message) {
              print(message.message);
              // 处理接收到的消息
            },
          ),
        ].toSet(),
      ),
    );
  }
}

常见问题及解决方法

通信延迟问题

确保JavaScript通道和回调函数已经正确设置，以避免延迟问题。
在Flutter和H5页面之间使用异步通信机制，例如Future或Stream。

跨域问题

使用WebView组件中的baseUrl属性设置跨域资源的基础路径。
在H5页面中使用CORS策略设置允许的跨域资源访问。

错误调试技巧

使用print语句输出调试信息，例如在JavaScript通道中输出消息，以帮助定位问题。
使用Flutter DevTools工具进行实时调试和性能分析。

总结与实践

项目实践建议

熟悉Flutter和H5页面的基本开发流程。
实践搭建一个包含Flutter和H5页面的混合应用。
掌握Flutter与H5通信的基本原理和技术细节。

进一步学习资源推荐

参考Flutter官方文档：https://flutter.dev/docs
在慕课网学习Flutter相关课程：https://www.imooc.com/course/list/flutter
查看Flutter和H5通信的相关示例和教程：https://flutter.dev/docs/development/ui/webview