使用Electron创建桌面应用程序 - Soft8Soft
Description: 了解如何使用Electron为桌面创建跨平台的Verge3D应用程序。

# 用Electron创建桌面应用程序

Electron是一个可以将网页应用打包成为跨平台桌面应用的工具。Electron可以为Windows、macOS（同时支持Intel和Apple Silicon架构）和Linux创建应用程序。该工具完全免费，易于使用，并允许用JavaScript进行高级定制（如果需要）。

- 创建应用
- 运行您的应用
- 美化
  - 修改应用名称和图标
  - 自定义菜单
- 使用NPM进行Electron高级开发
- 覆盖模板文件
- 在无互联网连接时创建应用

#

## 创建应用

可以通过NPM安装Electron，也可以从互联网下载。为了简化操作，我们在应用管理器中集成了Electron应用构建工具。

通过它，您可以为选定的目标平台下载Electron二进制文件，然后从您的Verge3D应用中打包一个对应平台的应用程序。

由于可用平台众多，请参考以下备忘录选择您所需的版本：

None (npm package)
  构建npm包而非即用型可执行文件。此选项适用于熟悉NPM实用工具的高级用户。请按照下方的说明继续构建应用。
Windows (64-bit)
  Windows 10或更高版本，64位。
Windows (ARM)
  在带有64位ARM处理器的设备上运行的Windows 10+。
Windows (32-bit)
  Windows 10或更高版本，32位。
macOS (64-bit)
  macOS 11 (Big Sur)或更高版本，Intel芯片Mac电脑。
macOS (Apple Silicon)
  macOS 11 (Big Sur)或更高版本，Apple Silicon（即M1-M4）芯片Mac电脑。
Linux (64-bit)
  64位Linux，例如Ubuntu、Fedora或Red Hat。
Linux (ARM)
  64位ARM设备上的Linux。

由于Windows操作系统的体系结构限制，不可在该系统上构建macOS应用。请改用macOS或Linux。

当应用准备就绪后即可下载，然后将zip文件解压到某个目录中。

#

## 运行您的应用

通过运行位于应用目录下的app_name.exe（或macOS上的AppName.app，或Linux上的app_name）来运行应用。

请记住，由于您的应用程序是未签名的版本，Windows和macOS（但Linux不会）会阻止它的直接运行。例如，在Windows上，您将看到以下 Windows protected your PC 对话框：

单击 More info 链接，然后点击 Run anyway 来启动您的应用。为避免此问题，特别是当您将工作分发给最终用户时，您必须签署应用。请参阅Electron文档的 code signing(代码签名) 部分。

在macOS上，您甚至可能会收到应用已损坏的错误提示（实际上并非如此）：

在这种情况下，您需要清除ZIP归档文件的隔离属性（使用终端应用）：

`xattr -r -d com.apple.quarantine my_awesome_app.zip`

然后重新解压/启动您的应用。

#

## 美化

#

### 修改应用名称和图标

请参阅 Electron官方指南 了解如何重命名您的应用构建并指定自定义图标。

#

### 自定义菜单

要完全禁用应用菜单，请在 `main.js` 中的 `loadFile()` 方法后面插入以下一行：

`win.removeMenu();`

要创建自己的菜单，首先将 `Menu` 模块连接到应用程序：

`const { Menu } = require('electron');`

我们将使用 `shell` 模块，在点击菜单时打开外部网站。因此，在这里也添加 `shell` 模块：

`const { shell } = require('electron');`

然后在 `main.js` 中的 `loadFile()` 方法后面添加以下代码：

`const menu = Menu.buildFromTemplate([{ label: 'Menu', submenu: [ { label: 'Soft8Soft Website', click() { shell.openExternal('https://www.soft8soft.com'); } }, { label: 'Exit', click() { app.quit() } } ] }]); Menu.setApplicationMenu(menu);`

请参阅这里修改后的 `main.js` 文件示例。

将修改后的 `main.js` 放入应用文件夹中，然后再次运行应用构建器。您应该会看到以下效果：

#

## 使用NPM进行Electron高级开发

通过使用 npm 实用工具，您可以提高基于Electron的开发流程效率。您可以按照这些说明进行安装。

请参阅Electron文档了解如何使用 npm 的更多信息。

#

## 覆盖模板文件

基于Electron的构建模板文件位于Verge3D安装文件夹内的 manager/templates/Electron 目录中。不建议编辑这些文件，但您可以通过在应用文件夹中放置同名文件来轻松覆盖它们。例如，要提供您自己的负责应用初始化的 main.js 脚本实现，只需将其从模板文件夹复制（或从头创建一个新文件）并放入应用文件夹中：

#

## 在无互联网连接时创建应用

要创建即用型桌面应用，App Manager需要互联网连接以从Soft8Soft服务器下载Electron构建文件。如果您没有或互联网连接受限（例如在代理或防火墙后面），您可以预先下载Electron构建文件，以便App Manager从本地文件中获取。

使用以下列表下载Electron二进制文件。根据目标平台，您可能只需要下载一个或多个。

- Windows (64-bit)
- Windows (ARM)
- Windows (32-bit)
- macOS (64-bit)
- macOS (Apple Silicon)
- Linux (64-bit)
- Linux (ARM)

将下载的Electron二进制文件复制到位于用户文件夹内的App Manager配置目录中。保持原样放入（不要解压！）：

- Windows — `AppData\Roaming\Soft8Soft\Product Name`
- macOS — `Library/Application Support/Product Name`
- Linux — `.config/product_name`

从现在起，App Manager将使用这些构建文件来创建桌面应用，而不是从互联网下载。

## 遇到问题？

欢迎您随时在 论坛上提问！您还可以加入中文用户社区QQ群(171678760)，在线寻求帮助。