Electron桌面端所见即所得-Electron练习生

忽然让你开发Electron应用，你能hold住吗？

若是领导忽然说须要开发一款前端桌面端应用，那么对于咱们前端er来讲选择Electron是一件瓜熟蒂落的事情。但事实上不少同窗对于Electron都不太了解和熟悉。

若是忽然让咱们去开发Electron应用，不少人都会陷入迷茫和懵逼的状态。而后在依靠网上相对较少的资料，慢慢摸索、一路踩坑的完成Electronn的需求。

为了解决上述问题，咱们完成了一个项目，并把它开源了出来, 但愿可以对你们学习Electron有点帮助。

快速学习和上手Electron: electron-playground

electron-playground是我司(好将来集团晓黑板)前端团队近期开源的项目。

electron-playground项目的目的

帮助前端仔更好、更快的学习和理解前端桌面端技术Electron, 少走弯路。

electron-playrgound能为我学习Electron作什么

1. 带有gif示例和可操做的demo的教程文章。
2. 系统性的整理了Electron相关的api和功能。
3. 搭配演练场，本身动手尝试electron的各类特性。

下面我来具体介绍一下项目的内容。

项目演示

1. 带有gif示例和可操做的demo文章讲解

项目搭配一系列教程文章，这些文章都是通过踩坑验证、成体系化的内容，而且带有gif示例，和可操做的demo示例、流程图等内容。

项目自带的gif演示

menu: 添加菜单

项目demo操做的gif演示

dialog: 消息提示与确认

dialog: 选择文件

流程图

窗口管理-建立和管理窗口

系统性的整理了Electron相关的api和功能

electronn-playground系统性的整理了Electron的相关API和功能，以及关于工程化相关的内容。

electron-playground列表分类

• 工程化

  • 崩溃分析和收集
  • 开发调试
  • 打包问题
  • 应用更新

• 应用

  • 自定义协议
  • 系统提示和文件选择
  • 菜单
  • 系统托盘
  • 文件下载

• 窗口管理

  • 建立和管理窗口
  • 隐藏和恢复
  • 聚焦、失焦
  • 全屏、最大化、最小化
  • 窗口通讯
  • 窗口类型
  • 窗口事件

• 其余

  • 安全性

electron-playground列表分类截图

演练场

想要实现更复杂的操做，咱们参考fiddle建立了演练场。

演练场集成了vscode的web端编辑库：monaco-editor，编码体验接近vscode。

如何启动

electron-playground启动流程以下:

git clone https://github.com/tal-tech/electron-playground.git // 下载项目
npm install // 安装依赖
npm run start // 启动项目

欢迎下载学习/体验

electron-playground是一个经过尝试electron各类特性，使electron的各项特性所见即所得, 来达到咱们快速上手和学习electron的目的。

感兴趣的同窗能够下载一下项目，体验一下，但愿经过这个项目能够帮助你们更好、更快的学习和理解前端桌面端技术Electron, 少走弯路

若是以为还不错的话，就给个Star⭐️ 鼓励一下咱们吧~

咱们是晓黑板前端，欢迎关注咱们的 知乎、 Segmentfault、 CSDN、 简书、 开源中国、 博客园帐号。