基于 Electron 模拟鸿蒙设备硬件信息查询的可行性探索

个人首页： VON
鸿蒙系列专栏：鸿蒙开发小型案例总结
综合案例：鸿蒙综合案例开发
鸿蒙6.0：从0开始的开源鸿蒙6.0.0
鸿蒙5.0：鸿蒙5.0零基础入门到项目实战
本文章所属专栏：Electron for OpenHarmony

模拟鸿蒙设备硬件信息查询的可行性探索

[基于 Electron 模拟鸿蒙设备硬件信息查询的可行性探索](#基于 Electron 模拟鸿蒙设备硬件信息查询的可行性探索)
- 一、背景与动机
- 二、技术可行性分析
- 三、实现方案
- - [📁 项目结构](#📁 项目结构)
- [1. `package.json` ------ 项目元信息与启动脚本](#1. package.json —— 项目元信息与启动脚本)
- [2. `main.js` ------ 主进程（控制应用生命周期）](#2. main.js —— 主进程（控制应用生命周期）)
- [3. `preload.js` ------ 预加载脚本（安全通信桥梁）](#3. preload.js —— 预加载脚本（安全通信桥梁）)
- [4. `index.html` ------ 首页（渲染进程入口）](#4. index.html —— 首页（渲染进程入口）)
- [5. `search.html` ------ 功能页面示例](#5. search.html —— 功能页面示例)
- [6. `styles.css` ------ 全局样式](#6. styles.css —— 全局样式)
- [✅ 总结：各文件职责](#✅ 总结：各文件职责)
- - 测试
- 四、应用场景
- - [✅ 场景 1：多端 UI 适配调试](#✅ 场景 1：多端 UI 适配调试)
  - [✅ 场景 2：前端逻辑联调](#✅ 场景 2：前端逻辑联调)
  - [✅ 场景 3：自动化测试注入](#✅ 场景 3：自动化测试注入)
- 五、局限性与注意事项
- 六、扩展方向
- 七、结语

基于 Electron 模拟鸿蒙设备硬件信息查询的可行性探索

摘要：鸿蒙（HarmonyOS）生态快速发展，但其原生开发调试门槛高、真机依赖强。本文探讨如何利用跨平台桌面框架 Electron，在 Windows/macOS/Linux 环境下模拟鸿蒙设备的硬件信息查询能力，为前端联调、UI 适配和逻辑验证提供低成本、高效率的桌面端仿真方案。

一、背景与动机

在鸿蒙应用开发中，开发者常需根据设备类型（手机、平板、手表、智慧屏）动态调整 UI 布局或功能策略。例如：

手表端禁用高清视频播放
平板端启用分栏布局
智慧屏端使用语音优先交互

然而，获取真实设备硬件信息 （如型号、屏幕分辨率、内存大小、CPU 架构）通常依赖 HarmonyOS 的 @ohos.systemParameter 或 deviceManager 等原生 API，这些接口仅在真机或 DevEco 模拟器中可用。

这带来两个痛点：

前端团队无法独立验证多端适配逻辑
自动化测试难以覆盖不同设备场景

于是，我们思考：能否在 Electron 桌面应用中模拟一套"鸿蒙设备信息查询"能力？

二、技术可行性分析

能力	鸿蒙原生实现	Electron 可模拟程度
设备型号（Model）	`deviceInfo.model`	✅ 完全可 Mock
操作系统版本	`system.getSystemVersion()`	✅ 可返回固定值（如 "4.0.0"）
屏幕分辨率	`windowManager.getScreenInfo()`	⚠️ 可获取当前桌面分辨率，或手动指定
内存/CPU 信息	`hiSysEvent` / 系统能力	⚠️ 可通过 `systeminformation` 获取主机信息，再映射为模拟设备
设备类型（手机/平板等）	`deviceInfo.deviceType`	✅ 可预设设备角色

结论：核心字段均可模拟，关键在于"映射策略"而非"真实采集"。

三、实现方案

以下是一个 标准、可扩展的 Electron 基础项目架构，适用于桌面应用开发（如 GitCode 搜索工具、鸿蒙设备模拟器等）。每个文件的作用和核心代码均已说明。

📁 项目结构

复制代码

my-electron-app/
├── main.js                # 主进程：应用生命周期 + 窗口管理 + 原生能力
├── preload.js             # 预加载脚本：安全桥接主进程与渲染进程
├── index.html             # 渲染进程首页（入口页面）
├── search.html            # 功能页面示例（如搜索页）
├── my.html                # 其他页面（如"我的"）
├── styles.css             # 全局样式
├── package.json           # 项目配置 + 启动脚本
└── README.md              # 项目说明

1. `package.json` ------ 项目元信息与启动脚本

json 复制代码

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Electron 基础模板",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dev": "electron ."
  },
  "devDependencies": {
    "electron": "^28.0.0"
  }
}

✅ 作用：

定义入口文件为 main.js

通过 npm start 启动应用

2. `main.js` ------ 主进程（控制应用生命周期）

js 复制代码

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

// 创建窗口函数
function createWindow(filePath = 'index.html') {
  const win = new BrowserWindow({
    width: 900,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'), // 关键：注入预加载脚本
      contextIsolation: true, // 启用上下文隔离（安全必需）
      nodeIntegration: false  // 禁用 Node.js 集成（安全）
    }
  });

  win.loadFile(filePath);
  // win.webContents.openDevTools(); // 开发时可开启
  return win;
}

// 应用启动
app.whenReady().then(() => {
  let mainWindow = createWindow();

  // 支持多页面跳转（如从 index.html 跳到 search.html）
  ipcMain.handle('app:navigate', (event, page) => {
    mainWindow.loadFile(page);
  });

  // 示例：暴露硬件信息查询（用于鸿蒙模拟）
  ipcMain.handle('system:getHardwareInfo', async () => {
    const os = require('os');
    return {
      platform: os.platform(),
      arch: os.arch(),
      totalmem: os.totalmem(),
      cpus: os.cpus().length
    };
  });

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// 所有窗口关闭时退出（macOS 除外）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

✅ 作用：

创建和管理应用窗口

注册 IPC 通信通道（如 app:navigate, system:getHardwareInfo）

控制应用生命周期（启动、退出）

3. `preload.js` ------ 预加载脚本（安全通信桥梁）

js 复制代码

const { contextBridge, ipcRenderer } = require('electron');

// 暴露有限 API 到渲染进程（禁止直接暴露 ipcRenderer！）
contextBridge.exposeInMainWorld('electronAPI', {
  // 页面跳转
  navigate: (page) => ipcRenderer.invoke('app:navigate', page),

  // 查询系统信息（示例）
  getHardwareInfo: () => ipcRenderer.invoke('system:getHardwareInfo'),

  // 打开外部链接（如跳转 GitCode）
  openExternal: (url) => {
    const { shell } = require('electron');
    shell.openExternal(url);
  }
});

✅ 作用：

在 上下文隔离 模式下安全传递消息

防止渲染进程直接访问 Node.js 或主进程敏感接口

提供统一的前端调用入口（window.electronAPI.xxx）

4. `index.html` ------ 首页（渲染进程入口）

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="header">
    <h1>Electron 基础模板</h1>
  </div>
  <div class="content">
    <button onclick="goToSearch()">🔍 进入搜索页</button>
    <button onclick="showHardwareInfo()">💻 查看硬件信息</button>
  </div>

  <script>
    function goToSearch() {
      window.electronAPI.navigate('search.html');
    }

    async function showHardwareInfo() {
      const info = await window.electronAPI.getHardwareInfo();
      alert(JSON.stringify(info, null, 2));
    }
  </script>
</body>
</html>

✅ 作用：

用户看到的第一个界面

通过 window.electronAPI 调用主进程功能

5. `search.html` ------ 功能页面示例

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>搜索</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <input type="text" id="keyword" placeholder="输入关键词">
  <button onclick="search()">搜索</button>
  <div id="results"></div>

  <script>
    async function search() {
      const kw = document.getElementById('keyword').value;
      // 此处可调用 IPC 实现真实搜索（如 Puppeteer）
      document.getElementById('results').innerText = `搜索了: ${kw}`;
    }

    // 返回首页
    function goHome() {
      window.electronAPI.navigate('index.html');
    }
  </script>
</body>
</html>

✅ 作用：

展示具体业务功能（如用户搜索、设备模拟）

复用 electronAPI 实现跨页面跳转或数据请求

6. `styles.css` ------ 全局样式

css 复制代码

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f5f7fa;
}

.header {
  padding: 20px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.content {
  padding: 20px;
}

button {
  padding: 10px 20px;
  margin: 8px;
  border: none;
  border-radius: 6px;
  background: #0d6efd;
  color: white;
  cursor: pointer;
}

button:hover {
  background: #0b5ed7;
}

✅ 作用：

统一 UI 风格

支持响应式布局（可扩展）

✅ 总结：各文件职责

文件	角色	关键原则
`main.js`	主进程	控制窗口、生命周期、原生能力
`preload.js`	安全桥接	上下文隔离 + 有限 API 暴露
`*.html`	渲染进程	纯前端逻辑，通过 `electronAPI` 调用后端
`styles.css`	样式	全局复用
`package.json`	项目配置	定义入口与依赖

此架构具备：

✅ 安全性（上下文隔离 + 预加载脚本）
✅ 可维护性（职责分离）
✅ 可扩展性（轻松添加新页面或 IPC 接口）

你可以在该基础上集成 Puppeteer（搜索） 、systeminformation（硬件模拟） 、本地数据库 等能力，快速构建专业级 Electron 应用。

测试

电脑测试

真机测试

四、应用场景

✅ 场景 1：多端 UI 适配调试

在 Electron 中切换 phone / tablet / watch 模式
实时预览同一套代码在不同设备下的渲染效果

✅ 场景 2：前端逻辑联调

业务代码调用 harmonyAPI.getDeviceInfo() 判断是否支持某功能
无需等待鸿蒙原生 SDK 集成即可完成闭环测试

✅ 场景 3：自动化测试注入

在 Cypress / Playwright 测试中，通过 Electron 预加载不同设备配置
覆盖"仅在手表端隐藏某按钮"等边界 case

五、局限性与注意事项

非真实设备数据：仅用于逻辑验证，不能替代真机性能测试
API 行为差异：鸿蒙原生 API 可能有异步权限校验，Electron 模拟默认成功
分布式能力无法模拟：如软总线、跨设备迁移等需专用工具

📌 建议：将此方案定位为 "开发期辅助工具"，而非生产环境替代品。

六、扩展方向

结合 Electron 的 webContents.debugger 拦截网络请求，模拟鸿蒙云服务响应
开发 Electron 插件，一键切换设备预设并刷新页面
输出设备配置 JSON，供鸿蒙 DevEco 模拟器导入

七、结语

虽然 Electron 无法直接访问鸿蒙内核，但通过合理的数据模拟与接口抽象，我们成功构建了一个轻量、灵活的"鸿蒙设备信息仿真层"。它降低了跨端开发的协作成本，让前端工程师也能在熟悉的桌面环境中，高效验证面向鸿蒙生态的多设备适配逻辑。

工具的价值，不在于复刻真实，而在于加速认知。

基于 Electron 模拟鸿蒙设备硬件信息查询的可行性探索

模拟鸿蒙设备硬件信息查询的可行性探索

基于 Electron 模拟鸿蒙设备硬件信息查询的可行性探索

一、背景与动机

二、技术可行性分析

三、实现方案

📁 项目结构

1. package.json ------ 项目元信息与启动脚本

2. main.js ------ 主进程（控制应用生命周期）

3. preload.js ------ 预加载脚本（安全通信桥梁）

4. index.html ------ 首页（渲染进程入口）

5. search.html ------ 功能页面示例

6. styles.css ------ 全局样式

✅ 总结：各文件职责

测试

四、应用场景

✅ 场景 1：多端 UI 适配调试

✅ 场景 2：前端逻辑联调

✅ 场景 3：自动化测试注入

五、局限性与注意事项

六、扩展方向

七、结语

1. `package.json` ------ 项目元信息与启动脚本

2. `main.js` ------ 主进程（控制应用生命周期）

3. `preload.js` ------ 预加载脚本（安全通信桥梁）

4. `index.html` ------ 首页（渲染进程入口）

5. `search.html` ------ 功能页面示例

6. `styles.css` ------ 全局样式