资讯动态

跨平台桌面便签开发实录:从Electron到Tauri的技术选型与踩坑指南

发布时间:2026/9/13 17:40:03 来源:尧图企业网站定制
跨平台桌面便签看起来是个小品类但真做起来复杂的程度远超预期。吐司便签Toast Notes是我花了几个月业余时间从零写的一款跨平台桌面便签待办应用目标只有一个在 Windows、macOS、Linux 上都能做到“双击就记、随手置顶、到期提醒”。如果你也在考虑做一个常驻系统托盘的桌面小工具或者正在纠结便签类应用的技术选型这篇从动机、选型、实现到踩坑的记录应该能帮你少走不少弯路。1. 从屏幕便利贴到自研应用这个项目到底想解决什么1.1 市面上不缺便签工具缺的是“刚刚好”的那个我大概属于那种桌面重度用户写代码要开一堆参考资料做方案要来回对需求临时电话里记个取件码、车牌号都是家常便饭。以前我的习惯是打开系统自带的便签Windows 用桌面的便笺macOS 用 Stickies用着用着就发现问题了——换台电脑便签没了。后来我也用过各类云笔记和在线文档笔记确实是云同步了但问题也来了工具太重。开一个在线文档要等半天记录一个“楼下快递柜取件码 8-3-502”这种几秒钟的事情根本不值得启动一个几百兆的编辑器。专业待办应用我也试过功能确实强大但需要建项目、分标签、设优先级配置本身变成了一种负担。对于一个便签来说这套仪式感太重了。我需要的功能其实很朴素双击就能记窗口永远贴在桌面某个角落颜色能够区分“紧急”“待办”“随手记”到了时间能弹个提醒。这样的工具在各平台上其实都有但很少有项目愿意把这几个需求同时做透。既然找不到“刚刚好”的那一个我决定自己做。1.2 “吐司”这个名字以及三个坚持的产品原则项目叫 Toast Notes中文名叫吐司便签。名字有两层意思一是 toast 在系统通知里的意思是“轻提示”和便签的定位吻合二是烤面包机把吐司弹出来的动作很利落我希望这个应用给人的感觉也是这样——轻快、不占资源、不打扰人。定了名字之后我给产品立了三条原则后面所有功能决策都围绕它们展开启动快不能在用户想记东西的时候还等它加载。不打扰默认不弹窗不推送提醒只在该提醒的时候出现。数据不绑架笔记数据得是用户自己能拿到的普通格式不能绝版在私有协议里。这三点直接影响了后续的技术选型和存储方案。比如“启动快”这一条就让我第一个否掉了 Electron 路线原因后面章节详说。2. 技术选型为什么在 2024 年我仍然放弃了 Electron2.1 三条主流跨平台路线的横向对比动手之前我在 Electron、Tauri、Qt 三条路线上纠结了很久。这里先按我的实测感受列一个对比数据以普通便签类工具的真实运行情况为参考不同业务场景会有差异。对比维度ElectronTauri 2.xQtQML安装包体积通常 60MB 起优化后 5-10MB打包后 30MB 左右空闲内存占用150-300MB30-60MB20-50MBUI 开发效率高Web 技术栈高Web 技术栈中等需学 QML系统托盘/全局快捷键成熟但偏重官方插件完善原生支持后端能力Node.jsRustC分发自更新electron-builder 成熟内置 bundler多平台支持原生打包工具链复杂可以看到Electron 在生态上依然是最成熟的但它的内存占用对一个常驻系统托盘的小工具来说确实是硬伤。便签应用不是打开用一下就关它是开机自启、一直挂在后台的。如果它吃掉 200MB 内存用户第一反应不是“这个便签好用”而是“这玩意怎么这么卡”。2.2 最终选择 Tauri 2.x 的三个决定性理由选 Tauri 2.x 有三个决定性理由。第一便签是典型的常驻型应用资源占用就是用户体验本身。Tauri 直接调用系统 WebView没有自带 Chromium 的后台开销空闲内存能压到 50MB 左右这对后台工具类应用是质变。第二Tauri 2.x 的插件体系比 1.x 完善了太多。系统托盘、通知、全局快捷键、SQLite 都有了官方插件窗口 API 也补齐了透明、置顶、跳过任务栏这些能力。很多在 1.x 里需要自己写 Rust 绑定的功能2.x 里直接有现成接口。第三Rust 后端做文件操作和定时任务非常稳。便签要频繁读写数据、定时扫描提醒、处理窗口状态Rust 的线程模型和错误处理让这些逻辑出问题的概率远低于我用 Node.js 写后端时的心理预期。2.3 项目骨架与数据流向最终的技术栈是 Tauri 2.x React TypeScript前端负责便签的渲染和交互Rust 负责窗口控制、文件读写和提醒调度。项目结构大概是这样的toast-notes/ ├── src-tauri/ │ ├── src/ │ │ ├── main.rs │ │ └── commands.rs │ ├── capabilities/ │ ├── tauri.conf.json │ └── icons/ ├── src/ │ ├── components/ │ │ ├── NoteCard.tsx │ │ ├── TodoItem.tsx │ │ ├── TagView.tsx │ │ └── TrayMenu.tsx │ ├── stores/ │ ├── lib/ │ │ ├── storage.ts │ │ └── reminder.ts │ └── main.tsx └── package.json数据流向很直接前端通过 Tauri 的invoke调用 Rust 命令Rust 命令操作 SQLite 数据库和本地文件。整个链路短出了问题也容易定位。这里要多说一句选型心得可以多花点时间在技术选型上但别在选型上无限内耗。当初我也花了两周反复对比后来发现真正重要的是赶紧把第一个可运行 Demo 跑起来很多选型问题在真实业务面前会自动给出答案。3. 便签的“皮”无边框窗口从搭起来到好用还差几步3.1 透明无边框窗口的搭建桌面便签的“皮”是一套无边框、可置顶、可透明的窗口。Tauri 里通过tauri.conf.json配置窗口几个关键项是这样{ app: { windows: [ { label: note, title: Toast Notes, width: 320, height: 240, decorations: false, transparent: true, alwaysOnTop: true, skipTaskbar: true, resizable: true, shadow: false } ] } }decorations: false去掉系统标题栏transparent: true开启透明背景skipTaskbar: true让便签不占任务栏位置这样多个便签同时打开时系统任务栏不会变成一片卡片堆。去掉标题栏以后拖动窗口就得自己实现。Tauri 2.x 里最省事的办法是在需要拖动的区域加>

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价