Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个 Node. js 的变体，它专注于桌面应用而不是 Web 服务器端。
一.准备工作
- 安装node
- electron环境搭建
a.npm命令安装electon
npm i electron -g
or
npm i electron --save-dev
- 安装electron-packager，一个用于打包electron应用的工具，只是打包成各个平台下可执行文件，并不是安装包
npm i electron-packager -g
or
npm i electron-packager --save-dev
- 安装electron-builder打包成安装包
npm i electron-builder -g
or
npm i electron-builder --save-dev
二.创建一个应用
创建一个electron应用，我们只需要3个文件。
index.html
main.js
package.json
index.html是我们想要显示的页面，main.js是应用的入口，package.json是npm项目的配置文件。
一个最基本的electron应用一般来说有如下的目录结构：
your-app/
├── package.json
├── main.js
└── index.html
- 在该文件夹目录下打开命令行工具，然后运行npm init
npm init
npm会帮助你创建一个基本的package.json文件，其中的main字段所表示的脚本为应用的启动脚本，start脚本表示执行当前的package,下面是package.json的实例：
{
"name": "your-app",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>我是第一个electron应用，哈哈哈哈</div>
</body>
</html>
- main.js
Electron apps 使用JavaScript开发，其工作原理和方法与Node.js 开发相同。 electron模块包含了Electron提供的所有API和功能，引入方法和普通Node.js模块一样：
const electron = require('electron')
electron 模块所提供的功能都是通过命名空间暴露出来的。 比如说： electron.app负责管理Electron 应用程序的生命周期， electron.BrowserWindow类负责创建窗口。 下面是一个main.js文件，它将在应用程序准备就绪后打开一个窗口：
const { app, BrowserWindow } = require('electron')
// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win
function createWindow () {
// 创建浏览器窗口。
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 加载index.html文件
win.loadFile('index.html')
// 打开开发者工具
win.webContents.openDevTools()
// 当 window 被关闭，这个事件会被触发。
win.on('closed', () => {
// 取消引用 window 对象，如果你的应用支持多窗口的话，
// 通常会把多个 window 对象存放在一个数组里面，
// 与此同时，你应该删除相应的元素。
win = null
})
}
// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)
// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
if (win === null) {
createWindow()
}
})
// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。
- 启动应用
在创建并初始化完成main.js,index.html和package.json后，就可以在当前工程的根目录执行 npm start 命令来启动刚刚编写好的electon程序了。启动之后就是酱样子的~
三.electron-packager打包可执行文件
首先我们继续使用上面的项目文件，只需要在package.json中添加一个字段。 electron-packager的打包基本命令是：
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
参数说明：
- sourcedir：项目所在路径
- appname：应用名称
- platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）
- arch：决定了使用 x86 还是 x64 还是两个架构都用
- optional options：可选选项
我们可以在命令行中直接输入
electron-packager . ElectronDemo --platform=win32 --arch=x64 --icon=computer.ico --out=./out --app-version=0.0.1 --overwrite --ignore=node_modules
或者是在package.json中添加代码：
"scripts": {
"package": "electron-packager . ElectronDemo --platform=win32 --arch=x64 --icon=computer.ico --out=./out --app-version=0.0.1 --overwrite --ignore=node_modules"
},
然后在命令行中执行 npm run package
打包成功后我们可以在out文件夹里看到生成了.exe，运行该文件，并且没有报错，说明打包成功。
四.用electron-packager打包react,vue项目
- 当我们的项目完成时，我们执行打包指令，比如我的是npm run build,会在build文件夹下面生成如下的结构：
- 此时我们打开index.html文件，一片白屏，此时我们可以在package.json中添加"homepage": "./",此时我们在执行npm run build，应该就可以看到内容了。
- 在index.html可以看到内容的情况下，我们在build文件夹下面在新建main.js和package.json文件，mian.js的内容和上面提到的保持一致，package.json中的内容也和上面保持一致。此时npm run dist就成功了
五.electron-builder打包安装包
继续使用创建一个应用时用到的项目文件，main.js，index.html和package.json这3个文件
- 在项目中安装electron-builder
npm i electron-builder --save-dev
- 在package.json文件中添加一下代码:
"build": {
"appId": "com.example.app",
"mac": {
"target": [ // 目标包类型
"dmg",
"zip"
]
},
"win": {
"target": [ // 目标包类型
"nsis",
"zip"
]
}
},
"scripts": {
"dist": "electron-builder"
},
- 在命令行中执行 npm run dist 此时如果顺利的话在目录下会有个dist文件夹
各操作系统包的位置如下：
- macOS ~/Library/Caches/electron-builder
- linux ~/.cache/electron-builder
- windows %LOCALAPPDATA%\electron-builder\cache
a.下载nsis包，下载地址github.com/electron-us…
b.下载wincodesign包，下载地址：github.com/electron-us…
下载nsis-resources包，下载地址：github.com/electron-us…
c.在%LOCALAPPDATA%（C:\Users\wb-zy533658\AppData\Local）目录下新建electron-builder\Cache<br>
d.把下载好的zip解压到第三步的目录下，根据错误提示的版本建立对应的文件夹，并把文件移动到目录下，如图:
- oneClick设置为false
- allowToChangeInstallationDirectory设置为true
"build": {
"appId": "com.example.app",
"mac": {
"target": [
"dmg",
"zip"
],
"icon": "img.ico"
},
"win": {
"target": [
"nsis",
"zip"
],
"icon": "img.ico" // 更换桌面上生成的图标
},
"nsis": {
"oneClick": false, // 是否一键安装，建议为 false，可以让用户点击下一步、下一步、下一步的形式安装程序，如果为true，当用户双击构建好的程序，自动安装程序并打开，即：一键安装
"allowToChangeInstallationDirectory": true, // 允许修改安装目录，建议为 true，是否允许用户改变安装目录，默认是不允许
"createDesktopShortcut": true, // 创建桌面图标
"createStartMenuShortcut": true, // 创建开始菜单图标
"installerIcon": "test.ico", // 安装图标
"uninstallerIcon": "xxx.ico", // 卸载图标
"installerHeaderIcon": "xxx.ico" // 安装时头部图标
},
"scripts": {
"dist": "electron-builder"
}
}
此时在执行npm run dist，我们在看看效果是怎么样的
我们在installerIcon配置项中配置了自己的图标，在下图中我们看到已经生效了
"build": {
"appId": "com.example.app",
"mac": {
"target": [
"dmg",
"zip"
],
"icon": "img.ico" // 更换生成的图标
},
"win": {
"target": [
"nsis",
"zip"
],
"icon": "img.ico"
},
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true,
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"installerIcon": "test.ico"
}
},
这就是生效后的桌面图标
六.ectron-builder打包时出现的错误
写在最后，之前打包时还出现了一个错误信息，说有个入口文件'build/electron.js'没找到
"build": {
"appId": "com.example.app",
"mac": {
"target": [
"dmg",
"zip"
],
"icon": "img.ico" // 更换生成的图标
},
"win": {
"target": [
"nsis",
"zip"
],
"icon": "img.ico"
},
"files": [
"index.html",
"main.js",
"package.json",
"build/electron.js"
]
},
