前言： 参考尚硅谷视频记录：b站尚硅谷视频-1小时上手electron

一、什么是electron?

是一款应用广泛的、跨平台的、桌面应用开发框架。

• 应用广泛：很多桌面应用都是这个框架写的，例如腾讯qq、百度云
• 跨平台：跨window、mac、Linux这三大系统

二、electron的进程

main.js主进程使用Node api跟各个页面之间双向通信（ipc），同时使用native api实现操作的兼容

比如：主进程发出执行a，要想window、mac、linux都能听懂，就需要native api翻译一下

三、搭建工程

可参考：快速入门 | Electron

1、安装node

在Node官网下载安装即可，最好是最新的版本

2、初始化项目

package.json配置文件里会出现下图，注意：作者和描述是必填的

3、安装electron

npm install --save-dev electron
//或者
npm install electron -D

如果安装报错，可以试试用淘宝镜像来安

cnpm i electron

4、打印hello world

在package.json里添加运行指令

新建一个入口文件main.js，就可以测试下能否正常打印了

四、案例实战

可参考BrowserWindow | Electron

1、远程页面窗口

写一个可以展示远程页面的窗口

2、本地页面

新建个本地页面，然后在main.js里挂上去就好

const { app, BrowserWindow } = require('electron');const createWindow = () => {const win = new BrowserWindow({width: 800,//窗口宽度height: 600,//窗口高度autoHideMenuBar: true,//隐藏默认菜单栏})win.loadFile('./pages/index/index.html')
}app.on('ready', () => {createWindow()
})

备注：关于CSP的详细说明：MDN内容安全策略详解 、Electron安全策略规范

//可以解决安全策略警告问题，记得在html里加上
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

3、多系统兼容窗口生命周期

因为关闭窗口操作，对于不同系统有不同的规则。

• window和Linux，关闭所有窗口时会退出应用
• macOS 应用通常即使在没有打开任何窗口的情况下也继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口

所以需要配置以下代码

//window && linux
//若果是非macOs系统，页面全部关闭时就退出应用
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

//macOs
//这里的whenReady写法和前面的on ready一样
app.whenReady().then(() => {createWindow()//当应用启动，且没有页面时，则打开一个新页面app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})

4、热更新nodemon

每次保存后就自动热更新页面，配置如下：

//安装nodemon
cnpm i nodemon -D

//重写package.json里的start"scripts": {"start": "nodemon --exec electron ."},

添加一个nodemon文件

自此就可以利用nodemon，完成保存时刷新页面啦。

5、认识preload

什么是preload？还记得前面的electron进程图吗？preload（预加载文件）也就是主进程node和渲染进程（html+js+css页面）之间双向通信的那个ipc，是二者之间的桥梁

什么情况需要使用preload呢？

例如，render里需要访问process时，process是node主进程的参数，render渲染进程无法直接访问，就需要通过preload传递

主进程和预加载脚本通过webPreferences关联，而预加载进程通过设置类似全局参数把内容传给了渲染进程

注意：主进程和渲染进程是一对多的关系，主进程、预加载脚本、渲染进程依次加载

五、进程通信

1、渲染进程 => 主进程

借案例来理解，要求从渲染进程页面输入文字后，点击存入按钮，输入内容通过主进程存储到D盘

效果如下

添加代码如下

2、主进程 <=> 渲染进程

例如，渲染进程告知主进程要读取的指令，主进程将信息传递给渲染进程，实现了双向的沟通

效果如下：

参考上面的添加代码

render.js

const btn3 = document.getElementById("btn3")btn3.onclick = async() => {//获取主进程传过来的文件信息const res = await myAPI.readFile()alert(res)
}

main.js

//读取文件
function readFile() {const res = fs.readFileSync("D:/hello.txt").toString()return res
}//关键字关联preload读取操作
ipcMain.handle('file-read', readFile)

preload.js

readFile() {return ipcRenderer.invoke('file-read')}

3、主进程 => 渲染进程

类似于1

主进程，用win.webContens.send('信道','数据')发出数据

渲染进程，用ipcRender.on('信道','回调') 接收数据

//main.js
function createWindow(){win.webContents.sernd('message','你好吗？')
}//preload.js
contextBrige.exposeInMainWorld('myApi',{getMessage:(callback) => {return ipcRender.on('message',callback);}
})

六、打包

方法一

失败了，视频中使用electron-builder打包

1、安装electron-builder

cnpm install electron-builder -D

2、添加builder配置

3、运行命令打包

npm run build

然后就打包失败了，原因是因为github访问失败

方法二

参考electron官网：打包您的应用程序 | Electron

npm install --save-dev @electron-forge/cli

npx electron-forge import

npm run make

打包后的文件,在根项目下的out文件夹里

七、框架

electron已经集成了框架，比如electron-vite，开箱即用支持react和vue，很方便

可以多多看下，并运用