点击按钮时如何从InAppWebView向Flutter传递数据？

现有代码问题分析 #

1. Flutter侧仅注册了handlerFoo和mySum两个处理器，但JS代码中调用了未注册的handlerFooWithArgs，导致无法触发对应逻辑。
2. 代码逻辑与需求不符：你需要的是JS向Flutter传JSON，但现有代码是先从Flutter拿数据，后续传递步骤无对应处理器承接。

修正方案 #

1. Flutter侧：注册接收JSON的处理器

在onWebViewCreated中添加专门接收JSON数据的处理器，用于后续API调用：

child: InAppWebView(
  initialFile: "assets/blockly_webview/pages/index.html",
  initialOptions: options,
  onWebViewCreated: (controller) {
    // 原有handlerFoo（保留从Flutter向JS传数据的逻辑）
    controller.addJavaScriptHandler(
        handlerName: 'handlerFoo',
        callback: (args) {
          return {
            'env_type': DynamicUI.envType,
            'parent_blocks': currentLevelStatus.parentBlock,
            'child_blocks': currentLevelStatus.childBlock,
            'userAccessToken': userAccessToken,
            'device_list': userDeviceController.deviceList[0].deviceId
          };
        });
    
    // 原有mySum（保留测试用的求和逻辑）
    controller.addJavaScriptHandler(
        handlerName: "mySum",
        callback: (args) {
          print("From the JavaScript side:");
          print(args);
          return args.reduce((curr, next) => curr + next);
        });
    
    // 新增：接收JS传递的JSON数据，用于API调用
    controller.addJavaScriptHandler(
      handlerName: 'receiveJsonData',
      callback: (args) {
        // 提取JS传递的JSON对象（args是参数列表，取第一个元素）
        Map<String, dynamic> receivedJson = args[0];
        print('收到JS传来的JSON数据: $receivedJson');
        
        // 这里写入你的API调用逻辑，例如：
        // await yourApiCall(receivedJson);
        
        // 可选：返回处理结果给JS
        return {'status': 'success', 'msg': '数据已接收并处理'};
      }
    );
  },
),

2. JS侧：调整逻辑，传递JSON到Flutter

修改send_Data函数，确保在WebView环境就绪后，正确调用Flutter侧的receiveJsonData处理器：

function send_Data(){
  console.log("send_Data函数已触发");
  
  // 构造要传递的JSON数据（替换成你的实际数据）
  const targetJson = {
    "param1": "test_value",
    "param2": 100,
    "param3": {"nested_key": "nested_value"}
  };

  // 先判断Flutter WebView是否已就绪
  if (window.flutter_inappwebview) {
    callFlutterHandler(targetJson);
  } else {
    // 未就绪则监听就绪事件，避免提前调用
    window.addEventListener("flutterInAppWebViewPlatformReady", function() {
      callFlutterHandler(targetJson);
    });
  }

  // 封装调用逻辑，避免重复代码
  function callFlutterHandler(data) {
    window.flutter_inappwebview.callHandler('receiveJsonData', data)
      .then(function(result) {
        console.log('Flutter返回的处理结果:', result);
      })
      .catch(function(error) {
        console.error('调用Flutter处理器失败:', error);
      });
  }
}

关键注意事项 #

• 处理器名称严格匹配：Flutter侧的handlerName必须和JS中callHandler的第一个参数完全一致，大小写敏感。
• 参数传递规则：JS调用callHandler时传入的所有参数，会作为Flutter侧callback的args列表。如果仅传一个JSON对象，Flutter侧取args[0]即可。
• 避免重复绑定事件：不要在每次调用send_Data时都添加flutterInAppWebViewPlatformReady监听，会导致多次触发逻辑。

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