Electron02-Hello

Electron02-Hello

练习使用Electron，在此记录学习过程

---

1-参考网址

• electron中文官网：https://www.electronjs.org/zh/docs/latest
• 禹神Electron视频教程地址：https://www.bilibili.com/video/BV1sE421N7M5
• 禹神Electron博文教程地址：:https://blog.csdn.net/qq_33650655/article/details/140364298

---

2-快速入门

1-快速动手验证

上手可以参考禹神Electron博文教程地址：:https://blog.csdn.net/qq_33650655/article/details/140364298

# 1-init之后就一路回车即可
npm init

# 2-按照package.json中的配置添加【index.js或者main.js】

# 3-可以在【index.js或者main.js】加一个打印
console.log("hello electron")

# 4-添加start脚本
{
  "scripts": {
    "start": "electron ."
   }
}

# 5-直接运行项目
ump run start

---

3-知识整理

1-核心知识点速览

1. Electron 是什么

   • 跨平台桌面应用框架（Windows / macOS / Linux）
   • 技术本质 = Chromium + Node.js + Native API
   • 用 Web 技术（HTML/CSS/JS 及任意前端框架）写桌面软件

2. 双进程模型

   • 主进程（main process）
     ‑ 唯一、Node 环境、无 window / alert、可访问 FS / native API
   • 渲染进程（renderer process）
     ‑ 每窗口一个、浏览器环境、可用 DOM / alert、无 FS / require

3. 进程间通信（IPC）

   • 单向：渲染 → 主
     ‑ 渲染：ipcRenderer.send(channel, data)
     ‑ 主：ipcMain.on(channel, handler)
   • 双向：渲染 ↔ 主
     ‑ 渲染：ipcRenderer.invoke(channel, data) → Promise
     ‑ 主：ipcMain.handle(channel, handler) → return 值
   • 预加载脚本（preload.js）
     ‑ 运行在渲染进程，却能调用部分 Node API
     ‑ 通过 contextBridge.exposeInMainWorld 把安全 API 注入页面

4. 常用模块与 API

   • app：生命周期
   • BrowserWindow：创建窗口
   • webPreferences.preload：挂预加载脚本
   • dialog / notification / fs：原生能力

5. 打包与分发

   • electron-builder 最常用
   • 配置 package.json → build 字段
   • 产出 ≈ 70 MB 起（含 Chromium + Node）

---

4-实操案例设计

Tips：如果你有时执行electron下载失败，直接到以往的项目中把node_modules文件夹拷贝过来

1-基本窗口展示

• 1）从0构建一个electron项目，先run起来(可以没有窗口)
• 2）窗口展示-展示一个百度窗口
• 3）窗口展示-展示本地的一个idnex.html(带上css样式)

---

2-本地页面开发

• 1）前端获取后端信息（后端->前端）：前端或者后端的electron的版本号，展示在前端
• 2）后端获取前端信息（前端->后端）：前端保存文件到本地
• 3）前后端双向交互（前端<->后端）：把前端行输入写入后端，再读取出来展示

---

3-考试题目

1-题目「 Hello Folder 」

• 需求：点击按钮，在用户选择的目录里新建一个 hello-electron 文件夹，并在其中生成 readme.txt，内容为用户输入的任意文字。

• 技能点：主进程调用 dialog.showOpenDialog 选择目录；渲染 → 主单向通信；fs.mkdirSync + fs.writeFileSync。

---

参考步骤：

1. 渲染页放一个 和
2. preload.js 暴露 createFolder(text, folderPath)
3. 主进程 ipcMain.on('create-folder', async (e, text, folderPath)=>{...})

---

2-题目「 系统通知小闹钟 」

• 需求：输入倒计时秒数，点击"开始"后，主进程定时并在结束时弹出系统级通知（new Notification）。
• 技能点：主进程使用 Notification；双向通信（渲染 invoke，主进程 handle 并返回"已完成"）。

参考步骤：

1. 渲染页输入框 + 按钮
2. 渲染 invoke('start-timer', seconds)
3. 主进程 handle 里 setTimeout → new Notification({title:'时间到！'})

---

3-题目「 迷你记事本 」

• 需求：本地已有 notes.json（不存在则创建），渲染进程启动时读取并展示所有笔记；可新增、删除单条笔记；所有数据实时保存回磁盘。
• 技能点：双向通信；fs.readFileSync / writeFileSync；数组增删；页面局部刷新。

参考步骤：

1. 主进程 handle('get-notes') 读文件返回数组
2. handle('add-note', title) → 追加后写回
3. handle('del-note', index) → splice 后写回
4. 渲染 invoke 获取数据并渲染
   • ；增删按钮对应 invoke

---

4-题目「 窗口管理器 」

需求：

• 菜单栏增加「新窗口」按钮，每点一次开出同样应用的新窗口（不同实例）
• 新窗口加载本地 new.html，显示当前时间戳
• 所有窗口关闭后退出（Windows 行为）
  技能点：主进程管理多 BrowserWindow；窗口计数；app.on('window-all-closed')

参考步骤：

1. 全局数组保存窗口引用
2. 菜单项点击回调 createWindow()
3. new.html 用

---

5-题目「 图片批量重命名工具 」

需求：选择文件夹 → 列出所有 .jpg → 输入"前缀" → 点击"重命名"后批量改为 前缀_序号.jpg，并返回成功/失败数目。

技能点：dialog 选择文件夹；fs.readdir；fs.rename；异步结果汇总；双向通信。

参考步骤：

1. 渲染 invoke('select-folder') 打开 dialog，返回路径与文件列表
2. 渲染输入前缀后 invoke('batch-rename', {folder, prefix})
3. 主进程循环 rename，try-catch 收集结果 → return {success, fail}

---

4-npm包冲突的解决方案

# 核心逻辑：把node_modules不和package-lock.json;然后使用package.json中的依赖重新下载
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

---