Flutter如何实现H5混合开发

在Flutter中如何实现与H5页面的混合开发？具体有哪些方案可以实现Flutter与H5的交互？比如通过WebView加载H5页面时，如何实现Flutter与H5之间的通信？是否有成熟的插件或库推荐？另外，这种混合开发方式在性能上会有哪些需要注意的地方？希望能得到一些具体的实现示例和最佳实践建议。

2 回复

Flutter通过webview_flutter插件加载H5页面，支持与JavaScript双向通信。可调用WebViewController执行JS代码，或通过addJavaScriptChannel接收H5回调，实现原生与H5交互。

更多关于Flutter如何实现H5混合开发的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter 实现 H5 混合开发主要通过 webview_flutter 插件实现，具体步骤如下：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  webview_flutter: ^4.4.2

2. 基础使用

import 'package:webview_flutter/webview_flutter.dart';

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('https://example.com'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('H5混合开发示例')),
      body: WebViewWidget(controller: controller),
    );
  }
}

3. 核心功能配置

  • 启用JavaScript：setJavaScriptMode(JavaScriptMode.unrestricted)
  • 加载本地HTML：
..loadHtmlString('''<html><body><h1>本地HTML</h1></body></html>''')
  • 通信机制：
// Flutter调用JS
controller.runJavaScript('alert("来自Flutter")');

// JS调用Flutter（需注册回调）
controller.addJavaScriptChannel('FlutterBridge', onMessageReceived: (message) {
  print('收到JS消息: ${message.message}');
});

在H5中通过 window.FlutterBridge.postMessage('数据') 调用。

4. 注意事项

  • Android 需在 AndroidManifest.xml 添加网络权限
  • iOS 需在 Info.plist 配置 NSAppTransportSecurity
  • 建议使用 NavigationDelegate 处理页面跳转逻辑

这种方案适合展示型H5页面，复杂交互建议通过通信桥接实现数据交换。

回到顶部