Electron 与 OpenHarmony 的实战入门：实时时间显示器

@VON

发布于 2025-12-21 12:34:15

640

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

Electron 与 OpenHarmony 的实战入门：实时时间显示器

作者：VON HarmonyOS 初级开发者｜CSDN 新星创作者（Java/Web 领域）专栏链接：Electron for OpenHarmony

在跨端开发的浪潮中，“一次编写，多端运行” 不再是口号，而是可落地的实践。本文将带你从零构建一个极简但极具代表性的应用 —— 实时时间显示器，它虽无复杂逻辑，却完美体现了 Web 技术在 Electron 与 OpenHarmony 之间的无缝迁移能力。

这个项目无需文件操作、无需系统权限、不依赖 Node.js，仅用标准 HTML/CSS/JavaScript 实现，是验证“纯 Web 应用”跨平台兼容性的理想起点。

一、为什么选择“实时时间显示器”？

✅ 零依赖：不使用任何 npm 包或 Node.js 模块
✅ 纯前端逻辑：完全基于浏览器 API（Date, setInterval）
✅ 轻量高效：代码不足 30 行，5 分钟即可完成
✅ 天然兼容 OpenHarmony：可直接嵌入鸿蒙 Web 组件
✅ 教学价值高：展示“无主进程干预”的典型场景

💡 这类应用特别适合迁移到 OpenHarmony 的 PC 或智慧屏设备，作为系统状态栏插件、桌面小组件或信息看板。

二、项目结构

time-display/
├── main.js
├── index.html
└── package.json

⚠️ 注意：本项目不需要 preload.js，因为不涉及主进程通信。

三、完整代码实现

1. 初始化项目

mkdir time-display && cd time-display
npm init -y
npm install electron --save-dev

2. `package.json`

{
  "name": "time-display",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^33.0.0"
  }
}

3. `main.js` —— 最简主进程

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

function createWindow() {
  const win = new BrowserWindow({
    width: 400,
    height: 200,
    resizable: false,
    alwaysOnTop: true,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true
    }
  });
  win.loadFile('index.html');
}

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

🔒 虽然不调用 Node，但仍建议保持安全配置（nodeIntegration: false）。

4. `index.html` —— 核心逻辑（纯 Web）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>实时时间</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background: #0f0f0f;
      color: #00ff88;
      font-family: 'Courier New', monospace;
      font-size: 28px;
      user-select: none;
    }
  </style>
</head>
<body>
  <div id="clock">--:--:--</div>

  <script>
    function updateTime() {
      const now = new Date();
      const timeString = now.toLocaleTimeString('zh-CN', {
        hour12: false,
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      });
      document.getElementById('clock').textContent = timeString;
    }

    // 立即更新 + 每秒刷新
    updateTime();
    setInterval(updateTime, 1000);
  </script>
</body>
</html>