Electron入门：快速上手指南

Electron如今广受开源开发者、初创企业及传统公司的青睐，成为主流的跨平台桌面应用开发工具。今天，让我们一起开启Electron的学习之旅。

1、 Electron 是由 GitHub 公司开发的跨平台桌面应用框架。

2、 Electron 是由 GitHub 公司开发的跨平台桌面应用框架。

3、 Electron 是一个开源的桌面应用开发框架。

4、 Electron 是一个开源框架，支持使用 HTML、CSS 和 JavaScript 开发跨平台桌面应用。

5、 Electron通过将Chromium渲染引擎与Node.js运行时结合，使开发者能用HTML、CSS和JavaScript开发应用，并打包成可在Windows、macOS和Linux上原生运行的桌面程序。

6、 其核心原理是将Chromium浏览器引擎与Node.js运行环境深度融合，构建统一的跨平台运行时；再通过打包工具，将Web技术开发的应用原生封装为适用于macOS、Windows及Linux系统的桌面程序。

7、 Electron于2013年发布，旨在让Web开发者能用HTML、CSS和JavaScript构建跨平台桌面应用。

8、 Electron于2013年为开发Atom编辑器而创建，二者均在2014年春季正式开源。Atom是由GitHub推出的、支持高度自定义与编程扩展的开源文本编辑器。

9、 历史渊源

10、 2013年4月，Atom Shell项目正式启动。

11、 2014年5月，Atom Shell正式开源。

12、 2015年4月，Atom Shell 正式更名为 Electron。

13、 2016年5月，Electron正式发布其1.0.0版本。

14、 Electron目前的流行程度如何？

15、 如今，Electron已被广泛应用于开源社区、初创企业及传统大型公司，成为主流的跨平台桌面应用开发工具。

16、 目前Electron由哪些开发者或团队负责维护与支持？

17、 Electron 目前由 GitHub 上的一个核心团队联合全球众多活跃贡献者共同维护。这些贡献者既有独立开发者，也有来自微软、GitHub、Slack 等知名科技企业的工程师，他们均深度参与 Electron 的开发与优化工作。

18、 Electron新版本通常每季度发布一次。

19、 Electron版本更新频繁，通常在Chromium或Node.js发布重要漏洞修复、新增API功能或进行大版本升级时，同步推出新版本，以确保底层技术栈的稳定性与先进性。

20、 通常，Chromium发布新稳定版后一至两周内，Electron便会同步升级其内置的Chromium版本，实际更新时间视适配与测试等整体工作量而定。

21、 Electron通常在Node.js发布新稳定版约一个月后更新内置的Node.js版本，实际升级时间视具体适配工作量而定。

22、 Electron的核心理念是使用Web技术构建跨平台桌面应用。

23、 Electron致力于精简体积，同时确保长期稳定、可持续的开发与维护。

24、 如：

25、 为控制安装包体积并保障长期可持续开发，Electron严格限制核心依赖项目的数量，避免因过度引入第三方库和API而导致系统臃肿与维护困难。

26、 例如，Electron仅集成Chromium的渲染引擎，并未采用其全部功能模块。这种精简设计简化了Chromium版本的升级流程，但同时也导致Electron无法支持Chrome浏览器中部分特有的网页功能与扩展能力，如某些安全机制、同步服务及内置工具等，使其在浏览器兼容性与功能完整性方面存在一定局限。

27、 Electron新增功能应优先采用原生API实现，同时尽可能将功能封装为独立的Node.js模块，以提升可复用性、可维护性及与生态的兼容性。

28、 Electron当前最新版本是多少？

29、 截至2018年5月2日，Electron最新正式版本为2.0.0。

30、 方式一：使用npm安装

31、 使用 npm 安装较为简便，但需注意 npm 是随 Node.js 一同安装的包管理工具。

32、 请先安装 Node.js，若尚未安装，可参考我另一篇相关教程。

33、 Node.js安装及基础使用

34、 安装完 Node.js 后，即可通过命令行安装 Electron。

35、 提醒：

36、 在国内通过 npm 安装 Electron 可能较慢，建议使用 cnpm（基于淘宝镜像），安装速度更快。cnpm 安装命令为：`npm install -g cnpm --registry=https://registry.npmmirror.com`。

37、 安装完成后，运行cnpm -v命令，若显示版本号，则说明安装成功。

38、 使用 cnpm 安装 Electron 与使用 npm 基本一致，只需将命令中的 npm 替换为 cnpm，安装流程、效果及依赖管理方式均无实质差异。

39、 请运行命令：cnpm install -g cnpm --registry=https://registry.npm.taobao.org，以全局安装 cnpm 并指定淘宝 NPM 镜像源。

40、 安装 cnpm 并非必需，你完全可以直接使用 npm 安装 Electron。

41、 方式二：直接下载 Electron 的压缩包进行使用。

42、 具体安装方法详见我另一篇文章，内容清晰详尽。

43、 安装 Electron 最简便的方式

44、 Electron 应用的项目目录结构

45、 Electron 应用的典型目录结构大致如下：

46、 主要需三个文件，下面分别说明各文件的作用。

47、 package.json 文件用于定义和描述 Electron 项目的元数据与配置信息。

48、 index.html 是网页的主文件，也是将被封装为桌面应用程序的核心页面。

49、 main.js负责创建应用窗口、加载网页UI界面，并同步处理系统时间功能。

50、 打造一款功能完备的Electron桌面应用

51、 需依次创建三个文件：package.json、index.html 和 main.js。

52、 首先创建 package.json 文件，用于描述项目基本信息，其基本结构如下：

53、 {

54、 }

55、 name代表项目名称，version代表项目版本。

56、 main是应用程序的启动脚本，运行于主进程之中。

57、 进程相关内容留待文末详述，此处暂不展开。

58、 注意：

59、 `package.json` 文件中最后一个键值对的值后不可加逗号，否则会导致解析错误。

60、 此处特指配置项中main键对应的值main.js。

61、 若 package.json 中未声明 main 字段，Electron 将默认优先加载项目根目录下的 index.js 文件作为主进程入口。

62、 接下来，我们创建 main.js 文件。

63、 用于创建窗口并嵌入网页UI，同时管理与同步系统时间。

64、 代码如下

65、 app 是 Electron 中用于管理应用程序生命周期的核心模块。

66、 BrowserWindow 是 Electron 提供的用于创建原生浏览器窗口的核心模块。

67、 需全局保留对 window 对象的引用，否则 JavaScript 执行完毕后可能被垃圾回收机制回收。

68、 窗口将自动关闭。

69、 所有窗口关闭后，程序自动退出。

70、 在 macOS 系统中，用户通常需主动按下 Command + Q 才能退出应用程序。

71、 应用将保持运行状态

72、 }

73、 });

74、 当Electron完成初始化并准备好创建浏览器窗口时

75、 该方法将被调用

76、 创建浏览器窗口

77、 加载应用程序的主页面index.html

78、 打开开发者工具

79、 窗口关闭时会触发此事件。

80、 若应用支持多窗口，需解除对 window 对象的引用。

81、 通常将多个窗口对象存储在一个数组中。

82、 但这一次并非如此。

83、 });

84、 });

85、 我们创建用于展示内容的 index.html 文件。

86、 代码如下

87、 所需文件已全部创建完成。

88、 程序启动，主要分为两种运行方式。

89、 方法一

90、 请进入 electron-app 项目目录，在命令行中执行 `electron .` 命令，应用即可启动运行。

91、 所示

92、 方法一

93、 在命令提示符中输入electron，即可启动并显示 Electron 应用窗口。

94、 所示，先复制框中 electron.exe 的完整路径，再在其后加一个空格，接着输入你的 Electron 应用程序所在目录的路径，最后回车即可启动运行。

95、 我电脑上的命令如此，但每台电脑的配置不同，命令也会有所差异。

96、 程序随即启动运行。

97、 注意：

98、 若直接下载Electron压缩包运行，弹出的窗口界面可能略有不同。此时，您只需将main.js文件拖拽至Electron窗口中，即可立即启动应用。

99、 安装 electron-packager 工具，用于应用程序打包。

100、 在当前项目目录中运行打包命令。

101、 执行命令后，项目目录下将生成名为outName的文件夹，其中包含打包完成的桌面应用程序。

102、 此时，只需运行appName.exe即可启动该桌面应用程序。

103、 所示

104、 如需详细了解这些打包参数，请参阅我另一篇说明文章。

105、 快速打包 Electron 应用程序

106、 可借助Grunt工具对Electron应用进行打包，生成Windows平台的exe安装程序。

107、 步骤如下

108、 新建一个 package.json 文件。

109、 安装 grunt-electron-installer 插件。

110、 安装 Grunt 构建工具

111、 创建一个新的Gruntfile.js文件。

112、 运行 Grunt 进行项目打包

113、 新建一个package.json文件，并填入相应内容。

114、 {

115、 }

116、 安装 grunt-electron-installer 插件。

117、 运行命令：cnpm install grunt-electron-installer --save-dev，以安装 Electron 打包工具作为开发依赖。

118、 安装 Grunt 构建工具

119、 运行命令：cnpm install grunt -g && cnpm install grunt -D

120、 创建一个新的Gruntfile.js文件。

121、 代码见下

122、 }

123、 }

124、 })

125、 运行 Grunt 命令，打包生成安装包。

126、 所有准备工作就绪后，只需在outName目录中运行grunt命令即可。

127、 执行过程中，建议关闭360、电脑管家、金山毒霸等安全软件，以免影响正常运行。

128、 打包完成后，installer文件夹将生成于outName目录中，具体位置所示。

129、 Setup.exe 是软件的安装程序包。

130、 好的，Electron入门教程到此结束。