js判断手机是否下载APP

场景描述

在APP内嵌H5页面中，用户在APP外打开该页面并触发相应事件，若用户安装了该APP则调起APP，若用户未安装APP，则Android用户引导至应用宝下载，iOS用户引导至App Store下载

前期准备

由Android和iOS开发同事提供打开APP对应的url

let androidData = 'android://url/android?operateType=3&configs='+baseUrl 
let iosData = 'ios://url/ios?operateType=3&configs='+baseUrl

判断打开页面系统类型

this.isAndroid = user.indexOf("Android") > -1 || user.indexOf("Adr") > -1;

判断方法

1.获取进入方法时间戳，
2.window.location.href尝试打开
3.定时器获取第二次时间戳
4.计算时间差，时间差在一定范围内则未安装

缺点

1.时间差由自己决定，但是会受到网络、手机卡顿等因素影响
2.Android在浏览器询问打开时，若点击过慢会判断为未安装
3.ios基本不能判断出
4.微信浏览器内只有微信白名单才能直接打开APP，不在微信白名单则需要引导至浏览器打开

代码实现

   let data = { // 打开APP携带的参数
     "className":"webView",
     "classPath":"webView",
   }
   let url = JSON.stringify(data)  // 参数转为json字符串
   let baseUrl = encode64(utf16to8(url)) // 数据加码
   let androidData = 'android://url/android?operateType=3&configs='+baseUrl // Android路径
   let iosData = 'ios://url/ios?operateType=3&configs='+baseUrl //iOS路径
   var openTime = new Date();//获取当前时间戳
   if (this.isAndroid) { // 判断当前手机系统为Android
     window.setTimeout(function () {
       if ((new Date()) - openTime < 3100) { 
       	 // 响应延迟小于100ms 认为未安装APP，前去应用宝下载
         window.location.href = "https://sj.qq.com/myapp/detail.htm?apkName=****";
       }
       else{
         window.close()
       }
     }, 3000);
     window.location.href = androidData // 尝试打开APP
   } else{ // 判断当前手机系统为iOS
     window.setTimeout(function () {
       if ((new Date()) - openTime < 3100) { 
        // 响应延迟小于100ms 认为未安装APP，前去App Store下载
         window.location.href = 'http://itunes.apple.com/us/app/******';
       }
       else{
         window.close()
       }
     }, 3000);
     window.location.href = iosData
   }