Electron 踩坑or问题记录

162 阅读1分钟

打包构建

代码基于 react create app脚手架生成,构建产物的默认的publicPath为 /static/xxx,如果使用electron加载本地文件时,会出现资源404情况。 解决方案:

package.json 文件添加一个配置:

"homepage": "./"

构建的产物资源路径会变成 ./static/xxx 这样会默认基于html的路径进行资源加载

系统托盘

基于menubar的开发系统托盘,使用过程会有几个问题:

  1. 加载本地文件会有会有坑,menubar基于loadURL方式,如果html中引用了本地js,会有问题。解决方案:
const mb = menubar({
  index: false // 设置index为false,不执行默认的 loadURL方法
});

mb.on('before-load', () => {
  mb.window.loadFile('build/index.html');
  // mb.window.webContents.openDevTools();
})
  1. 托盘图标问题,需要以Template结尾,例如我项目的图标命名为:

image.png

Mac隐藏Dock图标

electron开发的应用默认会有一个很丑的图标,而且我比较喜欢使用系统托盘的图标,故不需要这个Dock上的图标

image.png

目前一个可行的方式是:

const { app } = require('electron');

app.dock.hide();

调用提供的方法隐藏,缺点是可能dock上会有个一个加载然后隐藏的图标的过程,但影响不是很大


未完,后续有问题继续更新