浏览器唤起本地桌面应用(基础版)

适用场景：在 Web 页面中通过点击按钮，直接打开本地安装的桌面端应用。

技术关键词：Windows 注册表、URL Protocol、自定义协议、前端交互

🧩 背景

有时候我们希望从网页一键跳转到本地桌面端软件，桌面端可能是公司内部开发，也可能是第三方开发，提升用户体验，加强软件联动性。例如我们打开百度网盘的web端，会关联打开桌面端，极大提升用户体验

本文以vscode为案例，将手把手教你如何通过注册表注册协议，并在网页中通过 JavaScript 唤起本地桌面应用。

🔧 步骤一：创建并导入注册表文件

1. 创建 `.reg` 文件

新建一个文本文件，粘贴以下内容：

reg 复制代码

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\vscode]
@="URL:vscode Protocol"
"URL Protocol"=""

[HKEY_CLASSES_ROOT\vscode\DefaultIcon]
@="C:\\Program Files\\Microsoft VS Code\\Code.exe"

⚠️ 注意：请根据你本机 VS Code 的实际安装路径修改 @= 后的路径。

2. 保存为注册表文件

将文件保存为 vscode.reg（确保扩展名是 .reg，不是 .txt）

建议放到桌面方便操作

3. 导入注册表

双击 vscode.reg，系统会弹出确认窗口，点击"是"即可将协议注册到 Windows。

🌐 步骤二：在网页中唤起 VS Code

在 HTML 中添加一个按钮，通过 JavaScript 触发自定义协议：

html 复制代码

<button id="openDesktop">唤起桌面端</button>

<script>
  document.getElementById('openDesktop').addEventListener('click', () => {
    window.location.href = 'vscode://open';
  });
</script>

✅ 点击按钮后，如果注册成功，系统会自动启动 VS Code。

💡 提示：vscode://open/ 是 VS Code 官方支持的基础协议，还可以附加参数，例如：

js 复制代码

vscode://file/C:/my-project/main.js

成果展示

🧹 步骤三：清理（可选）

如果你只是临时测试，建议清理注册表避免残留：

删除桌面上的 vscode.reg 文件
按下 Win + R，输入 regedit 打开注册表编辑器
导航到 HKEY_CLASSES_ROOT\vscode
右键 → 删除整个 vscode 项

⚠️ 操作注册表前建议备份，误删可能导致系统异常。

✅ 总结

通过注册表注册自定义协议，我们可以实现 Web 与本地应用的深度联动。

虽然本文以 VS Code 为例，但该方法适用于任何支持命令行启动的桌面程序（如 IDEA、Typora、Obsidian 等）。

安全提醒：自定义协议可能被恶意网站滥用，现代浏览器对此有一定限制（如 Chrome 会弹出确认框），生产环境中需谨慎使用。

参考资料：

VS Code URI Scheme 文档
Microsoft 官方：Registering an Application to a URI Scheme

浏览器唤起本地桌面应用(基础版)