致谢 向导 支持平台 分发应用 提交应用到 Mac App Store 打包应用 使用 Node 原生模块 主进程调试 使用 Selenium 和 WebDriver 使用开发人员工具扩展 使用 Pepper Flash 插件 使用 Widevine CDM 插件 教程 快速入门 桌面环境集成 在线/离线事件探测 API文档 简介 进程对象 支持的 Chrome remote webFrame 在两种进程中都可用的模块 clipboard crashReporter nativeImage screen shell 开发 代码规范 源码目录结构 与 NW.js（原 node-webkit）在技术上的差异 构建系统概览 构建步骤（macOS） 构建步骤（Windows） 构建步骤（Linux） 在调试中使用 Symbol Server 由 进击的皇虫 使用 书栈(BookStack.CN) 进行构建，生成于 2019- 03-06。 书栈(BookStack.CN) 仅提供文档编写、整理、归类等功能，以及对文档内容的生成和导出工具。 文档内容由网友们编写和整理，书栈(BookStack.CN) 难以确认文档内容知识点是否错漏。如果您在阅读文档 获取知识的时候，发现文档内容有不恰当的地方，请向我们反馈，让我们共同携手，将知识准确、高效且有效地传递

多窗⼝口 单窗⼝口 BrowserWindow BrowserWindow 业务1 业务2 适⽤用场景 IDE, IM等 业务1 业务2 特点：项⽬目协同开发，多任务处理理 适⽤用场景 ⼯工具，流程 特点：交互简单，通信⽅方便便 Vuex Render Process Main Process Render Process Main Process IPC、RPC Render signing 通讯
 ⼯工具 修复问题 ⼿手动构建、发布 修复问题 Unit Testing ✔ 版本管理理平台 测试 Electron应⽤用中遇到的问题和解决⽅方案 项⽬目实践 #1如何解耦业务逻辑 Node Path file Stream …… Native dialog Shell TouchBar …… ⻚页⾯面代码与业务逻辑混写，功能重复 Tiler协议 callback Page 跳转登录页 认证信息 携认证信息 重定向 当前域 种Cookie后重 定义 服务端 客户端 Electron跨域如何解决？ File协议与HTTP如何交互？ ⾃自定义协议是什什么？ App ->registerStandardSchemes tiler://index.html http:// SSO proxy RFC3986

Electron简介 Electron概述 所属技术领域： 跨平台的桌⾯端应⽤开发 谁开发的： Github 旧称： Atom Shell 历史 2013年作为构建Github上可编程的⽂本编辑器Atom的框架⽽被开发出来 2014春季这两个项⽬开源出来 ⼀句话描述：⼀个⽤纯Web技术来构建跨平台桌⾯应⽤程序的开源框架 Web技术： HTML 、 CSS 和 JavaScript 调⽤丰富的原⽣(操作系统) APIs 并将其打包为 Mac 、 Windows 和 Linux 系统下的应⽤ 架构 后端：挣钱养家 的 Node.js 负责：实现业务逻辑 注： Node.js 是 Javascript 的⼀个 Web Server 前端：貌美如花 的 Chromium 负责：显示内容 注：可以看成 Chromium 是 Chrome 的浏览器的内核实现 的浏览器的内核实现 可把Electron看成 ⼀个被 JavaScript 控制的，精简版的 Chromium 浏览器 ⼀个 Node. js 的变体 专注于桌⾯应⽤⽽不是 Web Server 端 使⽤ web ⻚⾯作为它的 GUI 主⻚ Electron | 使⽤ JavaScript，HTML 和 CSS 构建跨平台的桌⾯应⽤程序 竞品 nw.js 现状 已成为开源开发者、初创企业和⽼牌公司常⽤的开发⼯具

setContextMenu(contextMenu) }) 基于托盘功能实现后台运⾏应⽤ 关闭应⽤前唤醒对话框⼆次确认 关闭应⽤时，触发对话框，可⽀持 3 种场景： 点击「取消」取消关闭操作； 点击「退出」，「后台运⾏」选中时，界⾯关闭，托盘不关闭，任务继续执⾏； 点击「退出」，「后台运⾏」不选中，界⾯、托盘关闭，直接退出，任务终⽌。 mainWindow.on('close', preventDefault(); } }) e.preventDefault(); }); 效果如下： 创建托盘并添加菜单操作 禁⽤双击（MacOS 系统不⽀持双击操作） 菜单栏⽀持操作：关于产品、显示、退出 MacOS 默认是左单击打开菜单栏、Windows 是右单击打开菜单栏 Windows 左单击显示界⾯ let tray = null; ; }, }, ]); tray.setContextMenu(contextMenu); } createTray(); 根据操作系统类型和系统 Mode 定制托盘图标 MacOS ⽀持 light、dark 两种 mode，根据 mode 展示不同的图标： nativeTheme.shouldUseDarkColors