Electron桌面端所见即所得-electron练习操场,快速上手electron

OBKoro1

image

突然让你开发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⭐️ 鼓励一下我们吧^_^~

阅读 3.8k

OBKoro1前端分享
浏览器节省时间防摸鱼插件(stop-mess-around) & 头部和函数注释VSCode插件(koroFileHeader) 等效率工具...

浏览器节省时间防摸鱼插件(stop-mess-around) & 头部和函数注释VSCode插件(koroFileHeader)

6.6k 声望
0 粉丝
0 条评论
推荐阅读
Chrome插件:奋斗逼、卷王必备,用于减少摸鱼时间和频率
减少摸鱼的时间和频率的Chrome插件:在上班/学习期间很容易下意识的打开摸鱼网站,插件帮助我们减少摸鱼的时间和频率,提高我们上班和学习的效率,节省时间用于学习提升自己或者享受生活。

OBKoro12阅读 2.8k评论 3

封面图
如何使用 React 和 Monaco Editor 实现 Web 版 VSCode?
本项目是 React 基于 Monaco Editor 实现的 Web VSCode Demo,它的主要功能是允许在浏览器中编写 TypeScript/JavaScript 并直接运行,除此之外,它还包含如下功能:

破晓L4阅读 639

嘿,vue中keep-alive有个「大坑」你可能还不知道
背景是这样的,我们使用vue2开发一个在线客服使用的IM应用,基本布局是左边是访客列表,右边是访客对话,为了让对话加载更友好,我们将对话的路由使用<keep-alive>缓存起来。但是如果将所有对话都缓存,未...

wuwhs3阅读 418

封面图
基于一段神奇的CSS渐变制作噪点效果
提及噪点效果,首先想到的就是以前的旧电视机信号不稳定时或者画面不稳定时的效果。如果你没有看过那种旧电视,可以看下面的gif动图,真实的情况噪点的变化速度会快很多,这里为了gif的大小,截取的时间较短供参考。

南城FE1阅读 320

封面图
低代码引擎半岁啦,来跟大家唠唠嗑...
之前低代码引擎一直是在阿里集团内部进行孵化的,对外开源算是一次新生。从2022年3月23日开源至今,我们的低代码引擎已经半岁了,希望借这个机会来跟大家唠唠嗑。

阿里巴巴终端技术6阅读 1.1k评论 5

封面图
浅谈业务中台前端设计
做前端中台业务一年多的时间,有一些心得体会,和大家分享分享。中台是什么中台业务的价值是什么做了哪些前端中台业务如何设计前端中台业务未来展望中台是什么百度百科的解释比较言简意赅:“中台,互联网术语,一...

趁你还年轻2阅读 317

浏览器渲染原理(一文搞懂)
浏览器渲染原理前言浏览器的主要功能总结起来就是一句话:将用户输入的 URL 转变成可视化的图像。从 URL 到 DOM 树;从 DOM 树到可视化图像;这两个过程之间的关系并没有那么明确,我们可以统称这两个过程为页面...

风不识途1阅读 786

浏览器节省时间防摸鱼插件(stop-mess-around) & 头部和函数注释VSCode插件(koroFileHeader)

6.6k 声望
5.3k 粉丝
宣传栏