Electron桌面端所见即所得-Electron练习生

简介: 突然让你开发Electron应用,你能hold住吗?如果领导突然说需要开发一款前端桌面端应用,那么对于我们前端er来说选择Electron是一件顺理成章的事情。但事实上很多同学对于Electron都不太了解和熟悉。如果突然让我们去开发Electron应用,很多人都会陷入迷茫和懵逼的状态。然后在依靠网上相对较少的资料,慢慢摸索、一路踩坑的完成Electronn的需求。为了解决上述问题,我们完成了一个项目,并把它开源了出来, 希望能够对大家学习Electron有点帮助。快速学习和上手Electron: electron-playgroundelectron-playground是我司(好

image.png

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

image.png

项目demo操作的gif演示

dialog: 消息提示与确认

image.png

dialog: 选择文件

image.png

流程图

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

image.png


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

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

electron-playground列表分类

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

electron-playground列表分类截图

image.png

演练场

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

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

image.png

如何启动

electron-playground启动流程如下:

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

欢迎下载学习/体验

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


目录
相关文章
|
1月前
|
JSON JavaScript 前端开发
开发桌面程序-Electron入门
【10月更文挑战第16天】Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架,嵌入了 Chromium 和 Node.js。本文介绍了如何搭建 Electron 开发环境,包括安装 Node.js、创建项目、配置 main.js 和打包应用。通过简单的步骤,你可以快速创建并运行一个基本的 Electron 应用程序。
开发桌面程序-Electron入门
|
6月前
|
资源调度 JavaScript 前端开发
IM跨平台技术学习(十一):环信基于Electron打包Web IM桌面端的技术实践
这次借着论证 Web IM端 SDK 是否可以在 Electron 生成的桌面端正常稳定使用,我决定把官方新推出的 webim-vue3-demo,打包到桌面端,并记录了这次验证的过程以及所遇到的问题和解决方法。
105 2
|
5月前
|
前端开发
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
|
7月前
|
移动开发 开发框架 JavaScript
Vue3 Vite electron 开发桌面程序
Vue3 Vite electron 开发桌面程序
348 0
|
7月前
|
开发框架 前端开发 Linux
前端知识笔记(二十四)———快速创建桌面端(electron-egg)
前端知识笔记(二十四)———快速创建桌面端(electron-egg)
342 0
|
7月前
|
前端开发 数据可视化 iOS开发
基于electron快速将任意网站打包成跨平台的桌面端软件
基于electron快速将任意网站打包成跨平台的桌面端软件
238 1
|
JavaScript 前端开发 Linux
Vue.js + Electron 的跨平台桌面应用程序开发
本文介绍了 Vue.js 和 Electron 的基本特点和原理,并分析了它们在桌面应用程序开发中的优势和应用场景。在基于 Vue.js 和 Electron 的桌面应用程序开发实践中,本文详细介绍了项目的搭建和配置,包括环境的准备、项目的初始化和依赖的安装等步骤。然后,本文介绍了使用 Vue.js 进行界面设计和组件开发的方法,并提供了相关的示例代码和实现细节。接下来,本文探讨了 Electron 主进程和渲染进程的开发,包括窗口管理、文件系统访问和与底层系统交互等方面的内容。最后,本文对基于 Vue.js 和 Electron 的桌面应用程序开发做出了总结,并展望了未来的发展方向和应用前景
849 2
|
缓存 监控 JavaScript
IM跨平台技术学习(九):全面解密新QQ桌面版的Electron内存优化实践
本文我们将和大家分享新版 QQ 在内存优化方面的探索和阶段性优化进展。虽然本文的讨论主要集中在 Windows 平台,但由于 Electron 的跨平台特性,大部分优化措施也同样适用于 macOS 和 Linux 平台。
240 0
|
前端开发 Linux iOS开发
IM跨平台技术学习(八):新QQ桌面版为何选择Electron作为跨端框架
在瞬息万变的互联网行业中,年过二十四的即时通讯IM应用 QQ 堪称超长寿的产品,见证了中国互联网崛起的完整历程。 然而,如今这个元老级产品经历了一次从内到外彻底的重构。在这次重构中,QQ 选择了 Electron 作为 UI 跨平台开发框架。 尽管 Electron 被 Slack、Visual Studio Code 和 Discord 等大型产品广泛使用,但也引发了一些网友的担忧,例如内存占用、安装包体积和启动速度等方面的问题。本文内容整理自 QQ 技术团队的采访,我们一起来看看QQ团队选择Electron作为桌面版跨端框架背后的决策与思考。
491 0
|
前端开发 JavaScript API
React使用Electron开发桌面端
React是一个流行的JavaScript库,用于构建Web应用程序。结合Electron框架,可以轻松地将React应用程序打包为桌面应用程序。以下是使用React和Electron开发桌面应用程序的步骤:
React使用Electron开发桌面端