Electron桌面端所見即所得-electron-playground

忽然讓你開發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⭐️ 鼓勵一下咱們吧^_^~