家好，我是 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许可开源，可以免费使用在任何项目。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点【了解更多】查看本次分享的相关网址。