Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist 你也可以重命名帮助应用程序以避免在应用程序监视器中显示 Electron Helper ，但是请确保你已经修改了帮 助应用的可执行文件的名字。 一个改过名字的应用程序的构造可能是这样的： 1. MyApp.app/Contents 2. ├── 使用 asar 包中的一个模块： 1. require('/path/to/example.asar/dir/module.js'); 你也可以使用 BrowserWindow 来显示一个 asar 包里的 web 页面： 1. const BrowserWindow = require('electron').BrowserWindow; 2. var win = new pector.js 在 Chrome 中打开 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858 5. 打开 Electron 的调试模式 6. 使用 Electron 开启 node-inspector 服务 7. 加载调试器界面 主进程调试 - 21 - 本文档使用 书栈(BookStack.CN) 构建 引自ChromeDriver

后端：挣钱养家 的 Node.js 负责：实现业务逻辑 注： Node.js 是 Javascript 的⼀个 Web Server 前端：貌美如花 的 Chromium 负责：显示内容 注：可以看成 Chromium 是 Chrome 的浏览器的内核实现 可把Electron看成 ⼀个被 JavaScript 控制的，精简版的 Chromium 浏览器 ⼀个 Node + JS ）天⽣适合⻚⾯信息展示 Electron简介 5 截图 对⽐其他技术：很多是基于各种图形库开发出的桌⾯应⽤，很多颜值⼀般 界⾯统⼀ Win / Mac / Linux 中显示效果⼏乎完全⼀样 典型例⼦：VSCode 对⽐其他技术：界⾯效果多数不太⼀样 开发难度低 = ⼊⻔快 = 上⼿⽅便 = 像开发⽹站⼀样开发（跨平台桌⾯）应⽤ ⽐传统⽅式要简单很多 说明 多⽪肤实时切换： 集装箱船 任意放⼤缩⼩ 拖动： 应⽤举例 12 应⽤举例 13 应⽤举例 14 应⽤举例 15 html5 ⽹⻚版 安卓版： 应⽤举例 16 增加了Web 3D显示，放⼤缩⼩旋转拾取： 主界⾯功能布局做了调整： 窗⼝折叠： 应⽤举例 17 crifan.com，使⽤署名4.0国际(CC BY 4.0)协议发布 all right reserved，powered

preventDefault(); }); 效果如下： 创建托盘并添加菜单操作 禁⽤双击（MacOS 系统不⽀持双击操作） 菜单栏⽀持操作：关于产品、显示、退出 MacOS 默认是左单击打开菜单栏、Windows 是右单击打开菜单栏 Windows 左单击显示界⾯ let tray = null; const createTray = () => { const trayIco = nativeImage '关于产品', role: 'about', }, { type: 'separator' }, { label: '显示', click: () => { if (!mainWindow.isVisible()) { mainWindow.show(); theme has changed nativeTheme.on('updated', () => tray && tray.setImage(getTrayIcon())); 托盘其他场景 显示未读消息数 tray.setTitle('6') ; 有未读消息时图标闪动：通过 setImage 定时轮询切换图标实现 注意事项 MacOS 全屏退出界⾯是会出现⿊屏问题，解决⽅案