乐趣区

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

jiezi

对于 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 思否写作挑战赛，欢送正在浏览的你也退出。

退出移动版