当前位置：首页 > news >正文

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

news 2025/12/30 10:00:31

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

在这里插入图片描述

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

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

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

{
"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` —— 主进程（控制应用生命周期）

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` —— 预加载脚本（安全通信桥梁）

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` —— 首页（渲染进程入口）

<!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` —— 功能页面示例

<!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` —— 全局样式

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`	项目配置	定义入口与依赖