关于应用页面 Cordova&OpenHarmony 混合开发实战

📌 模块概述

关于应用页面展示了家庭菜谱应用的基本信息，包括版本号、开发者信息、许可证、更新日志和反馈渠道等。这是一个相对简单的信息展示页面，大部分内容由 Web 层负责渲染；但在某些场景下，版本号、构建时间等信息可能来自原生层，因此可以通过 ArkTS 插件动态获取。

🔗 关于页面数据来源

应用版本号可以写死在 Web 层常量中，也可以从 ArkTS 插件动态获取；
开发者信息、许可证文本等通常是静态内容，直接在 HTML 中编写；
更新日志可以从外部 JSON 文件或 ArkTS 插件加载；
反馈链接可以直接指向邮箱、GitHub Issues 或内置反馈表单。

🔧 关于应用页面结构（HTML 片段）

html 复制代码

<div class="card">
  <div class="card-header">
    <h3 class="card-title">家庭菜谱</h3>
    <p class="text-sub">版本 1.0.0</p>
  </div>
  <div class="card-content">
    <p>一款为家庭烹饪爱好者设计的菜谱管理应用。</p>
    <p>开发者：示例团队</p>
    <p>许可证：MIT</p>
  </div>
</div>

这段 HTML 展示了关于应用页面的基本结构：应用名称、版本号和简介。

🔧 动态加载版本信息（JavaScript 片段）

javascript 复制代码

async function loadAppInfo() {
  let version = '1.0.0';
  if (window.cordova) {
    version = await getVersionFromNative();
  }
  document.getElementById('app-version').textContent = version;
}

async function getVersionFromNative() {
  return new Promise(resolve => {
    cordova.exec(resolve, () => resolve('1.0.0'), 'AppInfoPlugin', 'getVersion', []);
  });
}

这段代码展示了如何在 Web 层动态获取应用版本号：如果运行在 Cordova 环境中，就从 ArkTS 插件获取；否则使用默认值。

🔌 在鸿蒙原生层提供版本信息（ArkTS 片段）

ts 复制代码

// entry/src/main/ets/plugins/AppInfoPlugin.ets
import plugin from '@ohos.plugin';

@plugin
export default class AppInfoPlugin {
  async getVersion(): Promise<string> {
    // 示例：从应用配置或包管理器获取版本号
    return '1.0.0';
  }

  async getDeviceInfo(): Promise<string> {
    // 示例：返回设备型号和系统版本
    return 'OpenHarmony Device';
  }
}

ArkTS 的 AppInfoPlugin 提供了获取版本和设备信息的方法。真实项目中可以从应用的 app.json5 或系统 API 中读取这些信息。

javascript 复制代码

async function loadDeviceInfo() {
  if (!window.cordova) return;
  const info = await new Promise(resolve => {
    cordova.exec(resolve, () => resolve(''), 'AppInfoPlugin', 'getDeviceInfo', []);
  });
  if (info) {
    document.getElementById('device-info').textContent = info;
  }
}

在 Web 层，我们可以在页面加载时调用 loadDeviceInfo 获取设备信息，并展示在关于页面中，让用户了解应用运行的环境。

📝 小结

关于应用页面是用户了解应用基本信息的重要窗口，虽然内容相对简单，但通过 Cordova&OpenHarmony 混合架构，我们可以让版本号、设备信息等动态内容来自原生层，保证信息的准确性和一致性。这样既简化了 Web 层的维护，又充分利用了原生层的能力。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net