Flutter WebView与H5交互实现

在Flutter应用中集成WebView时，如何实现与H5页面的双向通信？具体遇到以下问题：

  1. 使用官方webview_flutter插件时，H5调用Flutter方法总是失败，JS桥接代码已按文档配置但仍无响应；
  2. 从Flutter向H5传递数据时，controller.evaluateJavascript在iOS端生效但Android端无效，是否与平台差异有关？
  3. 如何监听H5页面的特定事件（如按钮点击/表单提交）并触发Flutter端的逻辑？是否需要注入额外JS监听脚本？
  4. 在混合开发场景下，WebView加载本地HTML文件与远程URL时，交互方式是否有区别？求稳定实现方案或最佳实践。

更多关于Flutter WebView与H5交互实现的实战教程也可以访问 https://www.itying.com/category-92-b0.html

3 回复

实现Flutter WebView与H5交互，主要借助flutter_webview_plugin或官方的webview_flutter插件。以下是基本步骤：

  1. 引入依赖：在pubspec.yaml中添加webview_flutter。
  2. 加载H5页面：使用WebView加载你的H5页面。
  3. 注入JS：通过evaluateJavascript或runJavascript向H5注入JS代码，触发H5方法。
  4. 监听JS消息：利用onWebResourceMessage监听H5发送的消息，并调用Flutter方法处理。

示例代码：

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

class MyWebView extends StatefulWidget {
  @override
  _MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: WebView(
        initialUrl: 'https://your-h5-page.com',
        onWebViewCreated: (controller) {
          _controller = controller;
          // 注入JS代码
          _controller.runJavascript("window.flutter_inappwebview.callHandler('test', 'Hello from H5');");
        },
        javascriptChannels: <JavascriptChannel>{
          JavascriptChannel(
            name: 'testChannel',
            onMessageReceived: (message) {
              print(message.message); // 处理H5发送的消息
            },
          ),
        },
      ),
    );
  }
}

H5可通过window.flutter_inappwebview.callHandler向Flutter发送消息。需确保H5端正确配置了与Flutter通信的逻辑。

更多关于Flutter WebView与H5交互实现的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中通过WebView与H5交互，可以使用flutter_webview_plugin或webview_flutter插件。以下以webview_flutter为例：

  1. 添加依赖：在pubspec.yaml中添加webview_flutter: ^4.0.0。
  2. 创建WebView：使用WebView组件加载H5页面。
  3. 交互实现：
    • JS调用Native：通过javascriptChannels定义一个通道（如MyJavaScriptChannel），在H5页面中调用window.flutter_inappwebview.callHandler('test', params)，在Flutter中监听该通道的消息并处理。
    • Native调用JS：使用controller.runJavascript()执行JavaScript代码。

示例代码：

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

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  late WebViewController controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: WebView(
        initialUrl: 'https://example.com',
        onWebViewCreated: (WebViewController webViewController) {
          controller = webViewController;
        },
        javascriptChannels: {
          JavascriptChannel(
            name: 'MyJavaScriptChannel',
            onMessageReceived: (message) {
              print('JS消息: ${message.message}');
            },
          ),
        },
        onPageFinished: (url) {
          controller.runJavascript("console.log('Hello from Flutter')");
        },
      ),
    );
  }
}

这样就实现了基本的双向交互。

Flutter WebView与H5交互实现

在Flutter中实现WebView与H5的交互主要通过webview_flutter插件完成。以下是主要实现方式：

基础设置

首先添加依赖：

dependencies:
  webview_flutter: ^4.4.2

基本交互实现

1. Flutter调用H5方法

import 'package:webview_flutter/webview_flutter.dart';

WebViewController _controller = WebViewController()
  ..loadRequest(Uri.parse('https://your-website.com'))
  ..setJavaScriptMode(JavaScriptMode.unrestricted);

// 调用H5方法
void callH5Function() {
  _controller.runJavaScript('yourJavaScriptFunction()');
}

2. H5调用Flutter方法

WebViewController _controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..addJavaScriptChannel(
    'Flutter', 
    onMessageReceived: (JavaScriptMessage message) {
      // 处理来自H5的消息
      print('Received message: ${message.message}');
    }
  )
  ..loadRequest(Uri.parse('https://your-website.com'));

H5中调用：

Flutter.postMessage('Hello from H5!');

更完整的双向通信示例

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)
      ..addJavaScriptChannel(
        'Flutter',
        onMessageReceived: (JavaScriptMessage message) {
          // 处理H5发送的消息
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('H5说: ${message.message}')),
          );
        },
      )
      ..loadRequest(Uri.parse('https://your-website.com'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView交互示例'),
        actions: [
          IconButton(
            icon: Icon(Icons.refresh),
            onPressed: () {
              // Flutter调用H5方法
              _controller.runJavaScript('window.flutterCallback("Hello from Flutter!")');
            },
          ),
        ],
      ),
      body: WebViewWidget(controller: _controller),
    );
  }
}

H5中的对应代码：

// 接收Flutter调用
window.flutterCallback = function(message) {
  console.log('收到Flutter消息:', message);
  // 可以回调给Flutter
  Flutter.postMessage('H5已收到: ' + message);
};

注意事项

  1. 确保WebView的JavaScript模式设置为unrestricted
  2. iOS可能需要额外配置Info.plist允许加载特定域名
  3. 注意通信安全，不要传递敏感信息
  4. 复杂数据结构建议使用JSON格式传递

这种交互方式可以实现Flutter与H5之间的双向通信，适用于需要混合开发的场景。

回到顶部