Flutter中webview实现双向通信指南

2023-11-06 23:18:20

Flutter 中使用 WebView 实现双向通信

简介

随着移动互联网的蓬勃发展，混合开发已成为主流，即在原生平台中嵌入 WebView 以呈现 H5 页面并进行交互。Flutter 作为一款跨平台开发框架，同样支持 WebView 功能。本文将深入探讨如何在 Flutter 中使用 WebView，实现与 H5 页面之间的双向通信。

WebView_flutter 插件

webview_flutter 是一个流行的 Flutter 插件，它提供了 WebView 组件，可将 H5 页面嵌入到 Flutter 应用中。该插件支持双向通信，使 Flutter 应用与 WebView 中的 H5 页面能够相互传递数据。

安装 WebView_flutter 插件

在 Flutter 项目中安装 webview_flutter 插件非常简单：

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

dependencies:
  webview_flutter: ^2.0.15

运行命令：
```
flutter pub get
```

使用 WebView_flutter 插件

安装插件后，即可在 Flutter 代码中使用 WebView：

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

class WebViewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView'),
      ),
      body: WebView(
        initialUrl: 'https://flutter.dev',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

实现双向通信

webview_flutter 插件支持双向通信，允许 Flutter 应用与 WebView 中的 H5 页面相互传递数据。

从 Flutter 应用到 H5 页面

要从 Flutter 应用向 H5 页面发送数据，可以使用 WebViewController 的 evaluateJavascript 方法：

_controller.evaluateJavascript('window.alert("Hello from Flutter")');

从 H5 页面到 Flutter 应用

要从 H5 页面向 Flutter 应用发送数据，可以使用 window.flutter_app.postMessage 方法：

window.flutter_app.postMessage({
  'message': 'Hello from H5',
});

监听 WebView 事件

为了接收来自 WebView 的事件，可以监听 WebView组件的 onWebViewCreated 属性：

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

class WebViewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView'),
      ),
      body: WebView(
        initialUrl: 'https://flutter.dev',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController controller) {
          controller.evaluateJavascript('window.flutter_app = this');
        },
      ),
    );
  }
}

代码示例

以下代码展示了一个完整的 Flutter 应用，其中包含一个 WebView，并实现了双向通信：

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

class WebViewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView'),
      ),
      body: WebView(
        initialUrl: 'https://flutter.dev',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController controller) {
          controller.evaluateJavascript('window.flutter_app = this');
          controller.addJavaScriptChannel(JavaScriptChannel(
            name: 'FlutterAppChannel',
            onMessageReceived: (JavaScriptMessage message) {
              print('Received message from H5: ${message.message}');
            },
          ));
        },
      ),
    );
  }
}