用Electron创建桌面应用程序

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

创建应用

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

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

因为其可用于多种系统平台，请参考如下备忘录下载您所需的版本：

None: 不安装任何二进制文件。使用NPM实用工具和下方说明继续构建应用。
Windows (64-bit): 64位Windows版，适用于Windows 7之后的系统。
macOS (64-bit): 系统版本高于macOS 10.10 (Yosemite)的Intel芯片Mac电脑。
macOS App Store (64-bit): 针对Mac应用商店的缩小版本。运行于系统版本高于macOS 10.10 (Yosemite)的Intel芯片Mac电脑。
Linux (64-bit): 64位Linux，例如Ubuntu, Fedora, OpenSuse 或 ARCH。
Windows (ARM): 在带有64位ARM处理器的设备上运行的Windows10。
macOS (ARM): 系统版本高于macOS 11（Big Sur）的苹果芯片（M1芯片）Mac电脑。
macOS App Store (ARM): 针对Mac应用商店的缩小版本。系统版本高于macOS 11（Big Sur）的苹果芯片（M1芯片）Mac电脑。
Linux (ARM): 64位ARM设备上的Linux。
Windows (32-bit): 32位Windows版，适用于Windows 7之后的系统。
Linux (32-bit): Linux ，32bit版本

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

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

运行您的应用

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

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

单击 更多信息 链接，然后点击 仍要运行 来启动您的应用。为避免此问题，特别是当您将您的工作分发到最终用户时，您必须签署应用。请参阅Electron文档的 code signing(代码签名) 部分。

美化

修改应用名称和图标

请参阅 Electron官方指南了解如何重命名您的应用二进制文件，以及指定自定义图标。

自定义菜单

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


        win.removeMenu();

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


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

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


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

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


    var 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文件的示例：

运行应用，您会得到以下内容：

使用NPM进行Electron高级开发实践

要使用Electron，您需要 npm 实用程序，它是node.js运行时的一部分。您可以参照如下说明安装 npm 。

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

遇到问题？

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