关于javascript:H5页面打开app安卓端和苹果端

对于App的分享页面，挪动端常常会遇到须要唤起App并定位的性能。

跳转到App办法

安卓通常应用 URL Scheme 办法
IOS有两种办法 meta标签和Universal Links， 咱们通常应用Universal Links

URL Scheme

URL Scheme就是一个能够让app相互之间能够跳转的对外接口。每个app都不同，如果有反复的会响应先装置的app。URL Scheme的格局为：

[scheme]://[host]/[path]?[query]

比方：

• 淘宝： taobao://
• QQ： mqq://
• 微信： weixin://

meta标签

在网页上设置meta标签，应用safari关上的时候，就会在顶部显示本人app的导航条。如果没有装置app点击可能跳转到appstore去下载，如果装置了app就能间接通过顶部的meta标签唤醒app了。（此为IOS特有）

 <meta charset="UTF-8" name="apple-itunes-app" content="app-id=yourId, affiliate-data=myAffiliateData, app-argument=yourScheme://">

Universal Links

iOS 9之前，始终应用的是URL Schemes技术来从内部对App进行跳转，然而iOS零碎中进行URL Schemes跳转的时候如果没有装置App，会提醒Cannot open Page的提醒，而且当注册有多个scheme雷同的时候，目前没有方法辨别，然而从iOS 9起能够应用Universal Links技术进行跳转页面，这是一种体验更加完满的解决方案

实现唤醒APP性能

大多数须要唤醒app时都是在微信内，但因为微信外部禁用了唤醒性能，所以做了一个疏导页，疏导用户通过浏览器关上。（一些出名app能够唤起）

<div class="main">
  <div class="tips" id="ios"></div>
  <div class="tips" id="android"></div>
  <div class="logo"></div>
  <div class="info"></div>
  <div id="a-btn" class="downloadBtna"><a href="https://wwww.******.com.cn/api/app/download"></a></div>
  <div id="i-btn" class="downloadBtni"><a href="https://itunes.apple.com/cn/app/yourId"></a></div>
</div>

// 获取浏览器用于 HTTP 申请的用户代理头的值
var u = navigator.userAgent, ua = u.toLowerCase()
var isWeiXin = ua.indexOf('micromessenger') != -1;
var {isAndroid, isIOS} = detectVersion()
// 获取参数id值、起源值，以便用于scheme跳转
var id = getQueryString('id')
var source = getQueryString('source')
// 判断以后浏览器
function detectVersion() {
  var isAndroid, isIOS;
  if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {      // android or uc browser
      // android
      isAndroid = true
  }
  if(ua.indexOf("like mac os x") > 0) {
      isIOS = true
  }
  return {isAndroid, isIOS}
}
// 唤起app办法
function openApp(callback) {
  var url = ""
  if (isAndroid ) {
    url = '[scheme]://'+ source +'?id=' + id
    var timeout, t = 3000, hasApp = true
    var openScript = setTimeout( function () {
      if (!hasApp) {
        callback && callback()
      }
      document.body.removeChild(ifr)
    },5000)

    var t1 = Date.now()
    var ifr = document.createElement("iframe")
    ifr.setAttribute("src", url)
    ifr.setAttribute("style", "display:none")
    document.body.appendChild(ifr)
    timeout = setTimeout( function () {
      var t2 = Date.now()
      if (t2 - t1 < t + 100) {
        hasApp = false
        // 此处创立一个定时器，以便用于判断页面是否跳转，如果未胜利跳转，那么判断未装置app，此时跳转到app下载
        window.location.href="https://www.******.com.cn/api/app/download"
      }
    },t)
  }
  if (isIOS) {
    // Universal Links 须要IOS工程师进行配置
    window.location.href= "https://www.******.com.cn/" + source + "?id=" + id
  }
}
$(function () {
  if(isWeiXin) {
    if(isAndroid) {
      $("#a-btn").show()
      $("#android").show()
    } else {
      $("#i-btn").show()
      $("#ios").show()
    }
  } else {
    if(isAndroid) {
      $("#android").show()
      $("#a-btn").show()
      openApp()
    } else {
      $("#ios").show()
      $("#i-btn").show()
      openApp()
    }
  }   
})

以上并没有思考ios9以下版本

本文参加了SegmentFault 思否写作挑战赛，欢送正在浏览的你也退出。