Flutter webview_flutter接收JS双字符串参数问题求助

由于无法修改HTML中的JS代码，我们可以通过在Flutter中注入JS代码重写jsBridge.postMessage方法的方式，将多个参数打包成JSON字符串传递，再在Flutter端解析还原参数。

具体实现步骤： #

1. 导入dart:convert用于JSON解析
2. 在onPageFinished回调中注入JS，覆盖原postMessage方法，将所有参数转为JSON数组
3. 在JavascriptChannel的onMessageReceived中解析JSON，获取多参数

修改后的完整Flutter代码： #

import 'dart:convert'; // 新增导入
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

// 假设这是你的State类中的build方法代码
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Webview Example'),
    ),
    body: WebView(
      initialUrl: 'file:///android_asset/flutter_assets/html/test.html',
      javascriptMode: JavascriptMode.unrestricted,
      onWebViewCreated: (controller) {
        _webViewController = controller;
      },
      onPageFinished: (url) async {
        try {
          // 注入JS重写postMessage方法，打包多参数为JSON
          await _webViewController.runJavascript('''
            // 保存原生的postMessage方法
            var originalPostMessage = window.jsBridge.postMessage;
            // 重写方法，将所有参数转为JSON数组传递
            window.jsBridge.postMessage = function() {
              var args = JSON.stringify(Array.from(arguments));
              originalPostMessage(args);
            };
          ''');
          // 保留原有message监听逻辑
          await _webViewController.runJavascript(
              'window.addEventListener("message", (event) => {jsBridge.postMessage(JSON.stringify(event.data));}, false);');
        } on Exception catch (e) {
          print('注入JS失败: $e');
        }
      },
      javascriptChannels: {
        JavascriptChannel(
          name: 'jsBridge',
          onMessageReceived: (message) {
            try {
              // 解析JSON数组，获取多参数
              List<dynamic> args = jsonDecode(message.message);
              print('jsBridge 接收参数:');
              print('第一个参数: ${args[0]}');
              if (args.length > 1) {
                print('第二个参数: ${args[1]}');
              }
              // 更多参数可通过args[index]获取
            } on FormatException catch (e) {
              // 兼容原单个字符串传递场景
              print('jsBridge 接收单个字符串: ${message.message}');
            }
          },
        ),
      },
    ),
  );
}

原理说明： #

• 原生JavascriptChannel仅会接收postMessage的第一个参数，通过重写JS方法，可将所有传入参数（无论数量）转为JSON数组字符串
• Flutter端接收到字符串后，解析为数组即可获取所有参数
• 同时兼容原有的单个字符串传递场景，通过异常处理区分不同传递格式

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