手把手带你快速入门 Electron

看完本文你可学会📢

• 对于 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 一个被疫情耽误了好几年的、即将大四了的大学生。

关注我，一起努力学习吧！

你可以在公众号：前端成长日记 里找到我~