Electron.js 入门分享

1. Electron.js 入门分享

2. Electron 是什么？

3. “由Github开发，用HTML，CSS和JavaScript来构
建跨平台桌面应用程序的一个开源库。 Electron通
过将Chromium和Node.js合并到同一个运行时环境
中，并将其打包为Mac，Windows和Linux系统下的
应用来实现这一目的。”

4. 构件示意图

6. 类似竞品

7. QT & WPF

9. 最大竞争对手

10. NW.js

12. 应用展示

14. 主进程和渲染进程

15. “主进程，通常是名为main.js 的文件，是每个 Electron
应用的入口文件。它控制着整个 App 的生命周期，从
打开到关闭。 它也管理着系统原生元素比如菜单，菜
单栏，Dock 栏，托盘等。 主进程负责创建 APP 的每
个渲染进程。而且整个 Node API 都集成在里面。”

17. “渲染进程是你的应用内的一个浏览器窗口。在标准
的浏览器内，网页通常运行在一个沙盒环境中并且
被禁止使用本地资源。 然而 Electron 的用户在
Node.js 的 API 支持下可以在页面中和操作系统进
行一些低级别的交互。”

19. webview in Electron

20. 相当于 iframe 标签

22. 进程通讯

23. • IPC 提供了进程间的通讯。但它只能在主进程与渲染
进程之间传递信息
• 主进程和渲染进程各自拥有一个 IPC 模块
• IPC 提供同步和异步的通信方式

25. 喜闻乐见的环节

26. Hello World

27. 代码演示

28. 自定义菜单

30. 代码演示

31. 打开文件管理器

34. 代码演示

35. 打开外部网页

37. 代码演示

38. 调用系统弹窗

41. 代码演示

42. 复制&粘贴

44. 代码演示

45. 截屏

47. 代码演示

48. 坑

49. • 不支持 Cookie
• module、exports、require 要重写
• 某些依赖下载速度慢甚至下载失败
• 平台差异

50. 爬坑

52. 加速 Electron 安装

54. 解决网络问题报错

56. 应用更新

57. Squirrel！

58. 打包应用

59. • electron-packager
• electron-builder

60. Q&A