Electron for鸿蒙PC实战案例之本地时钟应用

这是一个基于 Electron 框架开发的本地时钟桌面应用，提供实时的时间显示、日期显示和星期显示功能，具有现代化的用户界面和流畅的动画效果。通过鸿蒙适配改造后，可同时运行于 Windows、macOS、Linux 和鸿蒙PC系统。本项目通过Electron框架实现了跨平台时钟应用，并成功适配鸿蒙PC系统。改造过程中保持了原有应用的全部功能，同时通过鸿蒙特有的适配层实现了在鸿蒙PC上的稳定运行。

言程序plus

410人浏览 · 2025-11-28 16:47:44

言程序plus · 2025-11-28 16:47:44 发布

本文详细解读基于 Electron 开发的本地时钟应用的技术实现、架构设计和核心功能，包含鸿蒙PC系统适配改造方案，实现一套代码跨多端运行。
在这里插入图片描述

项目概述

这是一个基于 Electron 框架开发的本地时钟桌面应用，提供实时的时间显示、日期显示和星期显示功能，具有现代化的用户界面和流畅的动画效果。通过鸿蒙适配改造后，可同时运行于 Windows、macOS、Linux 和鸿蒙PC系统。

主要功能特点

实时时间显示：精确到秒级的时间更新
完整日期展示：显示年、月、日信息
星期信息：以中文形式展示星期几
响应式设计：适配不同窗口尺寸和设备类型
平滑动画：页面加载动画和数字变化效果
深色主题：现代化的深色 UI 设计
跨平台运行：支持 Windows/macOS/Linux/鸿蒙PC

技术架构

技术栈

核心框架：Electron 34.0.0+
前端技术：HTML5/CSS3/JavaScript
运行环境：Node.js 18.x+
鸿蒙开发工具：DevEco Studio 5.0+、鸿蒙SDK（API 20+）
构建工具：npm/yarn

项目结构

基础 Electron 结构：


04-digital-clock/
├── main.js            # Electron 主进程文件
├── package.json       # 项目配置和依赖管理
├── README.md          # 项目说明文档
└── src/               # 渲染进程源代码
    ├── index.html     # 主页面结构
    ├── preload.js     # 预加载脚本
    ├── renderer.js    # 渲染进程业务逻辑
    └── style.css      # 页面样式

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


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

核心代码解析

1. 主进程实现（main.js）- 支持鸿蒙适配


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

// 鸿蒙平台兼容性处理
function handleHarmonyCompatibility() {
  if (process.platform === 'ohos') {
    // 禁用硬件加速解决鸿蒙渲染问题
    app.disableHardwareAcceleration();
    console.log('Running on HarmonyOS, hardware acceleration disabled');
  }
}

function createWindow() {
  handleHarmonyCompatibility();
  
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 600,
    height: 400,
    title: '本地时钟',
    resizable: true,
    autoHideMenuBar: true,
    webPreferences: {
      preload: path.join(__dirname, 'src', 'preload.js'),
      nodeIntegration: true,  // 鸿蒙环境需要开启
      contextIsolation: false // 鸿蒙环境需要关闭
    }
  })
  
  // 加载应用的 index.html
  mainWindow.loadFile(path.join(__dirname, 'src', 'index.html'));
  
  // 开发环境下打开调试工具
  if (process.env.NODE_ENV === 'development') {
    mainWindow.webContents.openDevTools();
  }
}

// Electron 应用准备就绪时创建窗口
app.whenReady().then(() => {
  createWindow()
  
  // 在 macOS 和鸿蒙上，点击 dock 图标重新创建窗口
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 关闭所有窗口时退出应用
app.on('window-all-closed', () => {
  // 鸿蒙系统process.platform返回'ohos'
  if (process.platform !== 'darwin' && process.platform !== 'ohos') {
    app.quit()
  }
})

2. 预加载脚本（preload.js）- 鸿蒙扩展


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

// 通过contextBridge向渲染进程暴露受保护的方法
contextBridge.exposeInMainWorld('electronAPI', {
  // 平台信息检测
  platform: {
    type: process.platform,
    osType: os.type(),
    isHarmonyOS: process.platform === 'ohos'
  },
  
  // 时钟应用扩展API（预留）
  setAlarm: (time, message) => ipcRenderer.invoke('set-alarm', time, message)
});

3. 鸿蒙应用配置（module.json5）


{
  "module": {
    "name": "clockentry",
    "type": "entry",
    "description": "$string:module_desc",
    "versionCode": 1,
    "versionName": "1.0.0",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "tablet",
      "2in1"
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "reqSysCapabilities": [
      "SystemCapability.WebEngine.Core"
    ]
  }
}

4. 包配置文件（package.json）- 鸿蒙扩展


{
  "name": "electron-clock-harmonyos",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build:harmony": "node build-harmony.js"
  },
  "dependencies": {
    "electron": "^34.0.0"
  },
  "harmony": {
    "bundleName": "com.example.electronclock",
    "vendor": "example",
    "versionCode": 1,
    "versionName": "1.0.0"
  }
}

鸿蒙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. 部署应用代码

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


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鸿蒙适配层	禁用硬件加速，使用特定目录结构