flutter怎么与js交互

Flutter与JS交互的方法包括：使用Flutter WebView插件、通过平台通道进行通信、使用Flutter的JS插件。

通过使用Flutter WebView插件，开发者可以在Flutter应用中嵌入一个WebView来加载和展示网页内容，并且可以通过JavaScript与Flutter进行交互。这种方法比较直接且简单，适用于需要在应用中展示网页内容的场景。接下来，我们将详细介绍这种方法。

一、使用Flutter WebView插件

1. 设置WebView插件

首先，需要在Flutter项目中添加webview_flutter插件。打开pubspec.yaml文件，在dependencies部分添加如下代码：

dependencies: flutter: sdk: flutter webview_flutter: ^2.0.10

然后，在终端中运行flutter pub get来安装插件。

2. 加载网页内容

在Flutter代码中，可以使用WebView控件来加载网页内容。例如：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter WebView Example'),
        ),
        body: WebView(
          initialUrl: 'https://flutter.dev',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),
    );
  }
}

在上面的代码中，我们创建了一个简单的Flutter应用，并在其中嵌入了一个WebView控件。WebView控件的initialUrl属性指定了要加载的网页URL，而javascriptMode属性设置为JavascriptMode.unrestricted，表示允许WebView运行JavaScript代码。

3. 与JavaScript交互

为了在Flutter和JavaScript之间进行交互，我们需要使用JavascriptChannel。首先，在Flutter代码中定义一个JavascriptChannel：

JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
  return JavascriptChannel(
    name: 'Toaster',
    onMessageReceived: (JavascriptMessage message) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(message.message)),
      );
    },
  );
}

然后，将JavascriptChannel添加到WebView中：

body: WebView(
  initialUrl: 'https://flutter.dev',
  javascriptMode: JavascriptMode.unrestricted,
  javascriptChannels: <JavascriptChannel>{
    _toasterJavascriptChannel(context),
  },
),

在网页的JavaScript代码中，可以通过调用Toaster.postMessage()方法来发送消息到Flutter。例如：

<!DOCTYPE html>
<html>
<head>
  <title>Flutter WebView Example</title>
  <script type="text/javascript">
    function showToast() {
      Toaster.postMessage('Hello from JavaScript!');
    }
  </script>
</head>
<body>
  <button onclick="showToast()">Show Toast</button>
</body>
</html>

当用户点击按钮时，JavaScript代码将通过Toaster.postMessage()方法发送一条消息到Flutter，Flutter应用将收到消息并显示一个SnackBar。

二、通过平台通道进行通信

1. 创建平台通道

在Flutter中，可以使用MethodChannel来创建平台通道。例如：

import 'package:flutter/services.dart';
class JSBridge {
  static const MethodChannel _channel = MethodChannel('js_bridge');
  static Future<void> callJSMethod(String method, [dynamic arguments]) async {
    try {
      await _channel.invokeMethod(method, arguments);
    } on PlatformException catch (e) {
      print("Failed to call JS method: '${e.message}'.");
    }
  }
}

2. 在iOS平台上实现通道方法

在iOS平台上，可以在AppDelegate.swift文件中实现通道方法：

import UIKit
import Flutter
import WebKit
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    let controller = window.rootViewController as! FlutterViewController
    let channel = FlutterMethodChannel(name: "js_bridge",
                                      binaryMessenger: controller.binaryMessenger)
    channel.setMethodCallHandler { [weak self] (call, result) in
      if call.method == "callJSMethod" {
        if let args = call.arguments as? [String: Any],
           let method = args["method"] as? String,
           let arguments = args["arguments"] {
          // 通过JavaScript调用方法
        }
        result(nil)
      } else {
        result(FlutterMethodNotImplemented)
      }
    }
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

3. 在Android平台上实现通道方法

在Android平台上，可以在MainActivity.kt文件中实现通道方法：

package com.example.flutter_app
import android.os.Bundle
import io.flutter.embedding.android.FlutterActivity
import io.flutter.plugin.common.MethodChannel
class MainActivity: FlutterActivity() {
  private val CHANNEL = "js_bridge"
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    MethodChannel(flutterEngine?.dartExecutor?.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
      if (call.method == "callJSMethod") {
        val method = call.argument<String>("method")
        val arguments = call.argument<Any>("arguments")
        // 通过JavaScript调用方法
        result.success(null)
      } else {
        result.notImplemented()
      }
    }
  }
}

三、使用Flutter的JS插件

1. 添加JS插件

首先，需要在Flutter项目中添加js插件。打开pubspec.yaml文件，在dependencies部分添加如下代码：

dependencies: flutter: sdk: flutter js: ^0.6.3

然后，在终端中运行flutter pub get来安装插件。

2. 在Flutter代码中使用JS插件

在Flutter代码中，可以使用js插件来调用JavaScript代码。例如：

import 'package:flutter/material.dart';
import 'package:js/js.dart';
@JS('alert')
external void showAlert(String message);
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter JS Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showAlert('Hello from Flutter!');
            },
            child: Text('Show Alert'),
          ),
        ),
      ),
    );
  }
}

在上面的代码中，我们使用@JS注解定义了一个外部的JavaScript函数alert，并在Flutter应用中调用该函数。

总结

通过以上三种方法，Flutter开发者可以轻松地与JavaScript进行交互。使用Flutter WebView插件是最直接的方式，适用于需要在应用中展示网页内容的场景；通过平台通道进行通信则适用于需要在Flutter和原生平台之间进行复杂交互的场景；使用Flutter的JS插件则适用于需要直接调用JavaScript代码的场景。根据具体需求选择适合的方法，可以提高开发效率和用户体验。