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

Hello-Mr.Wang2025-05-30 16:42

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,
    })
    //加载百度URL
    win.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')
    // 加载指定的 URL
    win.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"
          ]
        }
      ]
    }
  },

3-5 重新打包

复制代码

npm run make

3-5-1 打包完成

打包完成看到一个 out 文件夹，其中包括可分发文件与一个包含其源码的文件夹，证明打包成功。