Electron 技术分享
介绍
简介：Electron是一个开源的跨平台桌面应用程序开发框架，基于Node.js和Chromium，用于构建使用Web技术（HTML、CSS和JavaScript）开发的桌面应用程序。
由来：王文睿node-webkit(NW.js)、赵成Atom-Shell => Electron
相关应用：vscode、飞书、postman、skype
框架简介
e1defd947002c897faae0038f89757b0.png
82afcc447475ab8dc776c89c59434ec4.png
开发环境搭建
npm install -g yarn
yarn init
yarn add electron --dev
-----------------------------------
package.json:
{
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
-----------------------------------
mian.js：
const { app, BrowserWindow } = require('electron')
const path = require('path')
const createWindow = () => {
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
//preload: path.join(__dirname, 'preload.js'),
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<title>你好!</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
-----------------------------------
yarn start
前端框架+electron举例：
angular-electron
electron-react-boilerplate
vue-cli创建项目后 vue add electron-builder
进程通信
preload.js:
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electron', {
openDevtools: () => {
//渲染进程向主进程 发消息1(同步)
ipcRenderer.send('open-devtools')
//渲染进程向主进程 发消息2(同步)
const response = ipcRenderer.sendSync('sycnMsg', '这是一个同步消息')
console.log('response',response) //response是同步返回的参数
//渲染进程向主进程 发消息3(异步)
const response = ipcRenderer.invoke('asycMsg', '这是一个异步消息')
console.log('response',response) //response是一个promise
},
registerOpenDevtoolsReply:(callback) => {
ipcRenderer.on('shit',callback)
}
});
---------------------------------
main.js:
ipcMain.on('open-devtools', (event) => {
const webContents = event.sender
webContents.openDevTools()
//主进程向渲染进程 发消息1
event.reply('shit','主人,控制台已经帮你打开了。')
//主进程向渲染进程 发消息2
webContents.send('shit','主人,您满意了吗？')
})
ipcMain.on('sycnMsg', (event) => {
event.returnValue = '好的，我收到你发送过来的同步消息了，这是我的回复！'
})
ipcMain.handle('asycMsg',(_event,arg)=>{
console.log('arg',arg)
return '好的，我收到你发送过来的异步消息了，这是我的回复的promise！'
})
---------------------------------
index.html:引入脚本文件 <script src="./index.js"></script>
---------------------------------
index.js:
document.getElementById("btn").addEventListener("click", function () {
window.electron.openDevtools()
});
window.electron.registerOpenDevtoolsReply(function (arg) {
console.log('你帮我打开了吗？：', arg)
})
主要组件和API
-
app模块：用于控制应用程序的生命周期和事件处理。 -
BrowserWindow类：用于创建和管理应用程序的窗口。 -
ipcMain和ipcRenderer模块：用于进程间通信（IPC）。 -
Menu和MenuItem类：用于创建自定义菜单和上下文菜单。 -
dialog模块：用于显示对话框和原生系统提示框。 - 其他常用模块和API，例如文件系统、网络请求等。
const menu = Menu.buildFromTemplate([
{
label: app.name,
submenu: [
{
click: () => console.log('Increment'),
label: 'Increment'
},
{
click: () => console.log('Decrement'),
label: 'Decrement'
}
]
}
])
Menu.setApplicationMenu(menu)
应用打包
示例应用程序
参考资料
04dc66c7c367383c1e2030868eee132a.png
https://zhuanlan.zhihu.com/p/34544004
https://segmentfault.com/a/1190000021843332
https://simulatedgreg.gitbooks.io/electron-vue/content/cn/project_structure.html
https://zhuanlan.zhihu.com/p/75764907
https://nklayman.github.io/vue-cli-plugin-electron-builder/
https://e.m.jd.com/static/read/dist/index.html?ebookId=30612988&name=Electron%E5%AE%9E%E6%88%98%EF%BC%9A%E5%85%A5%E9%97%A8%E3%80%81%E8%BF%9B%E9%98%B6%E4%B8%8E%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96&pageChange=1
https://juejin.cn/post/6888686758495453191
https://juejin.cn/post/6976476731662139428
https://zhuanlan.zhihu.com/p/34276309
https://github.com/hiro0218/miikun
https://www.electronjs.org/zh/docs/latest/tutorial/quick-start
