一、背景
最近有个获得用户mac地址的需求，IE内核浏览器可以利用ActiveX实现，但不能满足需求。想到使用electron项目客户端开发实现，electron基于node的，node是可以获得网卡的物理地址的。本文我们先初始化项目。
二、electron简介
Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的，io.js 的一个变体。
这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。说白了就是一个沙盒包了一个浏览器，从而实现桌面应用。
主进程：在 Electron 里，运行 package.json 里 main 脚本的进程被称为主进程。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI。
渲染进程：由于 Electron 使用 Chromium 来展示页面，所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程，这样的进程我们称之为渲染进程。
在一般浏览器中，网页通常会在沙盒环境下运行，并且不允许访问原生资源。然而，Electron 用户拥有在网页中调用 io.js 的 APIs 的能力，可以与底层操作系统直接交互。
主进程与渲染进程的区别：
主进程使用 BrowserWindow 实例创建窗口。每个 BrowserWindow 实例都在自己的渲染进程里运行着一个网页。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。
主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的，并且只关心他们自己的网页。
由于在网页里管理原生 GUI 资源是非常危险而且容易造成资源泄露，所以在网页面调用 GUI 相关的 APIs 是不被允许的。如果你想在网页里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。
在 Electron，我们提供用于在主进程与渲染进程之间通讯的 ipc 模块。并且也有一个远程进程调用风格的通讯模块 remote。
三、官方文档
四、开发工具Electron Fiddle
五、init项目
5.1、创建目录文件夹
mkdir electron-base
5.2、
pnpm init
5.3、
pnpm add electron -D
5.4、index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1 id="h1">Hello World!</h1> We are using node <script> document.write(process.versions.node) </script> Chrome <script> document.write(process.versions.chrome) </script>, and Electron <script> document.write(process.versions.electron) </script> </body> </html>
5.5、index.js
const {app, BrowserWindow} = require('electron') // 创建全局变量并在下面引用，避免被GC let win function createWindow () { // 创建浏览器窗口并设置宽高 win = new BrowserWindow({ width: 800, height: 600 }) // 加载页面 win.loadFile('./index.html') // 打开开发者工具 win.webContents.openDevTools() // 添加window关闭触发事件 win.on('closed', () => { win = null // 取消引用 }) } // 初始化后 调用函数 app.on('ready', createWindow) // 当全部窗口关闭时退出。 app.on('window-all-closed', () => { // 在 macOS 上，除非用户用 Cmd + Q 确定地退出， // 否则绝大部分应用及其菜单栏会保持激活。 if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // 在macOS上，当单击dock图标并且没有其他窗口打开时， // 通常在应用程序中重新创建一个窗口。 if (win === null) { createWindow() } })
5.6、package.json，增加start
"start": "electron .",
{ "name": "electron-base", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "electron .", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "electron": "^21.3.1" } }
5.7、
pnpm run start
初始化项目启动成功
5.8、目录结构
六、调试
Electron 有两个进程，主进程和渲染进程，开发过程中我们这样调试它们：
6.1、渲染进程
BrowserWindow 用来创建和控制浏览器窗口，我们调用它的实例上的API即可
win = new BrowserWindow({width: 800, height: 600}) win.webContents.openDevTools() // 打开调试
6.2、主进程
可以使用vscode进行调试，未测试
七、打包发布程序
发布新应用的最快方式是使用Electron Forge
(1)添加Electron Forge作为你应用的开发依赖，并使用它的import命令来设置Forge的脚手架：
npm install --save-dev @electron-forge/cli
npx electron-forge import
(2)使用 Forge 的package命令打包发布成exe文件：
npm run package
双击打包后的exe文件即可执行项目。
八、项目配置
九、过程记录
9.1、electron/electron-quick-start
https://github.com/electron/electron-quick-start.git
十、欢迎交流指正，关注我，一起学习。
