Electron简单例子

2023-11-24 11:21:34

Electron 可以使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。我们可以把它看作一个 Node. js 的变体，它专注于桌面应用而不是 Web 服务器端。

从开发的角度来看，Electron 应用本质上是一个 Node. js 应用程序。与 Node.js 模块相同，应用的入口是 package.json 文件。一个简单的 Electron 项目包含三个基本文件：package.json，index.hmtl，main.js 。

package.json 是 Node.js项目的配置文件。
index.html 是桌面应用的界面页面。
main.js 是应用的启动入口文件。

创建项目

我们在指定路径中新建一个名为 my_electron 的文件夹作为项目根目录，然后在命令工具中使用 cd 命令，将当前目录更改为项目根目录：

>cd C:\Users\lu\Desktop\my_electron

如下图所示：

然后执行 npm init 命令进行项目初始化，如下图所示：

命令执行成功后，项目根目录下会创建一个 package.json 文件，如果全部选择默认配置，则可以直接执行 npm init -y 命令。

修改package.json

我们可以修改创建好的 package.json 文件，在 scripts 中添加脚本命令，如下所示：

{
  "name": "blogs",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ./src/main.js"
  },
  "keywords": [],
  "author": "Silenzio",
  "license": "ISC",
  "devDependencies": {
    "electron": "^10.1.2"
  }
}

我们在这个文件中指定了一个启动脚本，之后可以通过这个脚本来启动程序，它将用 electron 来启动 src 目录下的 main.js 文件。

还可以看到在这个文件中的 "devDependencies" 中有一项 "electron": "^10.1.2"，表示将 electron 安装成功并添加到依赖中。

创建main.js文件

我们在项目的根目录下创建一个 src 文件夹，并在这个文件夹中创建一个 main.js 文件，这个文件就是应用的启动入口文件。

Electron 应用使用 JavaScript 开发，其工作原理和方法与 Node.js 开发相同。electron 模块包含了 Electron 提供的所有 API 和功能，引入方法和 Node.js 模块一样，都可以通过 require() 来引入，例如：

const electron = require('electron')

electron 模块所提供的功能都是通过命名空间暴露出来的。例如 electron.app 负责管理 Electron 应用程序的生命周期，electron.BrowserWindow 类负责创建窗口等。

示例：

例如我们要在 main.js 文件中创建窗口，内容如下所示：

// 引入electron
const {app, BrowserWindow} = require('electron');
let win;

function createWindow() {
  // 创建浏览器窗口
  win = new BrowserWindow({
    width: 800,
    height: 400,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  // 加载index.html文件
  win.loadFile('../html/index.html');

  // 自动打开开发者工具
  win.webContents.openDevTools();

  // 当 window 被关闭，这个事件会被触发
  win.on('closed', () => {
    win = null;
  });
}

// Electron 会在初始化后并准备，创建浏览器窗口时，调用这个函数
app.on('ready', createWindow);
// 当全部窗口关闭时退出
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

添加index.html文件

在上面的 main.js 文件中我们指定了一个 index.html 文件，这个 html 文件，就是程序的主页面。

所以我们还需要在项目的根目录下创建一个 html 文件夹，在这个文件夹中创建一个 index.html 文件，内容如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>my_electron</title>
  </head>
  <body>
    <h1>你好，侠课岛!</h1>
  </body>
</html>

启动项目

在完成了项目的创建、初始化项目、安装 electron 、创建必要文件这几个步骤之后，现在我们就可以开始启动项目啦。因为我们已经在 package.json 文件中设置了脚本命令，所以只需要直接在项目根目录下直接如下指令即可：

npm start

命令执行完成之后，程序后被启动，如下图所示：

此时桌面上启动了一个独立的程序，这个程序中界面的左边显示的是渲染后的 index.html ，界面的右边部分则是 Chrome/Chromium 浏览器的开发者选项。因为我们在 main.js 文件中设置了 win.webContents.openDevTools(); ，所以在启动程序时会自动打开开发者工具。如果需要开发者工具，只需要将这句代码注释，然后再次启动程序即可。

码农公寓

创建项目

修改package.json

创建main.js文件

示例：

添加index.html文件

启动项目

相关文章