文章详情
Electron界面开发-windows
Posted on 2025-04-01 10:00:33 by 主打一个C++
创建测试项目
mkdir test-app
cd test-app
npm init -y安装Electron
npm install electron --save-dev创建主进程文件 main.js
// main.js
const { app, BrowserWindow } = require('electron');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
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();
}
});
创建渲染进程文件 index.html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>My test-app</title>
</head>
<body>
<h1>Hello, test-app!</h1>
</body>
</html>
修改package.json
{
"name": "test-app",
"version": "1.0.0",
"main": "main.js",
"type": "commonjs",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^35.1.5"
},
"dependencies": {}
}
测试运行
npm start安装electron-builder或electron-packager
为了打包你的应用程序成Windows的可执行文件（.exe），你需要使用electron-builder或electron-packager。
这里以electron-builder为例。
npm install electron-builder --save-dev
配置electron-builder
在package.json中添加build配置项，以便electron-builder知道如何打包应用程序。
{
"name": "test-app",
"version": "1.0.0",
"description": "test Electron",
"main": "main.js",
"author": "wuyou",
"license": "MIT",
"scripts": {
"start": "electron .",
"build": "electron-builder"
},
"build": {
"appId": "com.example.testapp",
"productName": "TestApp",
"directories": {
"output": "build"
},
"win": {
"target": [
"nsis"
]
}
},
"devDependencies": {
"electron": "^35.1.5",
"electron-builder": "^26.0.12"
}
}
打包应用程序
在命令行中运行以下命令来打包你的应用程序。
npm run build
打包完成后，会在项目目录下的dist或out文件夹中找到生成的.exe文件。
扩展：
- 图标：为了使你的应用程序看起来更专业，可以在build配置中添加图标文件。
- 签名：对于发布版本，建议对.exe文件进行数字签名，以提高安全性。
- 依赖管理：确保所有依赖项都正确安装和配置。
