Electron是什么？
Electron是用来搭建跨平台桌面(PC)端应用程序的框架。
例如：VScode、有道云。。。很多都是基于Electron开发的。
Electron解决了什么？
1、一套代码可以运行多个平台。
Electron 兼容 Mac、Windows 和 Linux，一套代码可以构建出三个平台的应用程序。
2、开发简单便捷，前端人员就可以独立开发。
Electron 基于 Chromium 和 Node.js, 可以使用 HTML、CSS、JavaScript 便捷开发并构建应用。
3、系统底层C++插件可以编译成nodejs供Electron直接使用，非常方便。
Electron会用到哪些技术栈？
1、Electron：提供桌面端应用能力。
2、Nodejs：用于本地文件系统和操作系统，提供server能力。
3、html、css、javascript：可以使用React、Vue.....编译后的文件。
4、打包工具：webpack、vite......
都是前端技术栈，唯一可以不同的是需要学习Electron。
废话不多说，直接上代码
本地环境
搭建Node环境即可
node -v
npm -v
注意：Electron与Nodejs的各自版本必须要对应，具体两者对应版本见版本发布。
image.png
我们用Electron官方提供的最新稳定版本进行演示。
Electron 19.0.8
Node 16.14.2
Hello World
克隆运行代码
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start
image.png
main.js
main.js是应用的入口文件。里面包含了应用启动完成、窗口创建等。
入口文件的配置在package.json中。
const {app, BrowserWindow} = require('electron')
const path = require('path')
function createWindow () {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
mainWindow.loadFile('index.html')
// mainWindow.webContents.openDevTools()
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
index.html
页面的入口文件，按照前端的正常开发就可以。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
<link href="./styles.css" rel="stylesheet">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>窗口创建成功</p>
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>
BrowserWindow
桌面端开发主要呈现的是独立窗口，用于加载页面。而BrowserWindow就是用来窗口的API。
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
mainWindow.loadFile('index.html')
可以自定义设置窗口的宽度，实现窗口尺寸的调整（位置也可以调整，想见setBounds、setPosition）。
loadFile用于加载本地文件，也可以直接加载网络地址，如：
mainWindow.loadURL('https://github.com');
如果想像浏览器那样可以查看、调试运行的代码，就打开DevTools。
mainWindow.webContents.openDevTools()
也可以直接在preload加载的文件中调用原生的能力（node.js与electron等）。
// preload.js
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
// 通过getElementById赋值process信息
replaceText(`${type}-version`, process.versions[type])
}
})
网友评论