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

相关推荐
泷羽Sec-静安15 分钟前
Less-1 GET-Error based-Single quotes-String GET-基于错误-单引号-字符串
前端·css·网络·sql·安全·web安全·less
小时前端27 分钟前
虚拟DOM已死?90%内存节省的Vapor模式正在颠覆前端
前端·html
Keepreal49628 分钟前
Web Components简介及如何使用
前端·javascript·html
进击的野人31 分钟前
JavaScript变量声明的前世今生:从var到let/const的演进
javascript
jump68035 分钟前
TS中 unknown 和 any 的区别
前端
无羡仙43 分钟前
AI终于‘看见’网页了!Stagewise让UI修改从‘盲调’变‘指哪打哪
前端
柯腾啊1 小时前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器
沙漠之皇1 小时前
ts 定义重复对象字段
前端
HashTang2 小时前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
Cory.眼2 小时前
WebRTC入门指南:实时通信零基础
javascript·webrtc·实时通信