如何通过浏览器中的JavaScript打开移动端或桌面端应用？

这类功能（如WhatsApp、Telegram的网页唤起应用）主要通过两种核心方案实现，以下是具体实现方式和注意事项：

一、自定义URL协议（Custom URL Scheme） #

这是即时通讯类应用最常用的唤起方式，每个应用都有官方约定的专属URL协议，比如：

• WhatsApp：whatsapp://
• Telegram：tg://

实现代码示例 #

通过用户主动点击事件触发跳转，并处理应用未安装的 fallback 逻辑：

// 唤起WhatsApp应用（可带参数指定聊天对象）
function openWhatsApp() {
  // 官方协议格式，可替换为目标号码
  const appUrl = 'whatsapp://send?phone=+861234567890';
  window.location.href = appUrl;

  // 检测跳转失败（用户未安装应用时），延迟触发备选方案
  setTimeout(() => {
    // 此处可跳转到应用网页版或官方下载页面
    window.location.href = '替换为应用网页版/下载页地址';
  }, 1500);
}

// 绑定按钮点击事件（需确保页面存在id为open-whatsapp-btn的按钮）
document.getElementById('open-whatsapp-btn').addEventListener('click', openWhatsApp);

原理说明 #

浏览器识别到自定义协议后，会尝试唤起对应本地应用；若未找到该协议（即未安装应用），则会触发超时后的备选跳转。超时时间建议设置1000-2000ms，适配不同设备的响应速度。

二、通用链接（Universal Links / App Links） #

这是苹果（Universal Links）和安卓（App Links）推出的更安全的官方方案，无需自定义协议，直接通过域名关联应用：

• 应用开发者提前将域名与应用绑定
• 用户点击官方域名链接时，系统自动判断：已安装应用则唤起，未安装则打开网页版

实现代码示例 #

以WhatsApp的通用链接为例：

function openWhatsAppViaUniversalLink() {
  // 官方通用链接格式，可替换为目标号码
  const universalUrl = 'https://wa.me/+861234567890';
  window.location.href = universalUrl;
}

这种方式无需手动处理 fallback，系统会自动完成应用/网页的切换。

桌面端适配逻辑 #

桌面端应用同样支持自定义URL协议，实现逻辑与移动端完全一致。部分桌面浏览器（如Chrome）会弹出授权确认框，询问用户是否允许打开应用，这是浏览器的安全机制，无法绕过。

关键注意事项 #

1. 自定义协议需遵循应用官方规范：务必参考目标应用的开发者文档，确保协议格式正确（比如Telegram的tg://支持多种参数）
2. 必须通过用户主动交互触发：浏览器会阻止页面自动唤起应用，需绑定按钮点击、链接点击等用户主动操作
3. 避免滥用自动跳转：仅在用户明确需要唤起应用时触发，提升用户体验
4. 备选方案要友好：应用未安装时，优先引导用户使用网页版，其次才是下载应用

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