Electron桌面端所见即所得

Stella981
• 阅读 971

突然让你开发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: 添加菜单

Electron桌面端所见即所得

项目demo操作的gif演示

dialog: 消息提示与确认

Electron桌面端所见即所得

dialog: 选择文件

Electron桌面端所见即所得

流程图

窗口管理-创建和管理窗口

Electron桌面端所见即所得

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

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

electron-playground列表分类

  • 工程化
    • 崩溃分析和收集
    • 开发调试
    • 打包问题
    • 应用更新
  • 应用
    • 自定义协议
    • 系统提示和文件选择
    • 菜单
    • 系统托盘
    • 文件下载
  • 窗口管理
    • 创建和管理窗口
    • 隐藏和恢复
    • 聚焦、失焦
    • 全屏、最大化、最小化
    • 窗口通信
    • 窗口类型
    • 窗口事件
  • 其他
    • 安全性

electron-playground列表分类截图

Electron桌面端所见即所得

演练场

想要实现更复杂的操作,我们参考fiddle创建了演练场。

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

Electron桌面端所见即所得

如何启动

electron-playground启动流程如下:

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

欢迎下载学习/体验

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

感兴趣的同学可以下载一下项目,体验一下,希望通过这个项目可以帮助大家更好、更快的学习和理解前端桌面端技术Electron, 少走弯路

如果觉得还不错的话,就给个Star⭐️ 鼓励一下我们吧~

我们是晓黑板前端,欢迎关注我们的知乎SegmentfaultCSDN简书开源中国博客园账号。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
菜鸟阿都 菜鸟阿都
3年前
electron:桌面应用程序的革命
“ 你也许不了解electron,但你应该了解或使用过atom、vscode、xminzend,没错他们所使用的开发技术就是electon,通过前端技术开发桌面应用程序,刚开始接触electron时,考虑最多的是性能问题,不过作为一个vscode、xminzen重度使用者的我来说,基本上对其性能的担心减少了很多,并且发现了基于vue框架构造electro
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
Electron开发跨平台桌面程序入门教程
最近一直在学习Electron开发桌面应用程序,在尝试了javaswing和FXjava后,感叹还是Electron开发桌面应用上手最快。我会在这一篇文章中实现一个HelloWord的应用程序,记录学习过程中的坑。Electron是什么呢?Electron可以让你使用纯JavaScript调用丰富的
Stella981 Stella981
3年前
Electron踩坑记录
心血来潮想做一个PC端应用,就来学学Electron,以下为学习Electron时的踩坑记录。心血来潮想做一个PC端应用,就来学学Electron,以下为学习Electron时的踩坑记录。安装在国内安装electron的时候,可能会因为网络原因遇到卡在Buildingfreshpackages...(yarn)或者是卡在nod
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这