Electron开发： 踩坑windows与macOS平台开发差异

1 前言

大家好，我是心锁，一枚23届准毕业生。

近来在完成毕设，需要使用electron。经过不断踩坑，发现在Windows和macOS平台上使用electron开发存在一些实在难崩的坑，故有了此文，希望这篇文章能帮助大家顺利完成electron开发。

在本文中，我们介绍了在Windows与macOS平台下使用electron开发中存在的一些差异点，希望能帮助各位读者避免大坑。

2 开发背景

我使用electron-vite作为脚手架。该脚手架的优点在于它具有非常简单易用的配置，能够快速地启动应用程序的开发。同时，还提供了多个前端框架用作启动，包括 React、Vue 和 Angular 等，这使得我们可以根据自己的需求选择最适合自己的前端框架。除此之外，electron-vite 还提供了安全与标准工作模版，帮助开发者更好地开发应用程序和保障应用程序的安全性。

3 差异

在本章节中，我们将会讨论在Windows与macOS平台上使用electron开发时所遇到的实在难崩的坑，并提供相应的解决方案。

3.1 文件路径

在Windows下，文件路径的分隔符为\，而在macOS和Linux下，文件路径的分隔符为/。在开发中，最好使用path.join()方法来连接路径，可以避免因为路径分隔符不同导致的问题。

我在文件路径上踩的坑是，在平台打包阶段，需要通过github action自动打包，其中某一步是需要删除除了exe/dmg文件之外的所有文件。早期使用rimraf ，发现rimraf包在文件路径中存在子文件夹时，对于路径的识别就无法跨平台，体验非常难受。

目前的话，转向了通过del-cli 来完成该步骤，该包能够满足跨平台需求。

Untitled

3.2 窗口操作

在mac中，关闭窗口并不一定代表关闭应用程序。当最后一个窗口被关闭时，应用程序将保持运行状态。如果需要在关闭最后一个窗口时关闭应用程序，请在window-all-closed事件中调用app.quit()方法。以下是一个示例：

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

在macOS下，当关闭窗口时，也可以通过以下代码将应用程序图标从dock中移除，配合使用Tray 托盘的能力，可以让应用在后台运行：

app.on('window-all-closed', function() {
  if (process.platform === 'darwin') {
    app.dock.hide();
  }
});

3.3 菜单栏

在Windows和macOS平台下，菜单栏的显示方式存在一定的差异。在Windows下，菜单栏通常位于窗口的顶端，而在macOS下，菜单栏通常位于屏幕的顶端，并且与窗口分离。在electron开发中，

macOS下可以通过以下代码隐藏菜单栏：

Menu.setApplicationMenu(null);

在Windows和Linux下，可以通过以下代码隐藏菜单栏：

win.removeMenu();

3.4 打包应用程序

在将electron应用程序打包成可执行文件时，需要针对不同的操作系统进行不同的处理。其中需要注意的是，在打包桌面应用程序时需要注意版本号、签名等问题。在Windows版本中，忽视windows提醒的安全风险即可，但是在macOS中，对于未签名（未交钱加入苹果开发者联盟的用户）的应用，macOS存在两个问题。

其中之一，在安装前，需要打开软件权限。该位置路径不提也罢，因为一般用户根本找不到“任何来源”的开关。

Untitled

正确的处理方式是，在终端运行以下指令：

sudo spctl --master-disable // 关闭限制，安装前运行一次即可。注意每30天会自动恢复

另一个则是，安装后打开会提示文件已损坏。该问题的处理方案并不麻烦。

（网图，因我的现在已经ok了没截图）

（网图，因我的现在已经ok了没截图）

在终端输入：

sudo xattr -r -d com.apple.quarantine /Applications/[your app name].app

这行命令，需要把后边的app name替换成应用程序的名称，该名称可以从以下位置取：

Untitled

3.5 管理员权限

在Windows中，如果软件需要管理员权限运行，只需要在打包时声明“requestedExecutionLevel”为“requireAdministrator”。这将弹出一个UAC提示框，请求用户授予管理员权限运行软件。

而在macOS和Linux下，如果需要软件以root权限运行，需要使用sudo命令来获取权限。具体来说，可以使用以下命令运行软件，并输入sudo密码：

sudo /path/to/your/app/executable

当然这种方式不是很好，推荐在需要输入指令时再调用sudo密码确认框：

Untitled

3.6 更新

在进行electron应用程序的更新时，需要注意在Windows和macOS平台之间存在较大的差异。在Windows下，可以使用electron-updater等工具来实现自动更新，而在macOS下，如果没有证书——没有交钱，无法自动更新。

3.7 托盘图标

在electron中，应用程序可以通过Tray类来创建托盘图标。

import templateIcon from '../../trayTemplate.png?asset'
import baseIcon from '../../icon_16x16.png?asset'

const appIcon = process.platform === 'darwin' ? templateIcon : baseIcon
const tray = new Tray(nativeImage.createFromPath(appIcon))

在代码中，有两个图标：templateIcon和baseIcon。其中templateIcon用于在macOS中显示模版图标，而baseIcon用于在Windows中显示图标。在代码中，这两个变量的值是通过引入静态图片资源的方式解析的，也就是说，该文件相当于复制到打包后的文件中，不会改变名称。

在macOS使用Template时：

Untitled

而之所以需要是静态资源：

Untitled

4 总结

在本文中，我们介绍了Windows与macOS平台下使用electron开发时存在的差异，并提供了相应的解决方案。虽然不同平台之间存在着诸多的差异，但只要掌握了相应的技巧和方法，就能够顺利地进行electron开发。希望这些解决方案能够帮助到大家，顺利完成electron开发。