Electron常见问题汇总

原创文章，转载请注明出处

修改窗口大小

const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

窗口默认最大化

• 第一种方式：

 const win = new BrowserWindow({
    fullscreen: true,
    webPreferences: {
      nodeIntegration: true
    }
  });

• 第二种方式

 const win = new BrowserWindow({show: false});
 win.maximize();
 win.show();

窗口最小化

 win.minimize();

打开调试模式

win.webContents.openDevTools()

修改打包的名称

• 使用electron-builder打包，在package.json添加：

 "build":{
    "productName": "中文名称"
  }

• 使用electron-packager打包，也是在package.json添加：

 "productName": "中文名称"

修改图标，修改package.json

  "build":{
    "productName": "中文名称",
    "win": {
      "icon": "./icon.ico"
    }
  }

注意：windows下图标大小为256*256，否则会报错，这里踩过坑，其他环境下请自行百度

使用electron-builder打包项目时图标失真

• 使用图片制作.ico文件，借鉴文章 https://newsn.net/say/electron-ico.html
• 操作: 用icofx软件打开一张图片
• 选择 create a Windows icon from the image
• 菜单栏选择 Image ===> Add New Image ===> 然后可以选择ico图标大小
• 最后导出图标

修改菜单栏等样式

• 可参考文章 https://blog.csdn.net/fukaiit/article/details/91351448

隐藏菜单栏

• 参考文章

frame:false

  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    },
    frame: false
  })

titleBarStyle: 'hidden'

  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    },
    autoHideMenuBar: true
  })

清空菜单

 const { Menu } = require('electron')
  function createWindow () {   
   Menu.setApplicationMenu(null)
   // 创建浏览器窗口
   const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  // 并且为你的应用加载index.html
  win.loadFile('./html/index.html')
  // 打开开发者工具
  win.webContents.openDevTools()
 }

持续更新中。。。