欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

📌 概述

“关于应用”模块虽然看起来只是展示版本号和开发者信息的静态页面，但在 Cordova 与 OpenHarmony 混合项目中，它还承担着多个重要职责：向用户透明展示应用的技术栈与权限使用情况；提供开源协议、隐私政策等必要链接；展示当前运行环境（HarmonyOS 版本、设备信息、内核版本等）；以及暴露一部分“隐藏”的调试入口，如日志收集、配置重置、测试数据注入等。通过把这些内容集中到一个模块中，可以让应用在合规性、可维护性和用户信任感方面更上一层楼。

从技术实现上，“关于应用”模块不是简单的纯前端静态文案，而是通过 Cordova 调用 ArkTS 插件动态获取应用版本号、构建号、原生包名、Cordova 桥接版本等信息，并在页面中展示。此外，该模块还会根据当前的隐私设置决定是否展示调试相关入口，例如“导出日志文件”按钮只有在启用了详细日志时才显示，避免普通用户误操作带来困惑。

🔗 完整流程

第一步：加载基础信息与运行环境

当用户打开“关于应用”页面时，前端首先会展示一部分静态信息，如应用名称“喝茶记录 - 茶叶品鉴管理系统”、主要功能简介、核心技术栈（HarmonyOS + Cordova + 原生 HTML/CSS/JavaScript）等。随后，通过 cordova.exec 调用 AppInfoBridge.getAppInfo() 从 OpenHarmony 原生层获取动态信息：包括应用版本号、内部构建号、包名、当前设备型号以及 HarmonyOS 系统版本。Web 侧会在 Promise 返回后更新对应的 DOM 区块，让用户看到真实的环境信息，而不是写死在 HTML 里的过期数据。

第二步：展示协议、致谢与调试入口

在基础信息下方，“关于应用”模块会展示若干必要链接和按钮：如《隐私政策》《用户协议》《开源许可证》等，这些可以是内嵌 HTML 页面，也可以通过 ArkWeb 打开在线文档。同时，还会根据当前用户角色（普通用户/调试模式）和隐私设置决定是否展示调试入口，例如“导出应用日志”“重置本地配置”“清理缓存文件”等按钮。点击这些按钮会触发 Cordova 调用对应 ArkTS 插件完成实际操作，并在页面上显示结果或提示用户下一步操作（如把导出的日志文件发送给开发者）。

第三步：收集反馈与诊断信息（可选）

为了提升产品质量，“关于应用”模块通常还会内置一个简单的反馈表单或“复制诊断信息”按钮。前者让用户可以直接在应用内填写问题描述并生成 JSON 或文本文件；后者则一键把关键信息（版本号、设备信息、设置摘要）复制到剪贴板，方便用户粘贴到邮件或聊天工具中。通过这些设计，可以减少沟通成本，让开发者在排查问题时拥有足够上下文。

🔧 Web 代码实现

关于页面 HTML 结构

<div id="about-page" class="page">
  <div class="page-header">
    <h1>关于应用</h1>
  </div>

  <section class="about-section">
    <h2>应用简介</h2>
    <p>“喝茶记录”是一款基于 HarmonyOS 与 Cordova 混合开发的茶叶品鉴管理工具，用于记录每一次喝茶体验、统计消费、分析偏好趋势。</p>
  </section>

  <section class="about-section">
    <h2>版本信息</h2>
    <ul class="info-list">
      <li>应用版本：<span id="about-app-version">-</span></li>
      <li>内部构建号：<span id="about-build-number">-</span></li>
      <li>包名：<span id="about-bundle-name">-</span></li>
      <li>HarmonyOS 版本：<span id="about-os-version">-</span></li>
      <li>设备型号：<span id="about-device-model">-</span></li>
    </ul>
  </section>

  <section class="about-section">
    <h2>技术栈</h2>
    <ul class="info-list">
      <li>前端：原生 HTML / CSS / JavaScript</li>
      <li>框架：HarmonyOS Cordova + ArkWeb</li>
      <li>存储：IndexedDB + ArkData RdbStore</li>
    </ul>
  </section>

  <section class="about-section">
    <h2>协议与文档</h2>
    <div class="about-links">
      <button class="btn btn-link" onclick="openLocalDoc('privacy')">隐私政策</button>
      <button class="btn btn-link" onclick="openLocalDoc('terms')">用户协议</button>
      <button class="btn btn-link" onclick="openLocalDoc('licenses')">开源许可证</button>
    </div>
  </section>

  <section class="about-section" id="debug-section" style="display: none;">
    <h2>调试与支持</h2>
    <button class="btn btn-primary" onclick="exportLogs()">导出日志文件</button>
    <button class="btn btn-secondary" onclick="copyDiagnostics()">复制诊断信息</button>
    <button class="btn btn-danger" onclick="resetLocalConfig()">重置本地配置</button>
  </section>
</div>

该 HTML 结构将“关于应用”分成五个清晰的区块：简介、版本信息、技术栈、协议与文档、调试与支持。其中版本信息区域的内容会在运行时由 JavaScript+ArkTS 填充；协议与文档按钮可以打开内嵌 markdown 或 HTML 页面；调试区域默认隐藏，只在特定条件下展示（例如启用了详细日志或处于开发构建），以免普通用户误触高危操作。

关于页面逻辑与调试入口

async function initAboutPage() {
  try {
    if (window.cordova) {
      cordova.exec(
        appInfo => {
          updateAboutInfo(appInfo);
        },
        err => {
          console.error('getAppInfo error:', err);
        },
        'AppInfoBridge',
        'getAppInfo',
        []
      );

      // 根据隐私设置决定是否展示调试区
      const privacy = await db.getPrivacySettings();
      if (privacy && privacy.detailedLog) {
        document.getElementById('debug-section').style.display = 'block';
      }
    }
  } catch (error) {
    console.error('initAboutPage failed:', error);
  }
}

function updateAboutInfo(info) {
  document.getElementById('about-app-version').textContent = info.versionName || '-';
  document.getElementById('about-build-number').textContent = info.versionCode || '-';
  document.getElementById('about-bundle-name').textContent = info.bundleName || '-';
  document.getElementById('about-os-version').textContent = info.osVersion || '-';
  document.getElementById('about-device-model').textContent = info.deviceModel || '-';
}

function openLocalDoc(type) {
  // 简化处理：直接导航到内嵌文档页面
  switch (type) {
    case 'privacy':
      navigateTo('doc-privacy');
      break;
    case 'terms':
      navigateTo('doc-terms');
      break;
    case 'licenses':
      navigateTo('doc-licenses');
      break;
  }
}

function exportLogs() {
  if (!window.cordova) return;

  cordova.exec(
    filePath => {
      showToast(`日志已导出到: ${filePath}`, 'success');
    },
    err => {
      console.error('exportLogs error:', err);
      showToast('导出日志失败', 'error');
    },
    'LogBridge',
    'exportLogs',
    []
  );
}

async function copyDiagnostics() {
  const info = {
    version: document.getElementById('about-app-version').textContent,
    build: document.getElementById('about-build-number').textContent,
    os: document.getElementById('about-os-version').textContent,
    device: document.getElementById('about-device-model').textContent
  };

  const text = `version=${info.version}, build=${info.build}, os=${info.os}, device=${info.device}`;

  try {
    await navigator.clipboard.writeText(text);
    showToast('诊断信息已复制到剪贴板', 'success');
  } catch (error) {
    console.error('copyDiagnostics failed:', error);
    showToast('复制失败，请手动截图', 'error');
  }
}

function resetLocalConfig() {
  if (!confirm('确定要重置所有本地配置吗？此操作不会删除喝茶记录，但会清空设置与缓存。')) {
    return;
  }

  db.clearAllSettings().then(() => {
    showToast('本地配置已重置，建议重启应用', 'success');
  }).catch(error => {
    console.error('resetLocalConfig failed:', error);
    showToast('重置失败', 'error');
  });
}

这段 JavaScript 代码展示了“关于应用”模块在运行时的行为：initAboutPage() 会调用 AppInfoBridge.getAppInfo() 获取版本与设备信息，并根据隐私设置决定是否展示调试区域；exportLogs() 和 resetLocalConfig() 则通过 Cordova 触发原生插件完成日志导出与配置重置。copyDiagnostics() 使用 Web 标准 API 将关键信息复制到剪贴板，方便用户在反馈时粘贴使用。

🔌 OpenHarmony 原生代码（ArkTS）

AppInfoBridge：获取应用与设备信息

// entry/src/main/ets/plugins/AppInfoBridge.ets
import bundleManager from '@ohos.bundle.bundleManager';
import deviceInfo from '@ohos.deviceInfo';

export class AppInfoBridge {
  static async getAppInfo(): Promise<Record<string, unknown>> {
    const ctx = globalThis.context;
    const bundleName = ctx.applicationInfo.bundleName;
    const bundleInfo = await bundleManager.getBundleInfo(bundleName, bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION);

    return {
      versionName: bundleInfo.versionName,
      versionCode: bundleInfo.versionCode,
      bundleName: bundleName,
      osVersion: deviceInfo.osFullName,
      deviceModel: deviceInfo.model
    };
  }
}

AppInfoBridge 利用 @ohos.bundle.bundleManager 和 @ohos.deviceInfo 提供的 API 获取当前应用的版本号、构建号和设备信息，并通过 Cordova 返回给 Web 层，保证“关于应用”里显示的信息始终与实际安装包保持一致。

LogBridge：导出原生日志（示意）

// entry/src/main/ets/plugins/LogBridge.ets
import { fileIo } from '@kit.FileIOKit';
import { paths } from '@kit.CoreFileKit';

export class LogBridge {
  static async exportLogs(): Promise<string> {
    const logDir = paths.tempDir + '/logs';
    const logFile = logDir + '/tea_app.log';
    // 实际项目中这里会把 hilog 或自定义日志汇总到 logFile
    return logFile;
  }
}

LogBridge 只是一个简化示例，说明如何在 ArkTS 层准备好日志文件路径并返回给 Web。真正的项目中，你可以在这里汇总系统日志和自定义业务日志，然后提供给导出功能使用。

📝 总结

“关于应用”模块在混合应用中远不只是一个“展示版本号”的静态页面，它承担了：

• 向用户透明展示版本、设备和技术栈信息；
• 集中呈现隐私政策、用户协议和开源许可证等合规内容；
• 提供日志导出、诊断信息复制、配置重置等调试与支持入口；
• 通过 Cordova 与 ArkTS 插件动态获取信息和执行操作。

在这篇实战中，你可以看到 Web 层负责排版与交互，ArkTS 则向下接入 HarmonyOS 的包管理、设备信息和文件系统能力，Cordova 作为桥梁将两者拼接成一个完整的“关于”模块。未来你可以仿照这一模式，为其他项目快速构建既专业又可信赖的“关于应用”页面，让用户清楚地知道自己在使用什么、数据如何被处理，以及在遇到问题时应该如何寻求帮助。