家好，我是 Echa。

Electron 是一個基于 Chromium 和 Node.js，使用 HTML、CSS 和 JavaScript 構建跨平臺應用的跨平臺開發框架，兼容 Mac、Windows 和 Linux。有很多知名的項目，比如 VS Code 和 Atom 都是使用 Electron 構建的。下面就來分享 12 個使用 Electron 構建的開源跨平臺桌面項目，創作不易，喜歡的老鐵們加個關注，點個贊，速速收藏，謝謝！

全文大綱：

1. windows95： Electron 中的 Windows 95；
2. drawio-desktop：圖表和白板桌面應用；
3. MarkText：簡單而優雅的開源 Markdown 編輯器；
4. Trilium：分層的筆記應用，專注于建立大型個人知識庫；
5. Joplin：筆記和待辦事項應用；
6. lx-music-desktop：基于 Electron 17 + Vue 3 的音樂軟件；
7. YesPlayMusic：高顏值的第三方網易云播放器；
8. Cider：全新跨平臺 Apple Music 體驗；
9. ZY Player：跨平臺桌面端視頻資源播放器；
10. Nylas Mail：可擴展的郵件客戶端；
11. PicGo：用于上傳圖片并獲取圖片 URL 鏈接的工具；
12. Awesome Electron：Electron 開發資源匯總；

1. windows95

electronjs官方網址：https://www.electronjs.org/

Github：https://github.com/felixrieseberg/windows95

這是一個運行在 Electron 中的 Windows 95，可以在macOS、Linux 和 Windows 上運行。

如下圖：

2. drawio-desktop

electronjs官方網址：https://www.electronjs.org/

Github：https://github.com/jgraph/drawio-desktop

drawio-desktop 是一個基于 Electron 的圖表和白板桌面應用，其可以用于繪制流程圖、類圖、組織結構圖、泳道圖、E-R圖等，模板豐富。

如下圖：

3. MarkText

Github：https://github.com/marktext/marktext

MarkText 是一個簡單而優雅的開源 Markdown 編輯器，專注于速度和可用性。MarkText 具有簡單明了的界面，并支持實時預覽，讓用戶可以獲得無干擾的寫作體驗。其支持各種主題，并支持多種筆記模式，可以輸出 HTML 和 PDF 文件等。MarkText 支持在 MACOS、Windows、Linux 系統使用。

如下圖：

4. Trilium

Github：https://github.com/zadam/trilium

Trilium是作為桌面應用程序（Linux和Windows）或服務器上托管的Web應用程序（Linux）提供的。Mac OS桌面版本可用，但不受支持。

如果要在桌面上使用Trilium，請從最新版本下載適用于您平臺的二進制版本，解壓縮該軟件包并運行trilium可執行文件。

如果要在服務器上安裝Trilium，請遵循此頁面。

當前僅支持（經過測試）最新的Chrome和Firefox瀏覽器。

特性

• 筆記可以排列成任意深的樹。單個筆記可以放在樹中的多個位置
• 豐富的所見即所得筆記編輯功能，包括帶有markdown自動格式化功能的表格，圖像和數學
• 支持編輯使用源代碼的筆記，包括語法高亮顯示
• 筆記之間快速導航，全文搜索和筆記掛起
• 無縫筆記版本控制
• 筆記屬性可用于筆記組織，查詢和高級腳本編寫
• 同步與自托管同步服務器
• 具有按筆記粒度的強大的筆記加密
• 關系圖和鏈接圖，用于可視化筆記及其關系
• 腳本-請參閱高級展示
• 可用性和性能均能很好地擴展至超過10萬個筆記本
• 針對智能手機和平板電腦進行觸摸優化的移動前端
• 夜間主題
• Evernote和Markdown導入導出
• Web Clipper可輕松保存Web內容

如下圖：

5. Joplin

官方網址：https://joplinapp.org/plans/

Github：https://github.com/laurent22/joplin

Joplin是一個免費的開源筆記和待辦事項應用程序，它可以處理整理成筆記本的大量筆記。筆記是可搜索的，可以直接從應用程序或從您自己的文本編輯器復制、標記和修改。注釋采用Markdown格式。

從Evernote導出的筆記可以導入Joplin，包括格式化的內容（轉換為Markdown）、資源（圖像、附件等）和完整的元數據（地理位置、更新時間、創建時間等）。也可以導入純Markdown文件。

筆記可以使用端到端加密與各種云服務安全同步，包括Nextcloud、Dropbox、OneDrive和Joplin cloud。

在所有平臺上都可以進行全文搜索，以快速找到您需要的信息。該應用程序可以使用插件和主題進行定制，您也可以輕松創建自己的應用程序。

該應用程序適用于Windows、Linux、macOS、Android和iOS。Firefox和Chrome也可以使用Web Clipper來保存瀏覽器中的網頁和屏幕截圖。

如下圖：

6. lx-music-desktop

官方文檔：https://lxmusic.toside.cn/

Github：https://github.com/lyswhut/lx-music-desktop

lx-music-desktop 是一個基于 Electron 17 + Vue 3 的音樂軟件。其支持在Windows、Mac OS、Linux、Android 平臺上運行。

如下圖：

7. YesPlayMusic

官方網址：https://music.qier222.com/

Github：https://github.com/qier222/YesPlayMusic

YesPlayMusic 是一個高顏值的第三方網易云播放器，支持 Windows / macOS / Linux。其具有以下特性：

• 使用 Vue.js 全家桶開發
• 網易云賬號登錄（掃碼/手機/郵箱登錄）
• 支持 MV 播放
• 支持歌詞顯示
• 支持私人 FM / 每日推薦歌曲
• 每日自動簽到（手機端和電腦端同時簽到）
• Light/Dark Mode 自動切換
• 支持 Touch Bar
• 支持 PWA，可在 Chrome/Edge 里點擊地址欄右邊的 ? 安裝到電腦
• 支持 Last.fm Scrobble
• 支持音樂云盤
• 自定義快捷鍵和全局快捷鍵
• 支持 Mpris

如下圖：

8. Cider

官方網址：https://docs.cider.sh/

Github：https://github.com/ciderapp/Cider

基于 Electron 和 Vue.js 的全新跨平臺 Apple Music 體驗，從頭開始編寫，同時兼顧性能和視覺效果。

如下圖：

9. ZY Player

Github：https://github.com/Hunlongyu/ZY-Player

ZY Player 是一個跨平臺桌面端視頻資源播放器，其具有以下特性：

• 全平臺支持：Windows、Mac、Linux
• 支持 IPTV, 衛視直播
• 視頻源支持自定義, 支持導入, 導出
• 支持海報模式和列表模式瀏覽資源
• 播放歷史, 自動跳轉歷史進度
• 收藏夾支持導入,導出, 支持同步追劇
• 支持精簡模式, 摸魚劃水
• 一鍵搜索所有資源, 支持歷史搜索記錄
• 導出資源下載鏈接
• 支持第三方播放器播放
• 顯示豆瓣評分

如下圖：

10. Nylas Mail

Github：https://github.com/nylas/nylas-mail

Nylas Mail 是一個使用 Electron、React 和 Flux 構建的開源、可擴展的郵件客戶端。它被設計為易于擴展，并且有許多第三方插件可以為客戶端添加功能。其兼容上百種郵件提供商，作為桌面應用它可以離線運行。適用于 Mac, Windows 和 Linux。

如下圖：

11. PicGo

Github：https://github.com/Molunerfinn/PicGo

PicGo: 一個用于快速上傳圖片并獲取圖片 URL 鏈接的工具

PicGo 本體支持如下圖床：

• 七牛圖床 v1.0
• 騰訊云 COS v4\v5 版本 v1.1 & v1.5.0
• 又拍云 v1.2.0
• GitHub v1.5.0
• SM.MS V2 v2.3.0-beta.0
• 阿里云 OSS v1.6.0
• Imgur v1.6.0
• 本體不再增加默認的圖床支持。你可以自行開發第三方圖床插件。詳見 PicGo-Core。
• 特色功能
• 支持拖拽圖片上傳
• 支持快捷鍵上傳剪貼板里第一張圖片
• Windows 和 macOS 支持右鍵圖片文件通過菜單上傳 (v2.1.0+)
• 上傳圖片后自動復制鏈接到剪貼板
• 支持自定義復制到剪貼板的鏈接格式
• 支持修改快捷鍵，默認快速上傳快捷鍵：command+shift+p（macOS）| control+shift+p（Windows\Linux)
• 支持插件系統，已有插件支持 Gitee、青云等第三方圖床
• 更多第三方插件以及使用了 PicGo 底層的應用可以在 Awesome-PicGo 找到。歡迎貢獻！
• 支持通過發送 HTTP 請求調用 PicGo 上傳（v2.2.0+)
• 更多功能等你自己去發現，同時也會不斷開發新功能
• 開發進度可以查看 Projects，會同步更新開發進度

如下圖：

12. Awesome Electron

Github：https://github.com/sindresorhus/awesome-electron

Awesome Electron 是使用 Electron 創建應用的有用資源。包含文章、圖書、視頻、播客、文檔、工具等資源。

介紹

一個基于 vue、Echart 框架的大數據可視化（大屏展示）模板，提供數據動態刷新渲染、屏幕適應、內部圖表自由替換、Mixins注入等功能。

開源地址

https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search

項目展示

項目使用

1. 如何啟動項目需要提前安裝好nodejs與npm,下載項目后在項目主目錄下運行npm/cnpm install拉取依賴包，然后使用 vue-cli 或者直接使用命令npm run serve，就可以啟動項目，啟動項目后需要手動全屏（按 F11）。
2. 如何請求數據現在的項目未使用前后端數據請求，建議使用 axios 進行數據請求，在 main.js 位置進行全局配置，在 views/xx.vue 文件里進行前后端數據請求。

3. 如何動態渲染圖表在components/echart下的文件，比如drawPie()是渲染函數，echartData是需要動態渲染的數據，當外界通過props傳入新數據，我們可以使用watch()方法去監聽，一旦數據變化就調用this.drawPie()并觸發內部的.setOption函數，重新渲染一次圖表。

4. 如何復用圖表組件因為 Echart 圖表是根據id/class去獲取 Dom 節點并進行渲染的，所以我們只要傳入唯一的 id 值與需要的數據就可以進行復用。如中間部分的任務通過率與任務達標率組件就是采用復用的方式。

5. 如何更換邊框邊框是使用了 DataV 自帶的組件，只需要去 views 目錄下去尋找對應的位置去查找并替換就可以，具體的種類請去 DavaV 官網查看 如：

6. 如何更換圖表直接進入 components/echart 下的文件修改成你要的 echarts 模樣，可以去echarts 官方社區里面查看案例。
7. Mixins 注入的問題使用 mixins 注入解決了圖表重復書寫響應式適配的代碼，如果要更換(新增)圖形，需要將echarts.init()函數賦值給this.chart，然后 mixins 才會自動幫你注入響應式功能。
8. 屏幕適配問題本項目借助了 flexible 插件，通過改變 rem 的值來進行適配，原設計為 1920px。 ，適配區間為：1366px ~ 2560px，本項目有根據實際情況進行源文件的更改，小屏幕（如:寬為 1366px）需要自己舍棄部分動態組件進行適配，如'動態文字變換組件'會影響布局，需要手動換成一般節點。

具體使用請移步https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search地址參考。

何把網頁上的內容用javascript來實現截圖？今天分享的html2canvas就可以。

介紹

在微信項目中經常會遇到動態生成海報的需求，Web前端合成圖片往往會使用canvas。canvas雖然強大，但用來合成海報非常繁瑣，一不小心就幾百行代碼了。而html2canvas.js是一款輕松地將HTML+CSS寫成的布局直接轉換成canvas，生成可保存分享的圖片。

特點

• 兼容現代瀏覽器，手機項目可放心大膽使用；
• 官網文檔清晰簡單，用法簡單支持npm/yarn和cdn引入，有充足的代碼例子；
• 支持部分常用的CSS屬性，配合圖片使用幾乎能滿足所有動態生成海報的需求。

使用體驗

這是一個把HTML的DOM結構根據所支持的CSS樣式生成canvas的js開源庫，CSS的寫法千變萬化，不同的布局有很多不同的寫法，因此html2canvas是不能100%還原網頁的樣式，因此不用用于像電腦屏幕截圖這樣的需求中。

使用的時候要注意查看所支持的CSS屬性，盡量使用這些屬性來寫布局，不支持的效果可以嘗試用圖片來實現。只要產品經理腦子在線，目測幾乎沒有什么海報需求是實現不了的。

官網是英文的，寫得很專業，谷歌翻譯閱讀無壓力。

免費使用說明

html2canvas 由開發者 Niklas von Hertzen 創建，基于MIT許可開源，可以免費使用在任何項目。

關注我，持續分享高質量的免費開源、免費商用的資源。

↓↓點【了解更多】查看本次分享的相關網址。