Electron 写一个 Hello World - 咱的测试笔记

写在开始

编写第一个 Hello World 程序，建议阅读官方文档（创建您的第一个应用程序），官方文档写的还比较清晰易懂，这里仅做一个归纳概括

环境配置

首先需要安装 Node.js，针对 Windows 和 macOS 系统，前往官网下载安装 LTS（长期维护版）版本即可；如想在 Linux 上安装，需要自行构建，这里不多叙述
如果有能力科学上网，建议首先给终端开启代理，并将代理工具改为全局模式，这能有效避免连接 npm 源出错的问题；也可在安装好 Node.js 后更改 npm 源为国内的淘宝镜像等

开始安装

新建一个文件夹，在终端中打开它
依次输入

mkdir electron-hello-world
# 建立一个新文件夹
cd electron-hello-world
# 切换至该文件夹
npm init
# 开始初始化项目

接下来，跟着终端的提示，创建项目的 package.json 的基本内容即可
注意，entry point: (index.js) 这一项请填写 main.js
然后执行下列命令安装 Electron

npm install electron --save-dev

安装完成后，咱们修改 package.json，增加 scripts 的 start 那一行，给予一个开始运行的位置。修改完后的 package.json 大致如下所示

{
  "name": "electron-hello-world",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^25.3.2"
  }
}

接着新建并编写 main.js 文件，咱们想让这个 electron 运行之后，加载一个写有 Hello World! 的网页（index.html），故需要在 main.js 中写入下列内容

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

// 创建窗口的函数
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
  // 让这个窗口加载 index.html
  win.loadFile('index.html')
}

// 下面的 app.on 是为了适配 macOS 的系统习惯
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" />
    <!-- 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>Electron Test Project</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>👋</p>
  </body>
</html>

完成上面的这些代码编辑任务后，在终端中执行

npm run start

即可看到写有 Hello World! 的 Electron 程序了