flutter_js中JS向Flutter传消息报错，如何注册消息通道？

出现这个错误的核心原因是消息通道监听的注册顺序错误：你先执行了JS代码调用sendMessage，但此时Dart端还没完成对应通道的监听注册，导致JS找不到已注册的通道。以下是修复方案及正确的消息通道注册方式：

关键修复点 #

• 必须先注册消息通道监听，再执行包含sendMessage的JS代码
• 确保JS中sendMessage的通道名称与Dart端onMessage的注册名称完全匹配

修改后的完整代码 #

import 'dart:convert';
import 'package:flutter_js/flutter_js.dart';

Future<Map<String, dynamic>> getObjectName(JavascriptRuntime jsRuntime) async {
  final completer = Completer<Map<String, dynamic>>();

  // 1. 先注册消息通道监听，指定通道名'passJson2Dart'
  jsRuntime.onMessage('passJson2Dart', (args) {
    print("收到JS传递的参数：$args");
    try {
      Map<String, dynamic> person = json.decode(args);
      print("JSON解析结果：");
      print(person);
      completer.complete(person);
      return person;
    } catch (e) {
      print("解析失败：$e");
      completer.completeError(e);
      return null;
    }
  });

  // 2. 再执行JS代码，调用sendMessage传递数据
  jsRuntime.evaluate("""
  const Person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
  };

  sendMessage('passJson2Dart', JSON.stringify(Person));
  """);

  return completer.future;
}

额外说明 #

• sendMessage是flutter_js包注入的全局函数，无需自己在JS中定义
• 加入try-catch处理JSON解析异常，避免因JS传递的数据格式错误导致程序崩溃
• 如果不需要异步返回结果，可以去掉Completer，直接在监听回调中处理数据

内容的提问来源于stack exchange，提问作者jl.bat