Native应用与嵌入WebView的Flutter Web应用数据传递及回退关闭咨询

以下是Flutter Web应用嵌入Native端WebView及双向交互的完整实现方案，覆盖你提到的两个核心需求：

• Native端向Flutter Web传递数据
• Flutter Web端点击返回按钮触发Native关闭WebView

1 构建Flutter Web应用 #

开发完Flutter Web业务逻辑后，执行构建命令生成生产环境产物：
flutter build web --release --base-href "/your_path/"
注：base-href参数可根据你的部署路径调整，若直接嵌入本地可省略
构建完成后产物默认输出在build/web目录下，你可以选择将产物部署到服务器，或者直接放到Native端的本地资源目录内加载。

2 将Flutter Web嵌入Native端WebView #

2.1 Android端实现 #

使用官方WebView组件，开启JavaScript支持：

// 基础配置示例
webView.apply {
    settings.javaScriptEnabled = true
    settings.domStorageEnabled = true
    // 加载远程地址/本地资源地址
    loadUrl("https://your-flutter-web-domain.com")
}

2.2 iOS端实现 #

使用WKWebView组件，配置偏好设置开启JavaScript：

let config = WKWebViewConfiguration()
config.preferences.javaScriptEnabled = true
let webView = WKWebView(frame: .zero, configuration: config)
// 加载地址
webView.load(URLRequest(url: URL(string: "https://your-flutter-web-domain.com")!))

3 实现Native向Flutter Web传递数据 #

3.1 Flutter Web端预留接收方法 #

在Flutter Web的入口逻辑中，给window对象挂载全局接收方法：

import 'dart:html' as html;

void main() {
  // 挂载全局方法供Native调用传参
  html.window.addEventListener('nativeMessage', (event) {
    if (event is html.MessageEvent) {
      final data = event.data as Map;
      // 这里处理Native传递过来的数据
      debugPrint("收到Native数据：$data");
    }
  });
  runApp(const MyApp());
}

3.2 Native端调用方法传参 #

• Android端：
  webView.evaluateJavascript("window.dispatchEvent(new MessageEvent('nativeMessage', {data: ${json.encode(yourData)}}))", null)
• iOS端：

  let jsStr = "window.dispatchEvent(new MessageEvent('nativeMessage', {data: \(yourJsonStr)}))"
  webView.evaluateJavaScript(jsStr) { _, error in
      if let error = error { print("传参失败：\(error)") }
  }
  

4 实现Flutter Web返回按钮触发Native关闭WebView #

4.1 Flutter Web端拦截返回按钮点击，调用Native方法 #

在Flutter应用的AppBar中自定义返回按钮点击逻辑，通过JS通道通知Native：

AppBar(
  leading: IconButton(
    icon: const Icon(Icons.arrow_back),
    onPressed: () {
      // 判断是否运行在WebView环境中，是则通知Native关闭页面
      if (kIsWeb) {
        // 兼容Android/iOS不同调用方式
        if (js.context.hasProperty('Android')) {
          html.window.Android?.postMessage("closeWebView");
        } else if (js.context.hasProperty('webkit')) {
          html.window.webkit?.messageHandlers.closeWebViewHandler?.postMessage("closeWebView");
        }
      } else {
        Navigator.of(context).pop();
      }
    },
  ),
  title: const Text("页面标题"),
)

4.2 Native端监听JS消息，关闭WebView #

• Android端：
  自定义JavascriptInterface接收消息：

  class JsInterface(private val context: Context) {
      @JavascriptInterface
      fun postMessage(message: String) {
          if (message == "closeWebView") {
              // 关闭当前WebView所在的Activity/Fragment
              (context as Activity).finish()
          }
      }
  }
  // 给WebView添加JS接口
  webView.addJavascriptInterface(JsInterface(this), "Android")
  

• iOS端：
  给WKWebView配置ScriptMessageHandler监听消息：

  config.userContentController.add(self, name: "closeWebViewHandler")
  // 实现监听回调
  extension YourViewController: WKScriptMessageHandler {
      func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
          if message.name == "closeWebViewHandler", let msg = message.body as? String, msg == "closeWebView" {
              // 关闭当前WebView所在的ViewController
              dismiss(animated: true)
          }
      }
  }
  

内容的提问来源于stack exchange，提问作者Se7enzZ