我正在参加跨端技术专题征文活动,详情查看:juejin.cn/post/710123…
诸君,好久不见,甚是想念!
看完本文你可学会📢
- 对于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
一个被疫情耽误了好几年的、即将大四了的大学生。
关注我,一起努力学习吧!
你可以在公众号:前端成长日记
里找到我~