初识Electron

iceice0513
79 阅读4分钟

初识Electron

参考链接：www.electronjs.org/zh/docs/lat…

创建第一个Electron程序

1. Electron 应用基于 npm 搭建，以 package.json 文件作为入口点。 首先创建一个文件夹，然后在其中执行 npm init 初始化项目。

mkdir my-electron-app && cd my-electron-app

这条命令会帮您配置 package.json 中的一些字段。 为本教程的目的，有几条规则需要遵循：

  • 入口点 应当是 main.js (您很快就会创建它)
  • author (作者)、license (开源许可证) 和 description (描述) 可以为任意内容，不过在晚些的 打包应用程序 步骤中可能是需要的。

2.然后，将 Electron 安装为您项目的 devDependencies，即仅在开发环境需要的额外依赖。

npm install electron --save-dev

在初始化并且安装完 Electron 之后，您的 package.json 应该长下面这样。 文件夹中会出现一个 node_modules 文件夹，其中包含了 Electron 可执行文件；还有一个 package-lock.json 文件，指定了各个依赖的确切版本。

package.json

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT",
  "devDependencies": {
    "electron": "19.0.0"
  }
}

3.添加 .gitignore 文件​

.gitignore 指定了哪些文件不需要 Git 追踪版本。 建议您复制一份 GitHub 的 Node.js gitignore 模板 到您项目的根目录，以避免将 node_modules 文件夹提交到版本控制系统中。

运行 Electron 应用

npm run start

4.在根目录的 main.js 文件中写一行代码：

main.js

console.log(`欢迎来到 Electron 👋`)

因为 Electron 的主进程是一个 Node.js 运行时，您可以使用 electron 命令执行任意 Node.js 代码（甚至将其用作 REPL）。 要执行这个脚本，在 package.json 的 scripts 字段中添加一个 start 命令，执行内容为 electron . 。 这个命令会告诉 Electron 在当前目录下寻找主脚本，并以开发模式运行它。

package.json

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT",
  
  "scripts": {
    "start": "electron ."
  },
  
  "devDependencies": {
    "electron": "^19.0.0"
  }
}

5.将网页装载到 BrowserWindow

在 Electron 中，每个窗口展示一个页面，后者可以来自本地的 HTML，也可以来自远程 URL。 在本例中，您将会装载本地的文件。 在您项目的根目录中创建一个 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'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>Hello from Electron renderer!</title>
  </head>
  <body>
    <h1>Hello from Electron renderer!</h1>
    <p>👋</p>
  </body>
</html>

6.替换main.js

现在您有了一个网页，可以将它装载到 Electron 的 BrowserWindow 上了。 将 main.js 中的内容替换成下列代码。 我们马上会逐行解释。

main.js

const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})

7.关闭所有窗口时退出应用 (Windows & Linux)​

在 Windows 和 Linux 上，我们通常希望在关闭一个应用的所有窗口后让它退出。 若要在 Electron 中实现这一点，您可以监听 window-all-closed 事件，并调用 app.quit() 来让应用退出。这不适用于 macOS。

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

8.完整代码

  • main.js
const { app, BrowserWindow } = require('electron');

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });

  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" />  
<meta  
http-equiv="Content-Security-Policy"  
content="default-src 'self'; script-src 'self'"  
/>  
<meta  
http-equiv="X-Content-Security-Policy"  
content="default-src 'self'; script-src 'self'"  
/>  
<title>Hello from Electron renderer!</title>  
</head>  
<body>  
<h1>Hello from Electron renderer!</h1>  
<p>👋</p>  
<p id="info"></p>  
</body>  
<script src="./renderer.js"></script>  
</html>

9.可选：使用 VS Code 调试​

如果您希望使用 VS Code 调试您的程序，您需要让 VS Code 监听主进程 (main process) 和渲染器进程 (renderer process) 。 下面为您提供了一个简单的配置文件。 请在根目录新建一个 .vscode 文件夹，然后在其中新建一个 launch.json 配置文件并填写如下内容。

.vscode/launch.json

{
  "version": "0.2.0",
  "compounds": [
    {
      "name": "Main + renderer",
      "configurations": ["Main", "Renderer"],
      "stopAll": true
    }
  ],
  "configurations": [
    {
      "name": "Renderer",
      "port": 9222,
      "request": "attach",
      "type": "chrome",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Main",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args": [".", "--remote-debugging-port=9222"],
      "outputCapture": "std",
      "console": "integratedTerminal"
    }
  ]
}

保存后，当您选择侧边栏的 “运行和调试”，将会出现一个 "Main + renderer" 选项。然后您便可设置断点，并跟踪主进程和渲染器进程中的所有变量。

上文中我们在 launch.json 所做的其实是创建三个配置项：

  • Main 用来运行主程序，并且暴露出 9222 端口用于远程调试 (--remote-debugging-port=9222) 。 我们将把调试器绑定到那个端口来调试 renderer 。 因为主进程是 Node.js 进程，类型被设置为 node。
  • Renderer 用来调试渲染器进程。 因为后者是由主进程创建的，我们要把它 “绑定” 到主进程上 ()"request": "attach"，而不是创建一个新的。 渲染器是 web 进程，因此要选择 chrome 调试器。
  • Main + renderer 是一个 复合任务，可同时执行前两个任务。
avatar
文章
阅读
粉丝