前言

作為前端開(kāi)發(fā)人員經(jīng)常會(huì)有這樣的需求，如果某個(gè)用戶(hù)安裝了自己的APP就打開(kāi)APP首頁(yè)或則指定頁(yè)面，如果沒(méi)有安裝APP就跳轉(zhuǎn)到相應(yīng)下載頁(yè)面。這樣的一個(gè)需求也是拉新和裂變必不可少的環(huán)節(jié)，所以是需要我們?nèi)ソ鉀Q的。今天來(lái)看看到底如何實(shí)現(xiàn)呢？

跳轉(zhuǎn)APP方式

目前實(shí)現(xiàn)該功能的有兩種比較好的方式：URL Scheme、meta標(biāo)簽和Universal Links。

URL Scheme

URL Scheme就是一個(gè)可以讓app相互之間可以跳轉(zhuǎn)的對(duì)外接口。通過(guò)給APP定義一個(gè)唯一的URL路徑來(lái)從外部快速的打開(kāi)這個(gè)指定的APP，每個(gè)app的URL Scheme都是不一樣的，如果存在一樣的URL Scheme，那么系統(tǒng)就會(huì)響應(yīng)先安裝那個(gè)app的URL Scheme，因?yàn)楹蟀惭b的app的URL Scheme被覆蓋掉了，是不能被調(diào)用的。URL scheme的格式是：

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

介紹幾個(gè)常用的URL Scheme平臺(tái)：

• QQ： mqq://
• 微信： weixin://
• 騰訊微博： TencentWeibo://
• 淘寶： taobao://
• 支付寶： alipay://
• 微博： sinaweibo://

同時(shí)支持Android和iOS平臺(tái)

meta標(biāo)簽

在網(wǎng)頁(yè)上設(shè)置meta標(biāo)簽，使用safari打開(kāi)的時(shí)候，就會(huì)在頂部顯示自己app的導(dǎo)航條。如果沒(méi)有安裝app點(diǎn)擊能夠跳轉(zhuǎn)到appstore去下載，如果安裝了app就能直接通過(guò)頂部的meta標(biāo)簽喚醒a(bǔ)pp了。

iOS獨(dú)有

Universal Links

Universal Links就是一個(gè)通用鏈接，iOS9以上的用戶(hù)，可以通過(guò)點(diǎn)擊這個(gè)鏈接無(wú)縫的重定向到一個(gè)app應(yīng)用，而不需要通過(guò)safari打開(kāi)跳轉(zhuǎn)。如果用戶(hù)沒(méi)有安裝這個(gè)app，則會(huì)在safari中打開(kāi)這個(gè)鏈接指向的網(wǎng)頁(yè)。

iOS獨(dú)有并且是iOS9.0才出的

各種方式的使用

URL Scheme和Universal Links都是需要配置的，只有配置了才能有作用。

URL Scheme使用

URL Scheme的使用方式不難，最簡(jiǎn)單的使用方式就是添加一個(gè)a標(biāo)簽鏈接即可：

<a href="weixin://" rel="external nofollow" >打開(kāi)微信</a>

這種方式訪問(wèn)是比較簡(jiǎn)單的，安卓和IOS都可以使用，但是在微信端就不行了，微信端設(shè)置了白名單，完全屏蔽了URL Scheme 用法，除非加入了白名單，像京東就可以直接打開(kāi)，否則是不可能的。

meta標(biāo)簽使用

meta標(biāo)簽的方式也很簡(jiǎn)單只需要在網(wǎng)頁(yè)中添加meta標(biāo)簽即可：

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

效果就是在網(wǎng)頁(yè)的頂部顯示一個(gè)置頂條。

Universal Links使用

這種方式配置有點(diǎn)麻煩，本人也沒(méi)有接觸過(guò)iOS的開(kāi)發(fā)所以就給大家一個(gè)官方網(wǎng)站的介紹了

總結(jié)

上面的每一種方式都不能完美的解決，要么只有蘋(píng)果支持，要么會(huì)有很多頭部APP限制，所以需要自己來(lái)做很多其它工作才能適配。

首先我們要確認(rèn)采取哪一種方式，綜合以上介紹唯有第一種URL Scheme的方式應(yīng)該是算是最優(yōu)的選擇了畢竟兩個(gè)平臺(tái)都支持，接下倆就是如何解決在頭部APP里面如何打開(kāi)，其實(shí)這個(gè)問(wèn)題通常都是提示用戶(hù)在外部瀏覽器中打開(kāi)，所以這樣基本就解決了這個(gè)難題，下面就用代碼來(lái)一步步實(shí)現(xiàn)。

實(shí)現(xiàn)喚醒APP功能

提示瀏覽器打開(kāi)

首先需要實(shí)現(xiàn)一個(gè)在瀏覽器打開(kāi)的小提示如下：

實(shí)現(xiàn)判斷頭部APP的功能

這里就是通過(guò)瀏覽器的User-Agent來(lái)判斷是否為微信或則其它APP瀏覽器，代碼如下：

/**
 * 判斷瀏覽器是否為頭部APP
 */
function isBlackApp() {
  var u = navigator.userAgent.toLowerCase();
  return /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1 || u.indexOf('mqqbrowser') > -1;
}

上面的函數(shù)判斷了幾種瀏覽器，微信、微博、QQ、QQ瀏覽器。如果點(diǎn)擊打開(kāi)或則下載按鈕時(shí)就判斷是否為頭部APP，如果是則提示在瀏覽器打開(kāi)否則直接打開(kāi)自己的APP即可，代碼如下：

function openTuer() {
  if (isBlackApp()) {
    // 頭部APP讓網(wǎng)頁(yè)顯示提示在瀏覽器中打開(kāi)
    showTips();
  } else {
    // 不是頭部APP就直接打開(kāi)，這里大家開(kāi)始可以不用參數(shù)，后面寫(xiě)好再來(lái)添加即可
    openApp(0, 0);
  }
}

喚醒APP的核心方法

上面也提到了openApp這個(gè)函數(shù)，那么具體是什么樣的呢，這里我們就來(lái)看看如何去實(shí)現(xiàn)這個(gè)函數(shù)。這里按照目前自己的項(xiàng)目需求就是打開(kāi)APP需要兩個(gè)參數(shù)一個(gè)是打開(kāi)APP的某一個(gè)頁(yè)面which，一個(gè)是打開(kāi)某個(gè)頁(yè)面需要的參數(shù)arg。所以我們的openApp函數(shù)才需要兩個(gè)參數(shù)。

openApp的實(shí)現(xiàn)

openApp這個(gè)函數(shù)很簡(jiǎn)單就是調(diào)用兩個(gè)函數(shù)如下：

function openApp(which, arg) {
    jumpApp("testApp://which=" + which + "&arg=" + arg);
    noApp();
}

第一個(gè)函數(shù)就是負(fù)責(zé)打開(kāi)APP的，第二個(gè)負(fù)責(zé)如果沒(méi)有打開(kāi)APP或沒(méi)有安裝APP時(shí)跳轉(zhuǎn)的地址處理。

jumpApp的實(shí)現(xiàn)

這個(gè)函數(shù)的實(shí)現(xiàn)要注意iOS8之前是可以使用iframe來(lái)實(shí)現(xiàn)的，但是之后的就不行了，被蘋(píng)果屏蔽了，所以只能通過(guò)頁(yè)面跳轉(zhuǎn)了，具體代碼如下：

function jumpApp(t) {
  try {
    var e = navigator.userAgent.toLowerCase(),
      n = e.match(/cpu iphone os (.*?) like mac os/);
    if (((n = null !== n ? n[1].replace(/_/g, ".") : 0), parseInt(n) >= 9)) {
      window.location.href = t;
    } else {
      var r = document.createElement("iframe");
      (r.src = t), (r.style.display = "none"), document.body.appendChild(r);
    }
  } catch (e) {
    window.location.href = t;
  }
}

noApp的實(shí)現(xiàn)

noApp的實(shí)現(xiàn)也很簡(jiǎn)單就是定義一個(gè)定時(shí)器，如果在某個(gè)時(shí)間段內(nèi)沒(méi)啥反應(yīng)就跳轉(zhuǎn)到指定的下載頁(yè)面即可。具體代碼如下：

var timer = null;
function noApp() {
  var t = Date.now(),
    r = "http://www.tuerapp.com";
  timer = setTimeout(function() {
    return Date.now() - t > 2200
      ? (clearTimeout(timer), !1)
      : !document.webkitHidden && !document.hidden && void (location.href = r);
  }, 2000);
}

到此就實(shí)現(xiàn)了基本的功能了，實(shí)際過(guò)程中可能還有很多問(wèn)題存在

總結(jié)

到此這篇關(guān)于H5喚醒APP實(shí)現(xiàn)方法及注意點(diǎn)的文章就介紹到這了,更多相關(guān)H5喚醒APP方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論