正文

手机网页里，怎么让网页上的JS和App交互？揭秘Flutter WebView注入JS技巧

/0 浏览量
0330

在Flutter开发中，WebView组件提供了一个强大的方式来集成Web内容。有时候，你可能需要让Flutter应用与嵌入的网页JavaScript进行交互。以下是一些关于如何在Flutter WebView中注入JavaScript的技巧。

1. 使用WebView组件

首先，确保在你的Flutter项目中已经添加了flutter_webview_plugin依赖。你可以在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_webview_plugin: ^2.0.0

然后，在你的Flutter代码中使用WebView组件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('WebView Example'),
        ),
        body: WebView(
          initialUrl: "https://www.example.com",
        ),
      ),
    );
  }
}

2. 注入JavaScript

为了与嵌入的网页JavaScript交互，你可以使用WebView组件的injectJavaScript方法。这个方法允许你注入一段JavaScript代码到WebView中。

WebView(
  initialUrl: "https://www.example.com",
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (WebView webview) {
    webview.injectJavaScript(r"""
      window.flutterCallJS = function(message) {
        Flutter.postMessage(message);
      };
    """);
  },
  javascriptChannels: <JavascriptChannel>[
    _myJavascriptChannel,
  ].toSet(),
)

在上面的代码中，我们注入了一段JavaScript代码，它定义了一个名为flutterCallJS的函数，该函数可以在JavaScript中被调用，并将消息发送回Flutter应用。

3. 监听JavaScript消息

为了接收JavaScript发送的消息，你需要创建一个JavascriptChannel并实现onMessage回调：

final myJavascriptChannel = JavascriptChannel(
  name: 'flutter',
  onMessage: (message) {
    print('JavaScript message: ${message.message}');
  },
);

将这个JavascriptChannel添加到javascriptChannels集合中，如上所示。

4. 发送消息到JavaScript

现在，你可以在Flutter代码中调用JavaScript函数，并将消息发送到嵌入的网页：

void sendMessageToJS() {
  webViewPlugin.postMessage('Hello from Flutter!');
}

当你调用sendMessageToJS方法时，嵌入的网页会收到来自Flutter的消息。

5. 示例代码

以下是一个完整的示例，展示了如何在Flutter WebView中注入JavaScript并与JavaScript交互：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('WebView Example'),
        ),
        body: WebView(
          initialUrl: "https://www.example.com",
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebView webview) {
            webview.injectJavaScript(r"""
              window.flutterCallJS = function(message) {
                Flutter.postMessage(message);
              };
            """);
          },
          javascriptChannels: <JavascriptChannel>[
            _myJavascriptChannel,
          ].toSet(),
        ),
      ),
    );
  }
}

final myJavascriptChannel = JavascriptChannel(
  name: 'flutter',
  onMessage: (message) {
    print('JavaScript message: ${message.message}');
  },
);

通过以上步骤，你可以在Flutter WebView中注入JavaScript，并与嵌入的网页进行交互。这些技巧可以帮助你在Flutter应用中实现更多复杂的功能。

-- 展开阅读全文 --