Electron for 鸿蒙PC项目实战案例之简单计算器

本项目展示了如何使用Electron创建一个功能完整的计算器应用。通过学习本示例，开发者可以掌握Electron应用的基本架构、事件处理、用户界面设计等核心概念，为开发更复杂的桌面应用奠定基础。同时，本项目也针对鸿蒙PC平台进行了适配，确保在该平台上有良好的使用体验。

言程序plus

235人浏览 · 2025-11-28 17:13:53

言程序plus · 2025-11-28 17:13:53 发布

项目概述

本项目是一个基于Electron框架开发的简单计算器应用，专为鸿蒙PC平台设计。它提供了基本的算术运算功能，包括加、减、乘、除和百分比计算，以及友好的用户界面和键盘支持。
请添加图片描述

功能特点

基础运算：支持加、减、乘、除四则运算
百分比计算：支持百分比运算功能
小数点处理：智能处理小数点输入，避免重复输入
错误处理：处理无效表达式和计算错误
键盘支持：支持使用键盘进行数字输入和运算
操作优化：智能替换连续运算符，优化用户体验
响应式设计：适应不同窗口大小的界面布局
鸿蒙PC适配：针对鸿蒙PC平台优化的用户体验

技术架构

核心架构

主进程 (Main Process)：由main.js实现，负责应用程序生命周期管理和窗口创建
渲染进程 (Renderer Process)：由renderer.js实现，负责UI交互、计算逻辑和事件处理
预加载脚本 (Preload Script)：由preload.js实现，提供安全的进程间通信桥接

文件结构

02-simple-calculator/
├── main.js         # 主进程文件，应用入口
├── preload.js      # 预加载脚本，进程通信
├── index.html      # 应用界面
├── style.css       # 样式文件
├── renderer.js     # 渲染进程逻辑
└── README.md       # 项目说明文档

鸿蒙适配后结构（需整合到 Electron 鸿蒙项目模板中）：


ohos_hap/
├── electron/
│   ├── libs/
│   │   └── arm64-v8a/  # 鸿蒙核心库文件
│   │       ├── libelectron.so
│   │       ├── libadapter.so
│   │       ├── libffmpeg.so
│   │       └── libc++_shared.so
├── web_engine/
│   └── src/
│       └── main/
│           └── resources/
│               └── resfile/
│                   └── resources/
│                       └── app/  # 放置electron应用代码
│                           ├── main.js
│                           ├── package.json
│                           └── src/
└── module.json5        # 鸿蒙应用配置文件

核心代码解析

主进程 (main.js)

主进程负责创建和管理应用窗口，设置应用的基本配置：

function createWindow() {
  const win = new BrowserWindow({
    width: 600,
    height: 700,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false,
      contextIsolation: true
    }
  });

  win.loadFile('index.html');
}

// 应用生命周期管理
app.whenReady().then(() => {
  createWindow();
  // 其他生命周期事件处理...
});

渲染进程 (renderer.js)

渲染进程实现了计算器的核心功能，包括：

输入处理

function appendToDisplay(value) {
  // 防止重复的小数点
  if (value === '.' && display.value.includes('.')) {
    // 智能处理小数点输入逻辑...
    return;
  }
  
  // 防止连续的运算符
  if (['+', '-', '*', '/', '%'].includes(value)) {
    // 运算符处理逻辑...
  }
  
  // 限制显示长度
  if (display.value.length < 15) {
    display.value += value;
  }
}

计算逻辑

function calculateResult() {
  try {
    // 替换特殊符号为JavaScript运算符
    let expression = display.value
      .replace(/×/g, '*')
      .replace(/÷/g, '/')
      .replace(/−/g, '-');
    
    // 处理百分比
    expression = expression.replace(/([\d.]+)%/g, '($1/100)');
    
    // 使用Function构造器安全计算（比eval更安全）
    const result = new Function(`return ${expression}`)();
    
    // 处理结果显示
    if (isFinite(result)) {
      // 限制小数位数...
      display.value = result.toString();
    } else {
      display.value = '错误';
    }
  } catch (error) {
    display.value = '错误';
  }
}

键盘支持

document.addEventListener('keydown', (e) => {
  // 数字键处理
  if (e.key >= '0' && e.key <= '9') {
    appendToDisplay(e.key);
  }
  // 运算符处理
  else if (['+', '-', '*', '/', '.'].includes(e.key)) {
    // 特殊符号转换...
  }
  // 回车键计算
  else if (e.key === 'Enter') {
    calculateResult();
  }
  // 其他按键处理...
});

用户界面 (index.html & style.css)

界面设计简洁现代，包括：

数字键盘：清晰排列的数字按钮
运算符按钮：颜色区分的运算符按钮
功能按钮：清除、删除等功能按钮
显示区域：大尺寸的结果显示区域
响应式设计：适应不同设备的屏幕尺寸

技术要点

安全最佳实践

上下文隔离：启用contextIsolation: true，防止渲染进程直接访问Node.js API
预加载脚本：通过preload.js安全地暴露API
禁用节点集成：设置nodeIntegration: false，增强应用安全性
安全计算：使用Function构造器替代eval，提高安全性

计算逻辑优化

表达式预处理：在计算前对表达式进行标准化处理
错误捕获：全面捕获可能的计算错误
结果格式化：智能处理计算结果的显示格式
边界条件处理：处理各种边界情况，如除以零、无效表达式等

用户体验优化

输入验证：防止无效输入和操作错误
智能提示：错误状态显示
键盘支持：提供完整的键盘操作支持
响应式设计：确保在不同设备上的良好表现

开发与调试

开发环境设置

克隆项目到本地
安装依赖：npm install
启动开发服务器：npm start

调试技巧

使用Chrome DevTools进行渲染进程调试：Ctrl+Shift+I
主进程调试：在启动时添加--inspect参数
计算逻辑调试：使用console.log()输出表达式和中间结果

扩展功能建议

科学计算器：添加三角函数、对数等高级数学函数
历史记录：保存和查看计算历史
主题切换：支持明暗主题切换
记忆功能：添加记忆存储和调用功能
键盘布局自定义：允许用户自定义键盘布局
大数字显示：优化大数字和科学计数法显示

鸿蒙PC适配改造指南

详细操作指南请看这篇文章：
Electron 鸿蒙pc开发环境搭建完整保姆级教程（window）

1. 环境准备

系统要求：Windows 10/11、8GB RAM以上、20GB可用空间
工具安装：
DevEco Studio 5.0+（安装鸿蒙SDK API 20+）
Node.js 18.x+

2. 获取Electron鸿蒙编译产物

登录Electron 鸿蒙官方仓库
下载Electron 34+版本的Release包（.zip格式）
解压到项目目录，确认electron/libs/arm64-v8a/下包含核心.so库

3. 部署应用代码

将Electron应用代码按以下目录结构放置：
在这里插入图片描述


web_engine/src/main/resources/resfile/resources/app/
├── main.js
├── package.json
└── src/
    ├── index.html
    ├── preload.js
    ├── renderer.js
    └── style.css

4. 配置与运行

打开项目：在DevEco Studio中打开ohos_hap目录
配置签名：
进入File → Project Structure → Signing Configs
自动生成调试签名或导入已有签名
连接设备：
启用鸿蒙设备开发者模式和USB调试
通过USB Type-C连接电脑
编译运行：点击Run按钮或按Shift+F10

5. 验证检查项

✅ 应用窗口正常显示界面
✅ 窗口大小可调整，响应式布局生效
✅ 控制台无"SysCap不匹配"或"找不到.so文件"错误
✅ 动画效果正常播放

跨平台兼容性

平台	适配策略	特殊处理
Windows	标准Electron运行	无特殊配置
macOS	标准Electron运行	保留dock图标激活逻辑
Linux	标准Electron运行	确保系统依赖库完整
鸿蒙PC	通过Electron鸿蒙适配层	禁用硬件加速，使用特定目录结构