前言
Electron 是一个开源框架,可以让您使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序。
本教程将向您展示如何使用 Electron 将一个现有的 HTML 项目 打包成桌面应用程序。
安装 Node 环境
首先,您需要安装 Node.js 和 npm。如果您还没有安装,请到 Node.js 官网 下载并安装。
如已安装,请忽略此步骤
创建 Electron 项目
创建一个新文件夹并在文件下 新建如下几个文件:
修改package.json文件
打开 package.json 的文件,并复制粘贴以下代码:
例如:
{
"name": "my-electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron .",
"package": "electron-packager . --overwrite",
"package-windows32": "electron-packager . --overwrite --platform=win32 --arch=x64"
},
"devDependencies": {
"electron-packager": "^17.1.1"
},
"dependencies": {
"electron": "^23.0.0"
}
}
修改 main.js文件
打开 main.js 的文件,并复制粘贴以下代码:
例如:
const {
app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 800,
webPreferences: {
nodeIntegration: true
}
})
// 加载index.html文件
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
安装electron,electron-packager:
npm install electron electron-packager
构建应用:使用以下命令构建electron应用:
electron .
此时 您的 Electron 应用现在应该正常运行,并显示您的 HTML
打包成桌面端应用:
npm run package
此时 在您的根目录会生成一个 文件夹,里面会有一个exe应用
其中 electron-packager . <应用目录> <应用名称> <打包平台> —out <输出目录> <架构> <应用版本>
如果需要更换图标,则需要继续执行命令
图标需要ioc格式,新建一个logo文件 app.ico 放在根目录,在package.json中 package后继续添加命令
{
"name": "my-electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron .",
"package": "electron-packager . exe --win --out ../exe --arch=x64 --electron-version=10.1.0 --overwrite --ignore=node_modules --electron-zip-dir=./electron-zip --icon=app.ico"
},
"devDependencies": {
"electron-packager": "^17.1.1"
},
"dependencies": {
"electron": "^23.0.0"
}
}