electron快速使用（二）

前言

此文是个人学习归纳的记录，腾讯云首发，未经允许，严禁转载，如有不对, 还望斧正, 感谢!

最近用到了electron，顺便归纳一下，站在巨人的肩膀上。

将网页装载到 BrowserWindow

在 Electron 中，每个窗口展示一个页面，后者可以来自本地的 HTML，也可以来自远程 URL。在本例中，我们将会装载本地的文件。在我们项目的根目录中创建一个 index.html 文件，并写入下面的内容：

代码语言：javascript复制

<!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>
  </body>
</html>

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

main.js

代码语言：javascript复制

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

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

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

4.1 导入模块

main.js (Line 1)

代码语言：javascript复制

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

在第一行中，我们使用 CommonJS 语法导入了两个 Electron 模块：

app，它控制应用的事件生命周期。
BrowserWindow，它负责创建和管理应用的窗口。

在 ELECTRON 中使用 ES 语法 Electron 目前对 ECMAScript 语法 (如使用 import 来导入模块) 的支持还不完善。我们可以在 electron/electron#21457 这个 issue 中查看 ESM 的适配进展。

4.2 将可复用的函数写入实例化窗口

createWindow() 函数将我们的页面加载到新的 BrowserWindow 实例中：

main.js (Lines 3-10)

代码语言：javascript复制

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

  win.loadFile('index.html')
}

4.3 在应用准备就绪时调用函数

main.js (Lines 12-14)

代码语言：javascript复制

app.whenReady().then(createWindow)

Electron 的很多核心模组是 Node.js 事件触发器，遵守 Node.js 的异步事件驱动架构。 app 模块就是其中一个。

在 Electron 中，只有在 app 模组的 ready 事件能触发后才能创建 BrowserWindows 实例。我们可以借助 app.whenReady() API 来等待此事件，并在该 API 的 promise 被 resolve 时调用 createWindow() 方法。

提醒通常我们使用触发器的 .on 函数来监听 Node.js 事件。 app.on('ready').then(() => { - app.whenReady().then(() => { createWindow() }) 但是 Electron 暴露了 app.whenReady() 方法，作为其 ready 事件的专用监听器，这样可以避免直接监听 .on 事件带来的一些问题。参见 electron/electron#21972 。

此时，运行 start 命令应该能成功地打开一个包含我们网页内容的窗口

应用中的每个页面都在一个单独的进程中运行，我们称这些进程为 渲染器 (renderer) 。渲染器也能访问前端开发常会用到的 API 和工具，例如用于打包并压缩代码的 webpack，还有用于构建用户界面的 React 。

我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！

electron 笔记腾讯技术创作特训营S6

0 人点赞