![929a6a939b6e688366cf20fac5f312bb.png](https://i-blog.csdnimg.cn/blog_migrate/0f0b549e416c35aa55a58fccf239208e.jpeg)
今天给大家推荐一个一款前端桌面端应用——electron-playground项目,帮助前端仔更好、更快的学习和理解前端桌面端技术Electron, 少走弯路。
作者:OBKoro1
链接: https:// juejin.cn/post/69022300 39366991879
来源:掘金
如果领导突然说需要开发一款前端桌面端应用,那么对于我们前端er来说选择Electron是一件顺理成章的事情。但事实上很多同学对于Electron都不太了解和熟悉。
如果突然让我们去开发Electron应用,很多人都会陷入迷茫和懵逼的状态。然后在依靠网上相对较少的资料,慢慢摸索、一路踩坑的完成Electronn的需求。
为了解决上述问题,我们完成了一个项目,并把它开源了出来, 希望能够对大家学习Electron有点帮助。
快速学习和上手Electron: electron-playground
electron-playground是我司(好未来集团晓黑板)前端团队近期开源的项目。
electron-playground项目的目的
帮助前端仔更好、更快的学习和理解前端桌面端技术Electron, 少走弯路。
electron-playrgound能为我学习Electron做什么
- 带有gif示例和可操作的demo的教程文章。
- 系统性的整理了Electron相关的api和功能。
- 搭配演练场,自己动手尝试electron的各种特性。
下面我来具体介绍一下项目的内容。
项目演示
1. 带有gif示例和可操作的demo文章讲解
项目搭配一系列教程文章,这些文章都是经过踩坑验证、成体系化的内容,并且带有gif示例,和可操作的demo示例、流程图等内容。
项目自带的gif演示
menu: 添加菜单
![7cce22f381cf37bb74ffb08be2df5af7.png](https://i-blog.csdnimg.cn/blog_migrate/c38f277e627a83fe5b3590b822748fd0.jpeg)
项目demo操作的gif演示
dialog: 消息提示与确认
![830309daf0ccbe90420406bddde278ee.png](https://i-blog.csdnimg.cn/blog_migrate/d809bb53b3c509c441d80984fc9b83d1.png)
dialog: 选择文件
![40dfb2ff884fb71ead6c60ba4000bb67.png](https://i-blog.csdnimg.cn/blog_migrate/58c8a8ed5813a93a71bcd3ff7de1e25d.png)
流程图
窗口管理-创建和管理窗口
![bb8455c7acec4f4ada0a3f27f8f304e3.png](https://i-blog.csdnimg.cn/blog_migrate/e6cfa536cab0196ccacc1f4d7f84b40f.jpeg)
image
系统性的整理了Electron相关的api和功能
electronn-playground系统性的整理了Electron的相关API和功能,以及关于工程化相关的内容。
electron-playground列表分类
- 工程化
- 崩溃分析和收集
- 开发调试
- 打包问题
- 应用更新
- 应用
- 自定义协议
- 系统提示和文件选择
- 菜单
- 系统托盘
- 文件下载
- 窗口管理
- 创建和管理窗口
- 隐藏和恢复
- 聚焦、失焦
- 全屏、最大化、最小化
- 窗口通信
- 窗口类型
- 窗口事件
- 其他
- 安全性
electron-playground列表分类截图
![f8d64b7358e809d8091d3c18fd782a4c.png](https://i-blog.csdnimg.cn/blog_migrate/4b6acf5e135381a3f8f792f69f7eca08.jpeg)
演练场
想要实现更复杂的操作,我们参考fiddle创建了演练场。
演练场集成了vscode的web端编辑库:monaco-editor,编码体验接近vscode。
![eb49b780fcd85c7e2bd7f7aba2489654.png](https://i-blog.csdnimg.cn/blog_migrate/d163eda7100086875f368a4bd63f21c3.jpeg)
如何启动
electron-playground启动流程如下:
git clone https://github.com/tal-tech/electron-playground.git // 下载项目
npm install // 安装依赖
npm run start // 启动项目
复制代码
欢迎下载学习/体验
electron-playground是一个通过尝试electron各种特性,使electron的各项特性所见即所得, 来达到我们快速上手和学习electron的目的。
感兴趣的同学可以下载一下项目,体验一下,希望通过这个项目可以帮助大家更好、更快的学习和理解前端桌面端技术Electron, 少走弯路
如果觉得还不错的话,就给个Star⭐️ 鼓励一下我们吧_~
项目地址:https://github.com/tal-tech/electron-playground
最后,照旧安利一波我们的公众号:「终端研发部」,目前每天都会推荐一篇优质的技术相关的文章,主要分享前端和java技术与面试技巧,我们的目标是: 知道是什么,为什么,打好基础,做好每一点!这个主创技术公众号超级值得大家关注。