1回答

CrazyCodeBoy

1天前

说下思路：
1.Flutter 端用 webview_flutter 插件加载 Vue 写的 H5。
2.用 JavascriptChannel 在 Flutter ↔ Vue 之间通信。
Flutter 端示例：

import 'package:webview_flutter/webview_flutter.dart';

WebViewController? _controller;

@override
Widget build(BuildContext context) {
  return WebView(
    initialUrl: 'https://your-vue-page.com',
    javascriptMode: JavascriptMode.unrestricted,
    javascriptChannels: {
      JavascriptChannel(
        name: 'Flutter',
        onMessageReceived: (message) {
          print("收到 Vue 消息: ${message.message}");
        },
      ),
    },
    onWebViewCreated: (controller) {
      _controller = controller;
    },
  );
}

// Flutter 调用 Vue
void callVueMethod() {
  _controller?.runJavascript('vueMethodFromFlutter("参数")');
}

Vue 端示例：

// Vue 调用 Flutter
window.Flutter.postMessage("这是从Vue来的消息");

// 被 Flutter 调用的方法
window.vueMethodFromFlutter = function(param) {
  console.log("收到 Flutter 调用: ", param);
}


---

0

0