Electron打包桌面应用程序

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。
github项目地址：https://github.com/wukingui/electron-app
博客地址：https://www.xiaofly.cn/post-details?id=627b25fd6ab15234c68a1677

一、初始化项目

1、npm init指令初始化项目配置：

entry point选项的值应为main.js
author和description也必须填写，但是可以填写任意值

package.json

{"name": "electron-app","version": "1.0.0","description": "a electron app demo","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "xxx@gmail.com","license": "ISC"
}

2、安装依赖：

npm install --save-dev electron electron-builder

3、修改package.json，在scripts里添加start指令：

"start": "electron ."

4、执行npm start启动项目，会发现如下图报错：

这是因为现在还没有mian.js文件，线程找不到主进程。

二、创建视图文件和入口文件

1、新建index.html视图文件。

<!--index.html-->
<!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>Electron App</title></head><body><h1>Electron App</h1><p>这是我的第一个桌面应用程序</p></body>
</html>

2、再创建preload.js预加载脚本文件：

// preload.js
window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const type of ['chrome', 'node', 'electron']) {replaceText(`${type}-version`, process.versions[type])}
})

3、接下来创建main.js入口文件，内容如下：

// main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')const createWindow = () => {const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})// 加载 index.htmlmainWindow.loadFile('index.html')
}// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 当所有窗口都被关闭的时候退出程序
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

现在我们再来执行npm start启动项目，就会弹出一个如下图的窗口：

至此，说明我们的代码没有问题。

三、打包项目

1、修改package.json文件，在scripts里添加如下内容：

注：json文件不能有注释，请自己把后面的注释去除

"pack": "electron-builder --dir",// 暂时不知道用途，官方的配置
"postinstall": "electron-builder install-app-deps",// 编译命令
"build": "electron-builder",// 打包当前平台命令
"build-win": "electron-builder --win --ia32",// 打包windows 32位应用命令
"build-win64": "electron-builder --win --x64",// 打包windows 64位应用命令
"build-mac": "electron-builder --mac",//打包mac平台应用命令
"build-linux": "electron-builder --linux"// 打包Linux平台应用命令

完整的内容应为下图：

2、执行npm run postinstall编译项目：

3、再执行npm run build打包（这里以当前平台为例）。

没有报错，说明我们打包成功。然后就发现多了一个dist文件夹，打开进去就是我们安装包的位置：

免安装目录：不用安装，进去后直接双击里面的.exe文件就可以直接打开；
安装包：需要安装，直接双击就能正常安装。

到这里，我们就可以自己打包一个桌面应用程序了。

四、打包报错处理

1、要是我们运行npm run build打包时出现winCodeSign、nsis、nsis-resources文件下载不了的错误，这时我们就需要手动下载。

复制dowonloading后面的下载地址到GitHub文件加速网站（https://shrill-pond-3e81.hunsh.workers.dev/）下载相应的文件，把下载好的文件解压放到下列对应的文件夹中：

用户名为自己电脑的用户名（例如：C:\Users\Hello\AppData\Local\electron-builder\Cache）；
版本号为npm run build时下载地址中的版本号；
要是这个目录下没有\electron-builder\Cache\这个地址，则需要自己创建;
上面这图是成功打包的图，实际操作需要一步一步buid再下载文件。

winCodeSign：C:\Users\用户名\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-版本号
nsis：C:\Users\用户名\AppData\Local\electron-builder\Cache\nsis\nsis-版本号
nsis-resources：C:\Users\用户名\AppData\Local\electron-builder\Cache\nsis\nsis-resources-版本号

当所有包都下载好后重新npm run build就可以了。

至此完结。

参考文档：
Electron中文网
Electron打包（windows平台）