Electron 与 OpenHarmony 的实战入门：手把手打造一个安全的简易记事本应用

@VON

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

2460

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

手把手打造一个安全的简易记事本应用

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

在学习 Electron 的过程中，很多人止步于 “Hello World” —— 能弹出窗口，却不知道如何实现真实功能。今天，我们就跳过玩具示例，从零构建一个具备实际价值的“简易文本记事本”，并严格遵循 Electron 官方推荐的安全开发规范。

这个应用虽小，却包含了：

主进程与渲染进程通信（IPC）
文件保存对话框调用
上下文隔离（Context Isolation）
安全桥接层（Preload Script）
可迁移至 OpenHarmony 的架构设计

无论你是 Electron 新手，还是计划将 Web 应用拓展到桌面端，这篇教程都将为你打下坚实基础。

一、为什么要做“记事本”？—— 小而完整的典型场景

记事本看似简单，实则涵盖桌面应用的核心能力：

用户输入（文本编辑）
系统交互（文件保存）
权限控制（不直接暴露 Node.js）

更重要的是，它避开了复杂状态管理，让我们能聚焦于 Electron 架构本身。

二、项目结构预览

note-app/
├── main.js          # 主进程：创建窗口 + 处理文件保存
├── preload.js       # 预加载脚本：安全桥接层
├── index.html       # 渲染界面：纯 HTML/CSS/JS
└── package.json     # 依赖与启动配置

📌 全程不使用任何构建工具（如 Webpack），开箱即用。

三、完整代码实现

1. 初始化项目

mkdir note-app && cd note-app
npm init -y
npm install electron --save-dev

2. `package.json` —— 启动配置

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

💡 建议指定 Electron 版本（当前稳定版为 v33+），避免使用不存在的版本（如 v39）导致安装失败。

3. `main.js` —— 主进程：掌控全局

const { app, BrowserWindow, ipcMain, dialog } = require('electron');
const fs = require('fs').promises;

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: __dirname + '/preload.js', // 关键：注入预加载脚本
      contextIsolation: true,             // 启用上下文隔离
      nodeIntegration: false              // 禁用 Node 集成（安全！）
    }
  });
  win.loadFile('index.html');
}

// 监听“保存文件”请求
ipcMain.handle('save-file', async (event, content) => {
  const result = await dialog.showSaveDialog({
    title: '保存文本文件',
    defaultPath: 'note.txt',
    filters: [{ name: 'Text Files', extensions: ['txt'] }]
  });

  if (!result.canceled && result.filePath) {
    await fs.writeFile(result.filePath, content, 'utf8');
    return result.filePath; // 返回保存路径给前端
  }
  return null;
});

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

🔒 安全要点：所有敏感操作（如 fs.writeFile）仅在主进程执行，渲染进程无法直接调用。

4. `preload.js` —— 安全桥接层（核心！）

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

contextBridge.exposeInMainWorld('noteAPI', {
  saveFile: (content) => ipcRenderer.invoke('save-file', content)
});

✅ 这是现代 Electron 应用的标准做法：

渲染进程通过 window.noteAPI.saveFile() 调用能力；
实际逻辑由主进程处理；
页面 JavaScript 无法篡改或绕过此接口。

5. `index.html` —— 用户界面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>简易记事本</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    #editor {
      width: 100%;
      height: calc(100vh - 60px);
      padding: 16px;
      font-size: 16px;
      line-height: 1.5;
      resize: none;
      outline: none;
      border: none;
    }
    .toolbar {
      padding: 12px;
      background: #f5f5f5;
      border-bottom: 1px solid #ddd;
    }
    button {
      padding: 8px 16px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background: white;
      cursor: pointer;
    }
    button:hover { background: #e9e9e9; }
  </style>
</head>
<body>
  <div class="toolbar">
    <button onclick="saveNote()">保存</button>
  </div>
  <textarea id="editor" placeholder="在此输入您的笔记..."></textarea>

  <script>
    async function saveNote() {
      const content = document.getElementById('editor').value;
      try {
        const filePath = await window.noteAPI.saveFile(content);
        if (filePath) {
          alert(`✅ 已保存到:\n${filePath}`);
        }
      } catch (err) {
        alert('❌ 保存失败：' + err.message);
      }
    }
  </script>
</body>
</html>

💡 注意：

使用 window.noteAPI 调用预加载暴露的 API；
所有逻辑均为标准 Web 技术，未来可无缝迁移到 OpenHarmony 的 Web 组件中。

四、运行与测试

npm start

在文本框中输入内容，例如：

今天学习了 Electron 安全架构！

点击【保存】按钮；

选择保存位置（如桌面）；

查看是否生成 note.txt 文件。

✅ 成功！你已掌握 Electron 核心通信模式。

五、常见问题排查

❌ 问题：点击“保存”无反应

原因：window.noteAPI 未定义解决：

检查 preload.js 路径是否正确；
确保 webPreferences.preload 指向绝对路径；
在 DevTools 控制台输入 window.noteAPI 验证。

❌ 问题：保存后文件为空

原因：未获取到 textarea 的最新值解决：确保在函数内读取 document.getElementById('editor').value。

六、真机测试

直接迁移即可

可以看到真机测试成功

七、结语：从小应用开始，构建大生态

这个“简易记事本”虽只有几十行代码，却完整体现了 现代桌面应用的安全架构思想。它不仅是 Electron 的最佳入门实践，更是通往 OpenHarmony 全场景开发的桥梁。

下一步，你可以：

添加“打开文件”功能；
支持 .md 格式并集成 Markdown 预览；
封装为独立 EXE/Mac App；
尝试迁移到鸿蒙 DevEco Studio。

代码不在多，而在精；架构不在繁，而在安。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-11-27，如有侵权请联系 cloudcommunity@tencent.com 删除

openharmony

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度