使用 Electron 框架构建一个桌面应用
随着技术的发展，目前开发一个桌面应用变得非常的简单，我们可以使用各种语言来开发桌面应用，今天我们就来介绍下使用JavaScript如何开发桌面应用。
什么是Electron
electron是一个开源的JavaScript框架代码，很多应用都使用它进行了开发，比较著名的案例有Discord,Slack,Notion,Vscode,Spotify等。
electron通过使用JavaScript，HTML,CSS等技术来开发桌面应用，它采用NodeJS作为后端环境，使用Chromium浏览器引擎作为运行容器。
electron开发了很多API来供我们调用，通过这些API，我们可以使用很多桌面的功能，让桌面应用开发异常方便。
Ecectron APP 架构
├── index.html
├── index.js
├── node_modules
├── package-lock.json
└── package.json
安装
安装electron非常的简单，只需要使用下面命令即可。
mkdir my-electron-app
cd my-electron-app
npm init
npm install --save-dev electron
在package.json文件中添加启动脚本。
{
"scripts": {
"start": "electron ."
}
}npm run start后端
对于每一个electron应用，都会有一个 index.js 或者 main.js 文件，这个文件会告诉我们应用运行的页面是什么，页面的配置是什么。
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
// 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()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
const { app, BrowserWindow } = require('electron');
关于electron的一些重要知识点:
- app; 控制应用的生命周期
- BrowserWindow; 创建新的浏览器窗口。
const createWindow = () => {
const win = new BrowserWindow({
width: 400,
height: 400,
});
win.loadFile("./index.html");
};
createWindow 函数做了两件事:
- 它定义了窗口的一些属性，比如高度，宽度。
- 加载一个文件
index.html
调用这个函数，就相当于在浏览器中打开了 index.html 文件。
createWindow 需要在 whenReady执行之后才调用。
whenReady 返回一个Promise 对象。
app.whenReady().then(() =>{
createWindow();
});
前端
index.html 文件里面的内容就是应用前端要显示的内容。
下面是它的内容。
<!--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'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>
经过上面的配置，我们就实现了用自定义的浏览器窗口打开了一个自定义的页面。
运行 Electron App 运行
之前我们在scripts中配置了启动脚本，因此我们直接运行脚本即可。
npm run start结果
如果没有意外的话，我们的electron 的第一个应用就运行成功了。
