当前位置：首页 > news >正文

electron开发百度桌面应用demo及如何打包应用

news 来源：原创 2025/5/30 20:05:20

1.开发入口文件main.js

1-1 加载百度URL

const { app, BrowserWindow, nativeImage } = require('electron')
const path = require('node:path')const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600,})//加载百度URLwin.loadURL('https://www.baidu.com/')
}app.whenReady().then(() => {// 调用 createWindow 函数，该函数的作用是创建一个新的浏览器窗口createWindow()
})

1-2 设置窗口图标

1-2-1 根目录中添加ico图标，如图

1-2-2 入口文件main.js中设置icon

 const appIcon = nativeImage.createFromPath(path.join(__dirname, 'baidu.ico'))const win = new BrowserWindow({width: 800,height: 600,icon: appIcon,})

1-3 入口文件完整实例代码

const { app, BrowserWindow, nativeImage } = require('electron')
const path = require('node:path')const createWindow = () => {const appIcon = nativeImage.createFromPath(path.join(__dirname, 'baidu.ico'))const win = new BrowserWindow({width: 800,height: 600,icon: appIcon,})// 设置菜单不可见win.menuBarVisible = false;//加载指定路径的文件//win.loadFile('index.html')// 加载指定的 URLwin.loadURL('https://www.baidu.com/')
}app.whenReady().then(() => {// 调用 createWindow 函数，该函数的作用是创建一个新的浏览器窗口createWindow()
})

2.启动项目测试

npm run start

3.使用 Electron Forge打包应用

3-1 安装Electron Forge ，并使用现成的转化脚本将项目导入至 Electron Forge

npm install --save-dev @electron-forge/cli
npx electron-forge import

3-1-1 安装完成检查package.json配置是否如下

3-2 package.json中添加打包应用图标配置

 "config": {"forge": {"packagerConfig": {"icon": "./logo.ico"}}},

3-3 打包应用

npm run make

3-4 解决打包错误

3-4-1 package.json中添加makers配置

 "config": {"forge": {"packagerConfig": {"icon": "./logo.ico"},"makers": [{"name": "@electron-forge/maker-squirrel","platforms": ["win32"]},{"name": "@electron-forge/maker-zip","platforms": ["win32"]}]}},