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

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 文件夹,其中包括可分发文件与一个包含其源码的文件夹,证明打包成功。

相关推荐
太阳伞下的阿呆1 小时前
本地环境vue与springboot联调
前端·vue.js·spring boot
阳光是sunny1 小时前
走进微前端(1)手写single-spa核心原理
前端·javascript·vue.js
烛阴2 小时前
Ceil -- 从平滑到阶梯
前端·webgl
90后的晨仔2 小时前
🔍Vue 模板引用(Template Refs)全解析:当你必须操作 DOM 时
前端·vue.js
90后的晨仔2 小时前
👂 Vue 侦听器(watch)详解:监听数据的变化
前端·vue.js
90后的晨仔3 小时前
深入浅出 Vue 的 computed:不仅仅是“计算属性”那么简单!
前端·vue.js
Nan_Shu_6143 小时前
学习:入门uniapp Vue3组合式API版本(17)
前端·vue.js·学习·uni-app
止观止3 小时前
Remix框架:高性能React全栈开发实战
前端·react.js·前端框架·remix
萌萌哒草头将军4 小时前
🚀🚀🚀 深入探索 Node.js v22.18.0 新特性;默认支持运行 ts 文件了!
前端·typescript·node.js
安心不心安4 小时前
React ahooks——副作用类hooks之useThrottleFn
前端·javascript·react.js