诸君，好久不见，甚是想念！
看完本文你可学会📢
- 对于electron有一些基本认识
- 能够了解到electron的各个模块的基本作用
- 了解进程通信，如何进行互相通信
- 逐渐学会整活（
这个才是目的）
介绍
这个最近真的看见的越来越多了，所以自己也在最近去学习了解了它，也在做一个小demo项目去熟练它，下面就跟我一起，简单了解一下它吧。
官网：Electron
写一个自己的桌面应用真的好shuai
创建项目🪁
我采用的是vue create命令来建立的，有vue基础的朋友们应该都很熟悉了，我简单再说一下配置，采用的是vue3，勾选router，路由模式是hash，不用勾选vuex，就这样简简单单就好。
完后我们要引入electron，执行npm install electron@18.0.3，完后等待进度条，这样我们就引入成功啦。
接下来为了打包，我们在引入一个插件：electron-builder，使用vue add electron-builder就可以了。
为了后续可能更一个electron实战系列，先做个建文件夹的操作吧~
可能是画饼
另外一种方便我们写demo或者入门瞎搞的，可以直接在文件夹中npm init -y之后引入electron依赖（依旧是npm install electron@18.0.3）即可
我在最近刚刚学习的时候也是这么来的
在做下文例子的时候，或者是在实验的时候就可以这么操作哦~
至此，我们的项目如何建立算是介绍完成了。
一些基本知识🎟️
app模块
const {app} from 'electron'来说一下它的生命周期吧：
- ready 应用程序初始化完成
- browser-window-created 窗口创建完成触发
- before-quit 窗口关闭之前
- will-quit 窗口关闭了 但是程序还没有关闭， 即将关闭
- quit 应用程序关闭触发
还有一些，例如
- ready to show
- whenReady
我们都可以在对应的生命周期进行一些操作
### BrowserWindow模块
看到这个名字我首先的反应就是它肯定跟我们看到的窗口有关，不知道大家是不是？
没错他就是跟我们的窗口有关，下面简单介绍一下它的配置：
const mainWin = new BrowserWindow({
width:800,
height:600,
resizable:true, // 规定窗口是否可以改变尺寸 默认是true
// maxWidth:1000, //最大宽度
// maxHeight:800, //最大高度
// minWidth:600, //最小宽度
// minHeight:400, // 最小高度
show:false, // 设置窗口是否显示 默认true
webPreferences:{
nodeIntegration:true, // 是否支持开启node，默认false
contextIsolation:false // 是否开启上下文隔离 默认是true
}
### Tray模块
我们右下角（如果你没调整菜单栏的话），在启动应用的时候会有小图标，这个我们也是可以做到的~
const {Tray,Menu} from 'electron'
const tray = new Tray('icon-desk.png')
tray.setToolTip('我的应用')
const menu = Menu.buildFromTemplate([
{
label:'设置',
click:() => {
console.log('我点击设置')
}
},
{
label:'退出',
click:() => {
app.quit()
}
}
])
tray.setContextMenu(menu)- setToolTip 是鼠标悬浮上去显示的一个小窗提示
menu就是我们右键弹出来的一个菜单列表了，我们可以对其内容进行配置，也可以在click中处理点击之后的逻辑。
### 一些方法
再来介绍一些经常使用的方法：
在使用方法前记得先new个对象
const mainWin = new BrowserWindow(.....loadFile方法 它是用于加载本地文件，可以使用相对路径 也可以使用绝对路径
mainWin.loadFile('./index.html') //html文件里随便放点东西,,,,还可以试试别的文件哦loadUrl方法 它是用于加载链接（远程文件）
mainWin.loadUrl('https://juejin.cn/')- show方法 它是用于控制展示我们的窗口
有心的小伙伴可以看到上文中配置我们在show中写的是false，没错，我是在下文用show方法进行展示的，不是在最开始直接加载出来~
mainWin.show()### 进程通信
这个东西有点意思的，真的，这里要介绍两个新的模块，ipcRenderer与ipcMain
前者是用在子进程中的，后者是用在主进程中的。
一个最简单的demo，就是在一个html页面中，点击按钮，子进程传值到主进程（父进程）中打印出来，或者加上，主进程再回复过去，在子进程中打印出来。
我们写一个点击事件，定义事件为renderer-send 传递过去
document.querySelector('.btn').addEventListener('click',function(){
ipcRenderer.send('renderer-send','渲染进程传递过来的')
})主进程接收，打印数据，定义事件为main-send，并返回接收信息
ipcMain.on('renderer-send',(event,data) => {
console.log(data)
event.reply('main-send','我接受到了，现在给你')
})子进程接收，打印出来
ipcRenderer.on('main-send',(event,data) => {
console.log(data)
})## 最后🎉
最近在整活了，可能后续真的会出一个electron的实战系列吧，也是对自己学习实践过程的一个总结，那还请敬请期待
我是 Ned 一个被疫情耽误了好几年的、即将大四了的大学生。
关注我，一起努力学习吧！
你可以在公众号：前端成长日记 里找到我~
