项目概述

本项目是一个基于 Electron 框架开发的鸿蒙 PC 端倒计时计时器应用，旨在为用户提供简洁、高效的时间管理工具。通过直观的图形界面，用户可自定义倒计时时长、控制计时过程，并利用预设功能快速启动常用倒计时场景（如短时休息、专注工作等），适用于学习、工作、生活中的时间规划需求

功能特点

1、精准时间显示
以 “时：分: 秒”（00:00:00）格式实时展示倒计时进度，数字清晰易读，方便用户直观掌握剩余时间。
2、自定义时间设置
支持通过输入框手动设置小时（0-99）、分钟（0-59）、秒（0-59），满足不同时长的倒计时需求（如短至几秒、长至 99 小时）。
**3、完整计时控制提供 **
“开始”“暂停”“重置” 三大核心按钮，支持灵活操控倒计时过程：
开始：启动预设或自定义的倒计时；
暂停：临时中断计时，保留当前剩余时间；
重置：恢复计时至初始设置状态，可重新配置时间。
4、快速预设功能内置
6 种常用倒计时时长（1 分钟、5 分钟、10 分钟、15 分钟、30 分钟、1 小时），用户点击对应按钮即可直接启动，无需手动输入，提升操作效率。
5、结束通知提醒
倒计时结束时，自动显示 “倒计时结束！” 提示框，通过视觉提醒用户时间已到，避免遗漏重要事项。
6、适配性设计
界面布局兼顾美观与实用性，结合 Electron 框架特性，可稳定运行于鸿蒙 PC 端，提供一致的使用体验。

核心架构

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

文件结构

countdown-timer/
├── 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)

主进程不仅负责创建窗口，还处理文件对话框的请求：

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

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

  win.loadFile('index.html');
  
  // 可选：打开开发者工具
  // win.webContents.openDevTools();
}

app.whenReady().then(() => {
  createWindow();

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

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

渲染进程 (renderer.js)

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

1. 格式化时间，确保两位数显示

// 格式化时间，确保两位数显示
function formatNumber(num) {
  return num.toString().padStart(2, '0');
}

2. 更新显示时间

function updateDisplay() {
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;
  
  hoursDisplay.textContent = formatNumber(hours);
  minutesDisplay.textContent = formatNumber(minutes);
  secondsDisplay.textContent = formatNumber(seconds);
}

3. 从输入框获取时间并设置

function setTimeFromInputs() {
  const hours = parseInt(hoursInput.value) || 0;
  const minutes = parseInt(minutesInput.value) || 0;
  const seconds = parseInt(secondsInput.value) || 0;
  
  totalSeconds = hours * 3600 + minutes * 60 + seconds;
  updateDisplay();
  
  // 重置计时器状态
  resetTimerState();
}

// 重置计时器状态
function resetTimerState() {
  if (timerInterval) {
    clearInterval(timerInterval);
    timerInterval = null;
  }
  isRunning = false;
  startBtn.textContent = '开始';
  timerDisplay.classList.remove('timer-finished');
  notification.classList.add('hidden');
}

4. 开始倒计时功能

function startTimer() {
  if (isRunning) {
    // 如果已经在运行，则暂停
    pauseTimer();
    return;
  }
  
  // 如果倒计时已经结束或未设置时间，则从输入框获取时间
  if (totalSeconds === 0) {
    setTimeFromInputs();
  }
  
  // 如果仍然没有时间设置，不启动倒计时
  if (totalSeconds === 0) return;
  
  isRunning = true;
  startBtn.textContent = '暂停';
  
  timerInterval = setInterval(() => {
    if (totalSeconds > 0) {
      totalSeconds--;
      updateDisplay();
    } else {
      // 倒计时结束
      clearInterval(timerInterval);
      timerInterval = null;
      isRunning = false;
      startBtn.textContent = '开始';
      
      // 显示通知
      timerDisplay.classList.add('timer-finished');
      notification.classList.remove('hidden');
     }

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

界面设计简洁现代，包括计时器的常见功能界面

开发环境设置

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

调试技巧

• 使用Chrome DevTools进行渲染进程调试：Ctrl+Shift+I
• 主进程调试：在启动时添加--inspect参数
• 图片加载问题：检查图片路径和格式是否正确

鸿蒙PC适配改造指南

1. 环境准备

• 系统要求：Windows 10/11、8GB RAM以上、20GB可用空间

• 工具安装：
  DevEco Studio 5.0+（安装鸿蒙SDK API 20+）

• Node.js 18.x+

2. 获取Electron鸿蒙编译产物

1. 登录Electron 鸿蒙官方仓库

2. 下载Electron 34+版本的Release包（.zip格式）

3. 解压到项目目录，确认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. 配置与运行

1. 打开项目：在DevEco Studio中打开ohos_hap目录

2. 配置签名：
   进入File → Project Structure → Signing Configs

3. 自动生成调试签名或导入已有签名

4. 连接设备：
   启用鸿蒙设备开发者模式和USB调试

5. 通过USB Type-C连接电脑

6. 编译运行：点击Run按钮或按Shift+F10

5. 验证检查项

• ✅ 应用窗口正常显示

• ✅ 窗口大小可调整，响应式布局生效

• ✅ 控制台无"SysCap不匹配"或"找不到.so文件"错误

• ✅ 动画效果正常播放

跨平台兼容性

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

鸿蒙开发调试技巧

1. 日志查看

在DevEco Studio的Log面板中过滤"Electron"关键词，查看应用运行日志和错误信息。

2. 常见问题解决

• "SysCap不匹配"错误：检查module.json5中的reqSysCapabilities，只保留必要系统能力

• "找不到.so文件"错误：确认arm64-v8a目录下四个核心库文件完整

• 窗口不显示：在main.js中添加app.disableHardwareAcceleration()

• 动画卡顿：简化CSS动画效果，减少重绘频率

扩展功能建议

1. 多图片浏览：添加图片集合浏览功能
2. 幻灯片模式：支持自动播放图片
3. 图片编辑：添加基础的图片编辑功能（如旋转、裁剪）
4. 缩略图导航：显示多图片时的缩略图预览
5. 全屏模式：支持切换到全屏查看
6. 图片信息详情：显示更详细的图片元数据

总结

本项目展示了如何使用Electron创建一个功能完整的图片查看器应用。通过学习本示例，开发者可以掌握Electron应用中的进程间通信、文件系统交互、图片操作等核心概念，为开发更复杂的桌面应用奠定基础。同时，本项目也针对鸿蒙PC平台进行了适配，确保在该平台上有良好的使用体验。

许可证

本项目采用MIT许可证。