JS检测是否安装了某应用（移动端和PC端）

系列文章目录

---

---

前言

提示：本文查看之前，请先理解对应的如下概念 :

1. URL Scheme是什么 2. URL Scheme的作用是什么 3. URL Shceme是如何创建的

---

一、URl Scheme

URL Scheme是什么

1.URL Scheme是一种在移动设备上使用的URL协议，它允许应用程序之间进行通信并共享数据。

URL Scheme可以做什么

通过使用URL Scheme，开发人员可以定义自定义协议来打开他们的应用程序或执行特定的操作。例如，1.使用URL Scheme将链接指向应用程序的某个特定页面，2.使用特定的URL Scheme打开地图应用程序并显示指定地址的地图。

URL Scheme 的组成

URL Scheme通常由应用程序的包标识符和自定义协议组成

例如，com.example.myapp://，其中com.example.myapp是应用程序的协议(该协议也是可以自定义的)。当用户点击包含URLScheme链接的文本或按钮时，移动设备将尝试打开与该URL Scheme相对应的应用程序或执行特定的操作。

二、js检测本地应用app

1.代码如下（有使用注释）

 function checkAppInstalled(appScheme) {
    var isInstalled = false;
    if (navigator.userAgent.match(/(iPhone|iPod|iPad)/)) {
      // iOS设备
      if (typeof window.webkit != "undefined") {
        // ios9以上版本支持
        isInstalled = !!window.webkit.messageHandlers[appScheme];
      } else {
        // ios9以下版本支持
        var iframe = document.createElement("iframe");
        iframe.src = appScheme + "://";
        iframe.style.display = "none";
        document.body.appendChild(iframe);
        setTimeout(function () {
          document.body.removeChild(iframe);
        }, 2000);
        isInstalled = true;
      }
    } else if (navigator.userAgent.match(/android/i)) {
      // Android设备
      var androidLink = document.createElement("a");
      androidLink.href = appScheme + "://";
      androidLink.style.display = "none";
      document.body.appendChild(androidLink);
      setTimeout(function () {
        document.body.removeChild(androidLink);
      }, 2000);
      isInstalled = true;
    }
    return isInstalled;
  }

  // 调用检测应用是否安装的函数 appScheme 是对应的app调用协议
  if (checkAppInstalled("appScheme://")) {
    // 如果应用已安装，则打开本地应用
    window.location.href = "appScheme://";
  } else {
    // 如果应用未安装，则提示用户未下载该应用
    alert("应用未安装，请下载安装后再使用。");
  }

2.具体如下图所示

---

三、浏览器调用PC端本地应用（与App大致类似）

1.代码如下所示

 function openOrDownloadApp(urlScheme, downloadUrl) {
        var iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        iframe.src = urlScheme;
        document.body.appendChild(iframe);
        setTimeout(function () {
            document.body.removeChild(iframe);
            window.location.href = downloadUrl;
        }, 2000);
    }

    // 检查是否为 Windows 操作系统
    if (navigator.platform.indexOf('Win') != -1) {
        var urlScheme = 'your-windows-app-protocol://';
        var downloadUrl = 'https://www.microsoft.com/en-us/windows?r=1';
    } else {
        // 如果不是 Windows 操作系统，使用其他方式打开应用
        // 例如使用 URL 协议，类似于 "your-app-protocol://your-app-path"
        var urlScheme = 'your-app-protocol://your-app-path';
        var downloadUrl = 'https://www.microsoft.com/en-us/windows?r=1';
    }

    // 尝试打开应用
    openOrDownloadApp('wxwork://', downloadUrl);

2.问题说明

在PC端下，目前只能支持拥有 URL Scheme协议的应用。窗口是在桌面上打开的状态下才可以通过浏览器进行调用。 如果窗口关闭或者缩小状态下，都不支持通过URL Scheme调用本地应用

总结

1.移动端⚠️

1.调用移动端的方法，我是在浏览器下面进行检测的，没有真正的在 ios或者安卓的设备中进行检测，仅提供代码思路的借鉴！！！！！！

2.PC端⚠️

2.在PC端的方法（macOS环境），个人感觉是存在严重性的缺陷的，但是可以给用户加提示来避免问题的出现！