如何制作可通过按钮打开Spotify、Steam等应用的HTML文件

核心逻辑是利用自定义URL协议——本地应用可以向系统注册专属的URL协议（比如Spotify的spotify://），浏览器识别到这类协议链接时，会自动唤起对应的本地应用。下面是具体实现步骤：

一、先搞懂哪些应用自带可直接用的协议 #

很多常用应用已经默认注册了自定义协议，不需要额外配置，直接在HTML里用就行：

• Spotify: spotify://
• VS Code: vscode://
• Steam: steam://open/main
• 微信: weixin://
• 钉钉: dingtalk://

如果你的目标应用不在这个列表里，再往下看手动注册协议的方法。

二、HTML起始页的实现 #

下面是一个极简的起始页示例，包含应用快捷方式和唤起失败的处理逻辑：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的快捷起始页</title>
    <style>
        body {
            margin: 0;
            padding: 2rem;
            background-color: #f5f5f5;
            font-family: system-ui, -apple-system, sans-serif;
            display: flex;
            flex-wrap: wrap;
            gap: 1.2rem;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
        .app-btn {
            padding: 1rem 2rem;
            background: #2563eb;
            color: white;
            border-radius: 8px;
            text-decoration: none;
            font-size: 1.1rem;
            transition: background 0.2s;
        }
        .app-btn:hover {
            background: #1d4ed8;
        }
    </style>
</head>
<body>
    <a href="spotify://" class="app-btn" onclick="checkAppLaunch(event, 'Spotify')">Spotify</a>
    <a href="vscode://" class="app-btn" onclick="checkAppLaunch(event, 'VS Code')">VS Code</a>
    <a href="steam://open/main" class="app-btn" onclick="checkAppLaunch(event, 'Steam')">Steam</a>
    <a href="weixin://" class="app-btn" onclick="checkAppLaunch(event, '微信')">微信</a>

    <script>
        function checkAppLaunch(event, appName) {
            const launchStartTime = Date.now();
            // 延迟判断是否唤起成功：如果1秒内页面没被切走，大概率是应用没安装
            setTimeout(() => {
                if (Date.now() - launchStartTime < 900) {
                    alert(`无法打开${appName}，请确认是否已安装该应用。`);
                    // 这里可以替换为跳转到应用下载页，比如：
                    // window.location.href = 'https://code.visualstudio.com/download';
                }
            }, 800);
        }
    </script>
</body>
</html>

三、为自定义应用注册URL协议 #

如果你的目标应用没有自带协议，需要手动给系统注册：

Windows系统 #

1. 打开注册表编辑器（按下Win+R，输入regedit回车）
2. 定位到HKEY_CLASSES_ROOT，右键新建项，命名为你的协议名（比如myapp）
3. 设置该项的默认值为URL:myapp Protocol
4. 右键新建字符串值，命名为URL Protocol，值留空
5. 在myapp下依次新建shell -> open -> command项，设置command的默认值为应用的启动路径，格式为："C:\绝对路径\你的应用.exe" "%1"
6. 重启浏览器后即可使用myapp://协议

macOS系统 #

1. 找到应用的包文件（右键应用 -> 显示包内容）
2. 打开Contents/Info.plist，添加以下内容（可以用文本编辑器或Xcode编辑）：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>我的自定义应用</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>

3. 保存后，重启应用和浏览器，即可通过myapp://唤起

Linux系统 #

1. 在~/.local/share/applications/目录下新建一个myapp.desktop文件
2. 写入以下内容：

[Desktop Entry]
Name=我的自定义应用
Exec=/home/你的用户名/应用路径/你的应用 %u
Type=Application
MimeType=x-scheme-handler/myapp;

3. 运行命令更新桌面数据库：update-desktop-database ~/.local/share/applications/
4. 重启浏览器后即可使用myapp://协议

注意事项 #

• 部分浏览器会对自定义协议唤起做安全限制，首次触发时需要用户手动确认允许
• 唤起失败的判断逻辑是基于时间差的近似方案，无法100%准确（比如用户系统卡顿也可能误判）
• 不要在公共网站上滥用自定义协议，仅用于本地起始页场景

内容的提问来源于stack exchange，提问作者Addiv