用Electron创建桌面应用程序

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

创建应用

可以通过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二进制文件。根据目标平台，您可能只需要下载一个或多个。

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

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

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

遇到问题？

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