Electron开发跨平台桌面程序入门教程


【本文版权归微信公众号"代码艺术"（ID：onblog）所有，若是转载请务必保留本段原创声明，违者必究。若是文章有不足之处，欢迎关注微信公众号私信与我进行交流！】

最近一直在学习 Electron 开发桌面应用程序，在尝试了 java swing 和 FXjava 后，感叹还是 Electron 开发桌面应用上手最快。我会在这一篇文章中实现一个HelloWord的应用程序，记录学习过程中的坑。

Electron是什么呢？

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

这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。 相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

一、环境准备

本地环境：Node.js + npm

1
2
3
4
5
# 下面这行的命令会打印出Node.js的版本信息
node -v

# 下面这行的命令会打印出npm的版本信息
npm -vCopy

二、目录结构

从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。 与 Node.js 模块相同，应用的入口是 package.json 文件。 一个最基本的 Electron 应用一般来说会有如下的目录结构：

1
2
3
4
your-app/
├── package.json
├── main.js
└── index.html

为你的新Electron应用创建一个新的空文件夹，并新建上述三个文件。

三、package.json

其中package.json的文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
{
  "name": "my-app",
  "version": "0.1.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC"
}

Tips：使用npm init命令可以便捷创建package.json。

四、安装Electron

在终端进入到工程文件夹下进行操作，会在当前目录下安装Electron。

1
2
3
4
5
6
7
# 局部安装 需要的话追加上 --registry='http://registry.npm.taobao.org' 使用淘宝npm源安装
npm install electron --save-dev
# Windows使用下面语句 64位32位机器都是--win32
npm install electron --save-dev --platform=win32

# 验证安装
node_modules/.bin/electron -v

Tips：--save-dev参数会在package.json文件中导入该依赖到devDependencies属性下，--save参数会导入该依赖到dependencies属性下。

安装过程可能会很慢，正常的话，安装下载进度如下直至完成。

1
2
3
4
5
6
7
8
9
10
> [email protected] postinstall /home/qii/electron/eee/node_modules/electron
> node install.js

Downloading tmp-26643-1-SHASUMS256.txt-5.0.6
[============================================>] 100.0% of 4.74 kB (4.74 kB/s)
npm notice created a lockfile as package-lock.json. You should commit this file.

+ [email protected]
updated 1 package and audited 201 packages in 499.235s
found 0 vulnerabilities

Tips：npm安装超时的话一般是网络问题。解决方法

五、main.js

package.json中指定的入口点文件，即程序主文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const {app, BrowserWindow} = require('electron')

let mainWindow

// 创建主窗口，设置了宽高等信息
function createWindow () {
  mainWindow = new BrowserWindow({
    width: 1000,
    height: 600,
    webPreferences: {
      // node集成，即是否注入node能力
      nodeIntegration: true
    }
  })

  // 加载主页面内容 index.html
  mainWindow.loadFile('index.html')

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

六、index.html

main.js中加载的主窗口文件，即主布局文件

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <!-- 此title会覆盖package.json中设置的name，作为应用顶部名称 -->
    <title>my-app</title>
</head>
<body>
    Hello World!
</body>
</html>

七、启动应用

在创建并初始化完成 main.js、 index.html和package.json之后，您就可以在当前工程的根目录执行下述命令来启动刚刚编写好的Electron程序了。

1
2
3
4
5
6
7
# 进入到包含 package.json 文件的目录
npm satrt
>【本文版权归微信公众号"代码艺术"（ID：onblog）所有，若是转载请务必保留本段原创声明，违者必究。若是文章有不足之处，欢迎关注微信公众号私信与我进行交流！】


# 或者直接使用脚本启动，别忽略了后面的点
node_modules/.bin/electron .

八、打包应用

以上所述都是在本地开发环境下使用，但如果要给被人使用，就必须得将Electron打包成一个程序包。幸运的是我们可以通过electron-builder将程序打包成Win、Linux、Mac平台都兼容的版本，交给别人之后直接安装即可。

1、安装electron-builder

1
2
3
4
npm install --save-dev electron-builder

# 验证安装
node_modules/.bin/electron-builder -h

2、开始打包

注意生成各自平台的程序包最好在对应平台上执行，否则可能打包失败

1
2
3
4
5
6
7
8
9
10
# Linux打包成AppImage文件（在Linux环境上执行）
node_modules/.bin/electron-builder -l AppImage

# Windows打包成exe安装文件（在Windows环境下执行）
node_modules/.bin/electron-builder -w nsis
# 如果在非Windows上打包win程序，也可以借助docker 如下
# docker run --rm -it -v ${PWD}:/project electronuserland/builder:wine sh -c "node_modules/.bin/electron-builder -w nsis"

# Mac打包成dmg文件（在Mac环境下执行）
node_modules/.bin/electron-builder -m dmg

3、最终文件

打包好的程序在当前目录dist文件夹下，如图所示：

  • Linux生成my-app 0.1.0.AppImage文件，双击执行或者./my-app 0.1.0.AppImage执行即可。
  • Windows生成my-app 0.1.0.exe文件，双击安装即可。
  • Mac生成my-app 0.1.0.dmg，双击拖拽安装即可。

4、利用配置文件打包

上面的方法相当于临时打包，每次运行命令的时候都要指定打包命令，虽然很直接，但是有点不太方便，下面用另一种方法来打包，将打包配置写到package.json中 ，方便使用。

打开package.json文件，发现前面的 devDependencies 属性下已经多出了 electron 和 electron-builder 依赖，我们将与打包相关的配置信息全部写在build属性下，再添加脚本命令"dist": "electron-builder"。

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
34
35
36
37
38
39
40
41
42
43
44
45
{
  "name": "my-app",
  "version": "0.1.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dist": "electron-builder"
  },
  "author": "",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^6.0.12",
    "electron-builder": "^21.2.0"
  },
  "build": {
    "win": {
      "icon": "icon.png",
      "target": [
        "nsis"
      ]
    },
    "nsis": {
      "allowToChangeInstallationDirectory": true,
      "oneClick": false,
      "menuCategory": true,
      "allowElevation": false
    },
    "linux": {
      "icon": "icon.png",
      "category": "Utility",
      "target": [
        "AppImage"
      ]
    },
    "mac": {
      "icon": "icon.png",
      "type": "development",
      "category": "public.app-category.developer-tools",
      "target": [
        "dmg"
      ]
    }
  }
}

运行命令：

1
npm run dist

九、进阶之路

Electron给我的认识是使用HTML文件渲染页面组件、使用CSS渲染页面组件的样式，使用JavaScript编写程序的逻辑，且支持Node以及DOM的API。

我在学习Electron的时候，写了一个本地音乐播放器的小项目，在这个项目中涉及了主进程与渲染进程如何通信，如何使用CSS样式，如何使用electron-store本地存储。

项目的地址：https://github.com/ystcode/SimpleMusicPlayer 欢迎Star！

关于Electron的进阶学习，我推荐下面几个学习网站：

Electron官方开发文档：开发Electron必须打开的网页。

electron.build官方配置文档：开发完最后参考的配置文档。

electron-store本地文件存储：这个挺简单的，用的时候看下。

icns、ico图标生成指南：打包的时候自定义图标，icns是mac专属的图标格式，ico是window的格式。

npm一键png转ico

Web开发者指南-MDN文档：写JavaScript必备的API文档神器，可惜中文支持太差。

fontawesome字体图标库：丰富你的界面样式，优秀的图标库。

Electron 打包优化：腾讯的前端技术文档，有些文章写的不错。

版权声明

【本文版权归微信公众号"代码艺术"（ID：onblog）所有，若是转载请务必保留本段原创声明，违者必究。若是文章有不足之处，欢迎关注微信公众号私信与我进行交流！】