Electron官网地址

使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序

如果你可以建一个网站，你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。

Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。

Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目。

Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。

前提条件

1
2
node -v
npm -v

初始化

1
2
mkdir my-electron-app && cd my-electron-app
npm init

生成的package.json文件

1
2
3
4
5
6
7
8
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "src/index.js",
  "author": "Jane Doe",
  "license": "MIT"
}

安装electron

1
npm install --save-dev electron

在package.json文件添加启动命令

1
2
3
4
5
{
  "scripts": {
    "start": "electron ."
  }
}

创建入口文件src/index.js

注：这里把入口文件放在src文件夹里是因为之前打包出过错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const { app, BrowserWindow } = require('electron')
const path = require('path')

// 将html文件加载应用程序窗口
function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    // 要将此脚本附加到渲染过程中，要将预加载脚本的路径传递到webPreferences。在现有的BrowserWindow构造函数中的预加载选项
    webPreferences: {
      // __dirname字符串指向当前正在执行的脚本的路径(在本例中，是项目的根文件夹)
      // path.join将多个路径段连接在一起，创建一个适用于所有平台的组合路径字符串。
      preload: path.join(__dirname, 'preload.js')
    }
  })

  mainWindow.loadFile('index.html')
}

// 等待加载窗口
app.whenReady().then(() => {
  createWindow()
  // 当没有可用窗口时激活应用程序会打开一个新的。
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  // 除了macOS 退出窗口等于退出整个应用
  if (process.platform !== 'darwin') app.quit()
})

创建index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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 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>.

    <script src="./renderer.js"></script>
  </body>
</html>

创建preload.js

1
2
3
4
5
6
7
8
9
10
11
12
// 将预加载脚本附加到渲染器的时候。预加载脚本在渲染进程加载之前运行，并且可以访问渲染全局变量(例如窗口和文档)和Node.js环境。
window.addEventListener('DOMContentLoaded', () => {
  // 打印Electron的版本号和它的依赖到你的网页上。
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

启动应用程序

1
npm start

应用程序打包发布

安装Electron Forge工具

npm2yarn
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
npm install --save-dev @electron-forge/cli
npx electron-forge import

✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!
​```

打包创建

npm2yarn
1
2
3
4
5
6
7
8
9
10
11
12
13
npm run make

> my-electron-app@1.0.0 make /my-electron-app
> electron-forge make

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64

输出目录

1
2
3
4
// Example for windows
out/
├── out/make/squirrel.windows/x64/my-electron-app-1.0.0 Setup.exe
└── out/my-electron-app-win32-x64/my-electron-app.exe