用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),在线寻求帮助。