基于Electron Vue的桌面应用开发实践 赵 帅 前端工程师 @美团点评-到店事业群 负责-度假业务系统⼯工程化 瓦匠桌⾯面应⽤用开发者 瓦匠应用的介绍 02 桌面应用的技术选型 桌面应用开发总结 01 04 Electron Vue项目实践 03 应⽤用介绍 瓦匠 瓦匠⼯工作台 ⼀一体化解决⽅方案 提⾼高开发效率 应⽤用介绍 背景概述 需求类型 CRUD⻚页⾯面 Electron Vue项目实践 项⽬目实践 Electron原理理 两个核心 Main-process Render-process 应⽤用架构选型 项⽬目实践 BrowserWindow 多窗⼝口 单窗⼝口 BrowserWindow BrowserWindow 业务1 业务2 适⽤用场景 IDE, IM等 业务1 业务2 特点：项⽬目协同开发，多任务处理理 适⽤用场景 ⼯工具，流程 项⽬目实践 #1如何解耦业务逻辑 Node Path file Stream …… Native dialog Shell TouchBar …… ⻚页⾯面代码与业务逻辑混写，功能重复 升级Electron框架，修改成本⼤大 Vue Component 业务逻辑 NodeAPI NativeAPI Vue Component 业务逻辑 NodeAPI NativeAPI

JavaScript 调⽤丰富的原⽣(操作系统) APIs 并将其打包为 Mac 、 Windows 和 Linux 系统下的应⽤ 架构 后端：挣钱养家 的 Node.js 负责：实现业务逻辑 注： Node.js 是 Javascript 的⼀个 Web Server 前端：貌美如花 的 Chromium 负责：显示内容 注：可以看成 Chromium 是 Chrome 即可看到计算器的界⾯： python⽀持 32 ⾄此即在mac中跑通此处的 electron-python-example 了。 剩下的就是⾃⼰实现⾃⼰需要的逻辑和功能了。 打包和发布 在实现了⾃⼰的业务逻辑和功能后，再去打包和发布。 python的打包 先⽤ PyInstaller 打包： cd cd electron-python-example electron-python-example

提示。 你应该经常在这里为 open-file 和 open-url 设置监听器，并启动崩溃报告和自动更新。 在大多数的情况下，你应该只在 ready 事件处理器中完成所有的业务。 当 Electron 完成初始化时被触发。 当所有的窗口都被关闭时触发。 这个事件仅在应用还没有退出时才能触发。 如果用户按下了 Cmd + Q ，或者开发者调用了 app.quit()