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

相关推荐
ps_xiaowang21 分钟前
React Query入门指南:简化React应用中的数据获取
前端·其他·react native·react.js
知识分享小能手33 分钟前
微信小程序入门学习教程,从入门到精通,微信小程序开发进阶(7)
前端·javascript·学习·程序人生·微信小程序·小程序·vue3
sophie旭2 小时前
一道面试题,开始性能优化之旅(8)-- 构建工具和性能
前端·面试·性能优化
市民中心的蟋蟀2 小时前
第三章 钩入React 【上】
前端·react.js·架构
Holin_浩霖3 小时前
为什么typeof null 返回 "object" ?
前端
PanZonghui3 小时前
Zustand 实战指南:从基础到高级,构建类型安全的状态管理
前端·react.js
PanZonghui3 小时前
Vite 构建优化实战:从配置到落地的全方位性能提升指南
前端·react.js·vite
_extraordinary_3 小时前
Java Linux --- 基本命令,部署Java web程序到线上访问
java·linux·前端
用户1456775610373 小时前
推荐一个我私藏的电脑神器:小巧、无广、功能强到离谱
前端
用户1456775610373 小时前
终于找到了!一个文件搞定PDF阅读
前端