关于html: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、简书、开源中国、博客园账号。