HarmonyOS鸿蒙Next中往web传json map问题

核心原理

无论使用哪种框架，核心逻辑都是：

1. 原生侧（ArkUI）： 拦截按钮点击事件，调用 Web 组件提供的 JavaScript 注入接口。
2. 数据转换： 将原生侧的 Map/Object 转换为 JSON 字符串。
3. Web 侧（JS）： 编写一个全局函数来接收这个字符串，并解析回 JSON 对象使用。

方案一：HarmonyOS ArkUI (ArkTS)

如果你是在开发鸿蒙应用，使用的是 @ohos.web.webview 组件。

ArkUI 侧 (ArkTS)

你需要使用 runJavaScript 方法来执行一段 JS 代码，将数据传进去。

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebPage {
  // 创建一个 WebController 来控制 Web 组件
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  // 模拟要传输的 JSON Map
  private myData: Record<string, any> = { "name": "张三", "age": 18, "city": "Shanghai" };

  build() {
    Column() {
      // 按钮
      Button('发送数据到Web')
        .onClick(() => {
          // 1. 将 Map 转换为 JSON 字符串
          let jsonStr = JSON.stringify(this.myData);
          
          // 2. 构造要执行的 JS 代码
          // 假设 Web 页面里有一个叫 receiveDataFromNative 的函数
          let jsCommand = `receiveDataFromNative('${jsonStr}')`;

          // 3. 调用 runJavaScript 注入代码
          this.controller.runJavaScript(jsCommand);
        })

      // Web 组件
      Web({ src: 'www.example.com/index.html', controller: this.controller })
    }
  }
}

Web 侧 (HTML/JS)

在网页中定义对应的接收函数：

// 定义全局函数供原生调用
function receiveDataFromNative(jsonStr) {
    console.log("收到原生数据:", jsonStr);
    try {
        var data = JSON.parse(jsonStr);
        // 更新 UI 或处理逻辑
        document.getElementById("content").innerText = "姓名: " + data.name;
    } catch (e) {
        console.error("解析 JSON 失败", e);
    }
}

方案二：Flutter (Webview)

如果你使用的是 Flutter 的 webview_flutter 插件。

Flutter 侧 (Dart)

使用 runJavascript 方法。

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class MyWebView extends StatefulWidget {
  @override
  _MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
  late final WebViewController _controller;
  // 模拟 JSON Map
  final Map<String, dynamic> myData = {"name": "李四", "score": 95};

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: Icon(Icons.send),
            onPressed: () async {
              // 1. 转换为 JSON 字符串
              String jsonStr = jsonEncode(myData);
              
              // 2. 转义单引号（防止 JSON 里的双引号破坏 JS 语法，虽然通常 encode 处理好了，但稳妥起见）
              // 注意：这里最好用单引号包裹参数，因为 JSON 内部全是双引号
              String js = "receiveDataFromNative($jsonStr)"; 
              
              // 3. 执行 JS
              _controller.runJavaScript(js);
            },
          )
        ],
      ),
      body: WebView(
        initialUrl: 'assets/index.html',
        javascriptMode: JavascriptMode.unrestricted, // 必须开启 JS
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
      ),
    );
  }
}

Web 侧

同上，定义 receiveDataFromNative 函数。

方案三：Android 原生 (WebView)

如果你是在写 Android 原生 ArkUI 组件或 Activity。

Android 侧 (Kotlin/Java)

使用 evaluateJavascript。

val data = mapOf("id" to 101, "status" to "active")
val jsonStr = JSONObject(data).toString()

// 注意转义，Kotlin 中可以使用 raw string """...""" 来简化
val jsCode = "javascript:receiveDataFromNative('$jsonStr')"

webView.evaluateJavascript(jsCode, null)

关键注意事项

1. JS 注入时机：

   • 确保 Web 页面已经加载完成（例如监听了 onPageFinished 或 WebLifecycle 的 Ready 状态）之后再发送数据，否则 JS 函数还没定义，调用会失败。
   • 如果按钮点击时页面还没好，建议先把数据缓存起来，等页面加载完再发。

2. 字符转义（非常重要）：

   • JSON 字符串通常包含双引号 "。
   • 如果 JS 函数调用写成 func(" + jsonStr + ")，容易因为 JSON 里的双引号导致 JS 语法错误。
   • 推荐做法： 在拼接 JS 字符串时，尽量利用 JSON 本身是双引号的特性，或者做好转义。
   • 最佳实践： 很多框架（如 Flutter）的 runJavaScript 其实可以直接接受对象（取决于版本），或者你需要手动确保生成的字符串是合法的 JS 代码。

3. 安全性：

   • 不要传输敏感信息（如密码、Token），因为 JS 代码在客户端是可见的。

总结

实现路径就是：ArkUI 按钮点击 -> JSON.stringify(Map) -> Web组件.runJavaScript(“回调函数(数据)”) -> Web页面对象接收并处理。