Flutter与H5通信入门指南-原创手记-慕课网

Flutter与H5通信简介

什么是Flutter和H5

Flutter 是由 Google 开发的开源 UI 框架，用于开发跨平台的移动应用程序。它采用 Dart 语言编写，并提供了丰富的动画和交互效果，能够快速创建美观且性能良好的应用。Flutter 可以在 Android 和 iOS 平台上运行，并且还支持其他平台如 Web、桌面应用等。

H5（HTML5）是 HTML 的第五个主要版本，它允许开发者创建动态、交互式的网页应用。H5 包含了 HTML、CSS 和 JavaScript 三部分，可以实现丰富的网页功能，包括视频播放、拖放、动画效果等。H5 主要用于开发 Web 应用，并且可以运行在各种支持 HTML5 的浏览器中。

为什么需要Flutter与H5通信

Flutter 和 H5 通常会被用于不同的场景。Flutter 适用于构建高性能、跨平台的移动应用，而 H5 通常用于创建动态的网页应用。在某些场景下，我们可能需要两者结合使用，以利用各自的优势。

混合应用: 有些应用可能需要部分使用 Flutter 进行开发，而另一部分使用 H5 来展示网页内容或进行一些特定的 Web 交互。
内嵌浏览器: 在 Flutter 应用中，可以内嵌 Web 浏览器来展示 H5 页面，或者允许用户通过 Flutter 应用访问和交互 H5 页面。
API 调用: 在某些情况下，可能需要从 H5 页面调用 Flutter 的原生功能，或者从 Flutter 应用回调 H5 页面的数据。

设置Flutter项目以支持H5通信

创建Flutter项目

首先，你需要搭建 Flutter 开发环境。确保安装了 Flutter SDK 和 Android Studio 或其他支持 Flutter 的 IDE。然后，你可以使用 Flutter CLI 创建一个新的 Flutter 项目。

flutter create flutter_h5_communication
cd flutter_h5_communication

添加必要的依赖库

为了实现 Flutter 和 H5 之间的通信，你需要引入 flutter_inappwebview 插件。这个插件允许你在 Flutter 应用中嵌入 Web 视图，并实现与 Web 视图的交互。

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_inappwebview: ^5.0.0  # 请根据最新版本进行更新

然后运行 flutter pub get 命令来安装依赖。

使用flutter_inappwebview插件实现通信

插件安装与配置

首先，确保你已经按照上一节的要求添加了 flutter_inappwebview 插件。接下来，你需要在 Flutter 项目中引入该插件，并创建一个 InAppWebView 实例。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebViewPage(),
    );
  }
}

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  InAppWebView? webView;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("H5页面"),
      ),
      body: InAppWebView(
        initialUrl: "https://example.com",
        onWebViewCreated: (controller) {
          webView = controller;
        },
      ),
    );
  }
}

基本用法介绍

通过 InAppWebView，你可以实现与 H5 页面的交互。例如，你可以通过 JavaScript 代码执行一些操作，或者监听 H5 页面的事件。

import 'dart:js';

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  InAppWebView? webView;

  void executeJavaScript(String jsCode) {
    if (webView != null) {
      webView!.evaluateJavascript(source: jsCode);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("H5页面"),
      ),
      body: InAppWebView(
        initialUrl: "https://example.com",
        onWebViewCreated: (controller) {
          webView = controller;
          executeJavaScript("console.log('执行JavaScript代码')");
        },
      ),
    );
  }
}

实例演示：在Flutter中调用H5页面的方法

创建H5页面

首先，创建一个简单的 H5 页面。例如，创建一个 index.html 文件，包含一个按钮，当点击按钮时会触发一个 JavaScript 方法。

<!DOCTYPE html>
<html>
<head>
  <title>H5页面</title>
  <script>
    function showAlert() {
      alert("Hello from H5!");
    }
  </script>
</head>
<body>
  <button onclick="showAlert()">点击我</button>
</body>
</html>

在Flutter中调用H5页面的方法

在 Flutter 应用中，你可以通过 InAppWebView 调用 H5 页面中的 JavaScript 方法。

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  InAppWebView? webView;

  void executeJavaScript(String jsCode) {
    if (webView != null) {
      webView!.evaluateJavascript(source: jsCode);
    }
  }

  void callH5Function() {
    executeJavaScript("showAlert()");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("H5页面"),
      ),
      body: Column(
        children: [
          InAppWebView(
            initialUrl: "file:///android_asset/index.html",
            onWebViewCreated: (controller) {
              webView = controller;
            },
          ),
          ElevatedButton(
            onPressed: callH5Function,
            child: Text("调用H5方法"),
          ),
        ],
      ),
    );
  }
}

实例演示：从H5页面回调数据到Flutter

在H5页面中调用Flutter的回调方法

在 H5 页面中，你可以通过 JavaScript 调用 Flutter 的方法。首先，在 Flutter 中注册一个 JavaScript 通道，然后在 H5 页面中通过该通道调用 Flutter 的方法。

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  InAppWebView? webView;

  void handleJavaScriptMessage(String message) {
    print("收到H5回调: $message");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("H5页面"),
      ),
      body: Column(
        children: [
          InAppWebView(
            initialUrl: "file:///android_asset/index.html",
            onWebViewCreated: (controller) {
              webView = controller;
              webView!.addJavaScriptHandler(
                handlerName: "callbackToFlutter",
                callback: (arguments) {
                  handleJavaScriptMessage(arguments[0]);
                },
              );
            },
          ),
          ElevatedButton(
            onPressed: () {
              executeJavaScript("callbackToFlutter('Hello from H5!')");
            },
            child: Text("回调到Flutter"),
          ),
        ],
      ),
    );
  }

  void executeJavaScript(String jsCode) {
    if (webView != null) {
      webView!.evaluateJavascript(source: jsCode);
    }
  }
}

从Flutter接收H5回调的数据

在 H5 页面中，你可以通过 JavaScript 调用 Flutter 的回调方法。在 Flutter 应用中，通过 addJavaScriptHandler 注册回调处理函数。

<!DOCTYPE html>
<html>
<head>
  <title>H5页面</title>
  <script>
    function sendToFlutter() {
      window.flutter_inappwebview_msg = 'Hello from H5!';
      window.flutter_inappwebview.callHandler('callbackToFlutter', window.flutter_inappwebview_msg);
    }
  </script>
</head>
<body>
  <button onclick="sendToFlutter()">回调到Flutter</button>
</body>
</html>

在 Flutter 应用中，注册并处理回调：

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  InAppWebView? webView;

  void handleJavaScriptMessage(String message) {
    print("收到H5回调: $message");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("H5页面"),
      ),
      body: Column(
        children: [
          InAppWebView(
            initialUrl: "file:///android_asset/index.html",
            initialOptions: InAppWebViewGroupOptions(
              crossPlatform: InAppWebViewOptions(
                javaScriptEnabled: true,
                useShouldOverrideUrlLoading: true,
              ),
            ),
            onWebViewCreated: (controller) {
              webView = controller;
              webView!.addJavaScriptHandler(
                handlerName: "callbackToFlutter",
                callback: (arguments) {
                  handleJavaScriptMessage(arguments[0]);
                },
              );
            },
          ),
          ElevatedButton(
            onPressed: () {
              executeJavaScript("sendToFlutter()");
            },
            child: Text("回调到Flutter"),
          ),
        ],
      ),
    );
  }

  void executeJavaScript(String jsCode) {
    if (webView != null) {
      webView!.evaluateJavascript(source: jsCode);
    }
  }
}

常见问题与解决方法

常见问题

JavaScript 代码执行失败：确保 H5 页面加载完成后再执行 JavaScript 代码。
回调方法未被调用：检查 JavaScript 代码是否正确调用了回调方法，并确保 Flutter 应用正确注册了回调处理函数。
跨域问题：确保 H5 页面和 Flutter 应用在同一域中运行。

解决方案

确保 H5 页面加载完成再执行 JavaScript 代码：
在 onWebViewCreated 回调中执行 JavaScript 代码，确保 H5 页面已经加载完成。
检查 JavaScript 代码是否正确调用了回调方法：
确保在 H5 页面中正确调用 window.flutter_inappwebview.callHandler 方法，并传递正确的参数。
解决跨域问题：
如果 H5 页面和 Flutter 应用不在同一域中运行，可以通过配置 WebView 的 initialOptions 属性来允许跨域请求。


class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  InAppWebView? webView;

  void handleJavaScriptMessage(String message) {
    print("收到H5回调: $message");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("H5页面"),
      ),
      body: Column(
        children: [
          InAppWebView(
            initialUrl: "https://example.com",
            initialOptions: InAppWebViewGroupOptions(
              crossPlatform: InAppWebViewOptions(
                javaScriptEnabled: true,
                useShouldOverrideUrlLoading: true,
              ),
            ),
            onWebViewCreated: (controller) {
              webView = controller;
              webView!.addJavaScriptHandler(
                handlerName: "callbackToFlutter",
                callback: (arguments) {
                  handleJavaScriptMessage(arguments[0]);
                },
              );
            },
          ),
          ElevatedButton(
            onPressed: () {
              executeJavaScript("sendToFlutter()");
            },
            child: Text("回调到Flutter"),
          ),
        ],
      ),
    );
  }

  void executeJavaScript(String jsCode) {
    if (webView != null) {
      webView!.evaluateJavascript(source: jsCode);
    }
  }
}
``

通过以上步骤和示例代码，你应该能够实现 Flutter 和 H5 之间的通信。如果你遇到其他问题，可以参考 `flutter_inappwebview` 的官方文档或在相关社区寻求帮助。