目 录 致谢 向导 支持平台 分发应用 提交应用到 Mac App Store 打包应用 使用 Node 原生模块 主进程调试 使用 Selenium 和 WebDriver 使用开发人员工具扩展 使用 Pepper Flash 插件 使用 Widevine CDM 插件 教程 快速入门 桌面环境集成 在线/离线事件探测 API文档 简介 进程对象 支持的 CN) 仅提供文档编写、整理、归类等功能，以及对文档内容的生成和导出工具。 文档内容由网友们编写和整理，书栈(BookStack.CN) 难以确认文档内容知识点是否错漏。如果您在阅读文档 获取知识的时候，发现文档内容有不恰当的地方，请向我们反馈，让我们共同携手，将知识准确、高效且有效地传递 给每一个人。 同时，如果您在日常工作、生活和学习中遇到有价值有营养的知识文档，欢迎分享到 书栈(BookStack 本文档使用 书栈(BookStack.CN) 构建 支持平台 分发应用 提交应用到 Mac App Store 打包应用 使用 Node 原生模块 主进程调试 使用 Selenium 和 WebDriver 使用开发人员工具扩展 使用 Pepper Flash 插件 使用 Widevine CDM 插件 向导 - 5 - 本文档使用 书栈(BookStack.CN) 构建

安装 基本使⽤ 打包和部署 python⽀持 ⼼得 开发 Web技术 Log⽇志 打包 制作app的Logo asar files electron-builder electron-rebuild 不同系统 Win Mac 不同语⾔ Python electron-python-example js Node electron和node版本对应关系 NODE_MODULE_VERSION和node版本对应关系 附录 ⽂档和教程 参考资料 1 2 跨平台桌⾯应⽤框架：Electron 最新版本： v1.0 更新时间： 20200808 简介 介绍跨平台桌⾯应⽤框架Electron的基本概念、基本原理、核⼼优势以及额外特性；介绍了⽤Electron 开发出的常⻅应⽤有哪些；解释了如何安装Electron；以及如何快速上⼿使⽤；以及如何打包和部署； 的各种开发经验和⼼得， ⽐如开发⽅⾯的Web技术、Log⽇志等；打包⽅⾯的如何制作app的logo、asar加密压缩、files参数、 打包⼯具electron-builder、编译⼯具electron-rebuild等，以及常⻅的系统如Windows和Mac系统中常⻅ 问题和解决⽅案；以及不同语⾔，⽐如Python、js等的⽀持，整理了Node相关信息，最后附上相关⽂ 档和教程等资料。

Restart 项⽬目实践 开发和调试 webpack DevServer htttp:// localhost Electron Main Process webApp (Vue) 1 hotReload 2 2 watch-run webpack 3 Render Process file://static file 1 3 4 App 开发和调试 渲染进程：vue-devtools 更更新SDK 添加灰度版本和配置信息 配置信息 项⽬目实践 #3如何完成签名、⾃自动更更新 灰度发布 指定⼈人员发布 指定版本发布 项⽬目实践 #4如何定位和收集问题 Main Process Render Process Clinet Server CrashReporter Crash Log 客户端版本多，⽤用户崩溃信 息收集困难 崩溃⽐比率和出错版本，咨询 ⽤用户，提供信息较少 ⽤用户，提供信息较少 Crashed Crash监控上报 IM打通报警 Crash SDK 项⽬目实践 #4如何定位和收集问题 错误信息 瓦匠应用的介绍 02 桌面应用的技术选型 桌面应用开发总结 01 04 03 Electron Vue项目实践 Electron开发和Web开发差异 Web应⽤用 开发 设计 Electron应⽤用 html CSS JS Node.js

托盘（tray）实现后台执⾏⻓任务。 Electron 应⽤在执⾏⼀些⻓时间任务（⽐如上传、下载），我们想关闭界⾯后任务依旧执⾏。再次打开界⾯，依旧可以看到正在执⾏的任务以及任 务进度。托盘可以帮我们实现这个功能。 创建托盘和菜单示例 实例化 Tray 并传⼊图标路径； 创建菜单并配置到托盘中。 const { app, Menu, Tray } = require('electron') let tray }, }, ]); tray.setContextMenu(contextMenu); } createTray(); 根据操作系统类型和系统 Mode 定制托盘图标 MacOS ⽀持 light、dark 两种 mode，根据 mode 展示不同的图标： nativeTheme.shouldUseDarkColors 可以判断系统