QOwnNotes Web App 使用与自托管指南:从手机向桌面笔记无缝插入图片
发布时间:2026/10/14 18:41:21 锦皓数字建站

桌面应用【免费下载链接】QOwnNotesQOwnNotes is a plain-text file notepad and todo-list manager with Markdown support and Nextcloud / ownCloud integration.项目地址https://gitcode.com/gh_mirrors/qo/QOwnNotes点击查看免费下载QOwnNotes 提供了一款网页应用Web App让你可以脱离局域网的限制直接通过手机浏览器把照片上传并插入到桌面端 QOwnNotes 当前正在编辑的笔记中。本篇指南将基于仓库文档与源码系统讲解 Web App 的端到端工作原理WebSocket 中继、Token 认证、传输加密与图片处理链路、桌面端 Web application 设置页的每一项配置含义以及如何自托管该 Web 服务读完即可独立完成配置、排障与私有化部署。Web App 能做什么在 QOwnNotes 桌面应用中你可以使用运行在 app.qownnotes.org 的QOwnNotes Web App将手机上的照片直接插入到桌面端 QOwnNotes 当前打开的笔记中。整个链路的工作方式如下手机浏览器打开 Web App与桌面端 QOwnNotes 建立连接桌面端 QOwnNotes 通过互联网与 Web App 服务通信二者之间的消息采用WebSocket传输层加密通道传递传输的图片数据不会存储在服务端服务只充当转发中继图片最终落到你本地笔记的媒体目录中。从桌面端源码看这一能力由 WebAppClientService位于 src/services/webappclientservice.h负责它以QWebSocket客户端连接中继服务器接收来自 Web App 的命令如insertFile、insertIntoClipboard再交给主窗口处理并写入当前笔记。连接建立后还会发送register命令注册本机连接名并请求服务器返回当前已连接的设备列表getConnectedDevices这些设备信息会显示在设置对话框中方便你确认手机是否已成功配对。在桌面端启用并配置 Web App桌面端设置界面中有一个Web application设置页用于配置与 Web App 服务的通信。你可以在设置对话框中找到它源码见 src/dialogs/settingsdialog.cpp 中的SettingsPages::WebApplicationPage分支界面定义位于 src/widgets/settings/webapplicationsettingswidget.ui。总开关Enable web application support页面顶部是Enable web application support复选框对应设置项enableWebAppSupport默认关闭。该开关由 Utils::Misc::isWebAppSupportEnabled() 读取关闭时WebAppClientService构造函数会直接返回不建立任何连接src/services/webappclientservice.cpp开启后主窗口的“发送剪贴板 / 发送剪贴板为文本”动作、系统托盘中的对应菜单项才会启用并显示见 src/mainwindow.cpp 与 src/managers/systemtraymanager.cpp。Server URL中继服务器地址Server URL输入框用于填写 WebSocket 中继服务器地址。默认值为发布版QT_NO_DEBUGwss://app.qownnotes.org调试版ws://localhost:8080默认值定义在 WebAppClientService::getDefaultServerUrl()注意正式环境使用wss://WebSocket over TLS这正是文档中“传输层加密”承诺的落地点调试环境退化为本地明文ws://。右侧的“重置”按钮可将地址一键恢复为默认值。如果打算使用自托管服务把这里改为你自己的服务器地址即可。Connection name连接名Connection name用于标识当前这台 QOwnNotes 实例方便在手机 Web App 或“已连接设备”列表中区分多台电脑。未设置时会自动生成默认连接名格式为qownnotes[-会话名]-用户名-主机名见 generateDefaultConnectionName()。修改连接名后客户端会立即重新发送register消息其他已连接设备无需重启即可看到新名称。Security token安全令牌Security token是 Web App 与桌面端“配对”的凭证也是整个安全模型的核心Token 为32 位随机字符串由 Utils::Misc::generateRandomString(32) 在首次打开设置页时自动生成输入框限制 32 位、默认以密码模式Password回显隐藏显示避免被旁人窥屏设置页提供三个快捷按钮显示 Token切换明文/密文、复制 Token写入系统剪贴板、生成新 Token重新生成 32 位随机串Token 在本地以加密形式存储storeSettings()会通过CryptoService::instance()-encryptToString(...)加密后写入设置键webAppClientService/token读取时再解密见 src/widgets/settings/webapplicationsettingswidget.cpp 与 src/services/webappclientservice.cpp。桌面端 WebSocket 连接 URL 实际就是服务器地址 /ws/ Tokensrc/services/webappclientservice.cpp因此Token 即身份凭证谁持有它谁就能把图片/剪贴板内容推送到这台 QOwnNotes。请务必妥善保管不要泄露给他人。扫码配对Show QR code设置页提供Show QR code按钮点击后在界面内渲染一个二维码。该二维码编码的内容是qontoken:// Token见 on_webAppTokenLineEdit_textChanged()QR 码由仓库内置的 qr-code-generator 库实时绘制src/widgets/qrcodewidget.cpp。在手机 Web App 中选择扫码即可完成配对省去手动输入 32 位 Token 的繁琐。Test connection 与 Connected devicesTest connection立即检测当前 WebSocket 是否处于已连接状态并弹出成功/失败提示用于快速排障网络、地址、开关是否生效。Connected devices区域点击Refresh请求服务器返回当前使用同一 Token 连接的所有设备以连接名展示用于确认手机是否配对成功。服务端消息connectedDevices会触发 connectedDevicesUpdated 信号刷新该列表。提示设置页所有改动开关、Server URL、Token、连接名都通过MainWindow::reinitWebAppClientService()即时生效——该函数对比设置快照后销毁并重建WebAppClientService无需重启 QOwnNotessrc/mainwindow.cpp。配对与使用流程完成桌面端配置后按以下步骤使用在桌面端 QOwnNotes 的Web application设置页确认Enable web application support已勾选Server URL 保持默认wss://app.qownnotes.org复制你的 Token点击“复制”按钮或扫描二维码前往 app.qownnotes.org 的 Web App在 Web App 中输入/扫描 Token 完成配对。此时桌面端设置页的 “Connected devices” 中应能看到手机设备的连接记录可用 “Test connection” 验证链路在手机上通过 Web App 选择/拍摄照片桌面端会弹出确认对话框“是否将从 QOwnNotes Web App 收到的图片插入当前笔记”源码中为Image received提示见 src/services/webappclientservice.cpp确认后图片即被插入到当前正在编辑的笔记中。图片如何进入笔记底层调用链从源码可以看出完整的插入链路src/services/webappclientservice.cpp手机 Web App 发送insertFile命令消息体携带图片的 Data URLWebAppClientService收到后提示用户确认确认后调用MainWindow::insertDataUrlAsFileIntoCurrentNote(fileDataUrl)该方法委托Note::importMediaFromDataUrl()src/entities/note.cpp解析data:image/...;base64,...格式按;base64,拆分出 MIME 类型与图片数据通过importMediaFromBase64将图片落盘到笔记的媒体文件夹并返回 Markdown 图片标签代码图片以本地文件形式保存在你的笔记媒体目录中不会停留在中继服务器上——这与文档承诺的“服务端不存储任何图片”完全一致。此外Web App 还支持把文本/图片/HTML 写入桌面端剪贴板insertIntoClipboard命令携带mimeType与内容src/services/webappclientservice.cpp支持text/plain、text/html、image/png三种类型消息携带sessionId客户端会跳过来自本机会话的消息避免剪贴板循环。桌面端侧也可以反向把剪贴板发送给 Web App当启用 Web App 支持时工具栏/系统托盘会出现Send clipboard与Send clipboard as text动作src/mainwindow.cpp、src/PBE.QOwnNotes.desktop。连接保活与断线重连机制为保证长连接的稳定性WebAppClientService内置了两套定时机制src/services/webappclientservice.h心跳每 600000 ms10 分钟发送一条qon-ping文本消息若发送失败累计达到 10 次则触发重连重连断开后每 20000 ms20 秒尝试重新打开 WebSocket重连失败累计达到 10 次后停止尝试。连接状态会通过主窗口的 Web App 状态按钮实时反映断开时还会清空“已连接设备”列表src/services/webappclientservice.cpp便于你及时发现问题。自托管 Web App 服务除了官方托管的服务你也可以自行托管这套 Web 服务官方 Web App 的源代码位于 qownnotes 组织下的web-app仓库本仓库中未包含其源码桌面端仅作为 WebSocket 客户端接入官方在 Docker Hub 发布有现成的 Docker 镜像qownnotes-web-app可直接拉取部署自托管时只需将桌面端设置页的Server URL改为你自己的服务器地址即可例如wss://your-server.example.org无需修改桌面端任何代码。自托管场景下的推荐检查清单服务器需要提供WebSocket over TLSwss://否则浏览器与桌面端会因混合内容/证书问题拒绝连接确保你使用的 Token 只分发给可信设备自托管服务器同样不持久化图片数据使用 “Test connection” 验证桌面端到自托管服务器的连通性并在手机 Web App 中完成同样的 Token 配对。安全模型总结环节机制源码依据传输层WebSocket over TLSwss://发布版默认wss://app.qownnotes.orgsrc/services/webappclientservice.cpp身份认证32 位随机 Token拼入连接 URL/ws/tokensrc/services/webappclientservice.cpp本地存储Token 加密后写入设置读取时解密src/widgets/settings/webapplicationsettingswidget.cpp数据留存服务器仅中继图片最终落盘到本地笔记媒体目录src/entities/note.cpp防循环剪贴板消息携带sessionId忽略本机会话消息src/services/webappclientservice.cpp需要留意的是文档明确承诺“通信是传输层加密、服务端不存储图片”这一承诺针对的是官方中继服务与传输通道而 Token 一旦泄露任何持有着都能向你的桌面端推送内容因此保管 Token、定期重新生成是使用该功能的基本安全习惯。QOwnNotes Web App 是把“移动端随手拍摄”与“桌面端深度编辑”衔接起来的实用通道配合自托管能力你可以在完全可控的服务器上获得同样的跨设备体验。赞分享桌面应用【免费下载链接】QOwnNotesQOwnNotes is a plain-text file notepad and todo-list manager with Markdown support and Nextcloud / ownCloud integration.项目地址https://gitcode.com/gh_mirrors/qo/QOwnNotes点击查看免费下载相关推荐QOwnNotes Web App 使用与源码解析从手机向桌面笔记无缝传输图片与剪贴板QOwnNotes Web App 使用与源码解析从手机向桌面笔记无缝传输图片与剪贴板 导读 QOwnNotes Web App 是 QOwnNotes 官方桌面应用QOwnNotes Web 应用Web App完全指南手机照片一键插入桌面笔记QOwnNotes Web 应用Web App完全指南手机照片一键插入桌面笔记 QOwnNotes 提供了一款浏览器端 Web 应用让你通过互联网把手机桌面应用QOwnNotes Web 应用指南从手机插入照片到桌面笔记的完整配置与自托管方案QOwnNotes Web 应用指南从手机插入照片到桌面笔记的完整配置与自托管方案 QOwnNotes 提供了一款 Web 应用 Web App让你可以桌面应用创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
锦
锦皓数字建站
深耕本土企业品牌数字化升级,专注原创端正雅致商务官网,从视觉设计到稳定运维全程保驾护航。