忽然让你开发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⭐️ 激励一下咱们吧^_^~