使用 Electron 框架构建一个桌面应用

作者: dreamfly 分类: javascript,个人博客 发布时间: 2023-02-20 16:03

随着技术的发展,目前开发一个桌面应用变得非常的简单,我们可以使用各种语言来开发桌面应用,今天我们就来介绍下使用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 函数做了两件事:

  1. 它定义了窗口的一些属性,比如高度,宽度。
  2. 加载一个文件 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 的第一个应用就运行成功了。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!