基于Electron Vue的桌面应用开发实践 赵 帅 前端工程师 @美团点评-到店事业群 负责-度假业务系统⼯工程化 瓦匠桌⾯面应⽤用开发者 瓦匠应用的介绍 02 桌面应用的技术选型 桌面应用开发总结 01 04 Electron Vue项目实践 03 应⽤用介绍 瓦匠 瓦匠⼯工作台 ⼀一体化解决⽅方案 提⾼高开发效率 应⽤用介绍 背景概述 需求类型 CRUD⻚页⾯面 命令的调⽤用 ⼯工程搭建 模板注⼊入 构建部署 项⽬目配置 Web开发能⼒力力不不⾜足 命令⾏行行⽆无法可视化 （GUI界⾯面) 桌⾯面应⽤用 …… 瓦匠应用的介绍 02 桌面应用的技术选型 桌面应用开发总结 01 04 03 Electron Vue项目实践 优点：开发速度快，跨平台，更更新迭代快 缺点：集成Chromium，安装包⼤大 优点：接近Native性能，功能丰富，跨平台 技术选型 Electron应⽤用 VS Code， POSTMAN ✔ 技术选型 前端选型 体积⼩小、轻量量化 健全的⽣生态 优秀的组件化机制 ✔ 瓦匠应用的介绍 02 桌面应用的技术选型 桌面应用开发总结 01 04 03 Electron Vue项目实践 项⽬目实践 Electron原理理 两个核心 Main-process Render-process

目 录 致谢 向导 支持平台 分发应用 提交应用到 Mac App Store 打包应用 使用 Node 原生模块 主进程调试 使用 Selenium 和 WebDriver 使用开发人员工具扩展 使用 Pepper Flash 插件 使用 Widevine CDM 插件 教程 快速入门 桌面环境集成 在线/离线事件探测 API文档 简介 进程对象 支持的 感谢知识的创造者，感谢知识的分享者，也感谢每一位阅读到此处的读者，因为我们 都将成为知识的传承者。 致谢 - 4 - 本文档使用 书栈(BookStack.CN) 构建 支持平台 分发应用 提交应用到 Mac App Store 打包应用 使用 Node 原生模块 主进程调试 使用 Selenium 和 WebDriver 使用开发人员工具扩展 使用 Pepper Flash 插件 使用 Widevine Debian 8 支持的平台 macOS Windows Linux 支持平台 - 6 - 本文档使用 书栈(BookStack.CN) 构建 为了使用 Electron 部署你的应用程序，你存放应用程序的文件夹需要叫做 app 并且需要放在 Electron 的 资源文件夹下（在 macOS 中是指 Electron.app/Contents/Resources/ ，在 Linux

感谢我的⽼婆陈雪的包容理解和悉⼼照料，才使得我 crifan 有更多精⼒去专注技术专研和整理归纳出 这些电⼦书和技术教程，特此鸣谢。 更多其他电⼦书 本⼈ crifan 还写了其他 100+ 本电⼦书教程，感兴趣可移步⾄： crifan/crifan_ebook_readme: Crifan的电⼦书的使⽤说明 crifan.com，使⽤署名4.0国际(CC BY 4.0)协议发布 all right reserved，powered 新： 2020-08-09 10:12:44 打包和部署 25 打包和部署 26 Electron对python⽀持 Electron本身官⽹并没有⽀持Python。 不过⽹上有⼈给出了可⾏的⽅案： 英⽂ fyears/electron-python-example: Electron as GUI of Python Applications 中⽂翻译 ⽤ Electron 作为 bin/electron ./node_modules/.bin/electron 界⾯效果： python⽀持 30 测试zerorpc通信 再去测试zerorpc通信是否正常，Python代码是否可⽤： 打开某个终端去： python pycalc/api.py python pycalc/api.py 正常输出是： start running on tcp://127.0.0.1:4242

'radio' } ]) tray.setContextMenu(contextMenu) }) 基于托盘功能实现后台运⾏应⽤ 关闭应⽤前唤醒对话框⼆次确认 关闭应⽤时，触发对话框，可⽀持 3 种场景： 点击「取消」取消关闭操作； 点击「退出」，「后台运⾏」选中时，界⾯关闭，托盘不关闭，任务继续执⾏； 点击「退出」，「后台运⾏」不选中，界⾯、托盘关闭，直接退出，任务终⽌。 mainWindow