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

相关推荐
用户95251151401552 分钟前
js最简单的解密分析
前端
FogLetter2 分钟前
深入浅出React-Router-Dom:从前端路由到SPA架构的华丽转身
前端·react.js
绅士玖5 分钟前
JavaScript 设计模式之单例模式🚀
前端·javascript·设计模式
Dream耀5 分钟前
useReducer:React界的"灭霸手套",一个dispatch搞定所有状态乱局
前端·javascript·react.js
余大侠在劈柴12 分钟前
pdf.js 开发指南:在 Web 项目中集成 PDF 预览功能
前端·javascript·学习·pdf
钟智强34 分钟前
Flutter 前端开发中的常见问题全面解析
android·前端·flutter·ios·前端框架·dart
拾光拾趣录1 小时前
JavaScript屏幕切换检测方案
前端·javascript
前端设计诗1 小时前
对React官网《Virtual DOM 及内核》注解:其实Virtual DOM 就藏在在代码行间
前端·react.js·前端框架
Perfumere1 小时前
【WebGPU学习杂记】缓冲区是个啥?内存?闪存?
前端·webgl
CodeTransfer1 小时前
搬运一个前端锻炼面向对象思维的小案例
前端·javascript