H5 喚醒 APP 實現以及注意點

做爲前端開發人員常常會有這樣的需求,若是某個用戶安裝了本身的APP就打開APP首頁或則指定頁面,若是沒有安裝APP就跳轉到相應下載頁面。這樣的一個需求也是拉新和裂變必不可少的環節,因此是須要咱們去解決的。今天來看看到底如何實現呢?html

跳轉APP方式

目前實現該功能的有兩種比較好的方式:URL Scheme、meta標籤和Universal Links。前端

URL Scheme

URL Scheme就是一個可讓app相互之間能夠跳轉的對外接口。經過給APP定義一個惟一的URL路徑來從外部快速的打開這個指定的APP,每一個app的URL Scheme都是不同的,若是存在同樣的URL Scheme,那麼系統就會響應先安裝那個app的URL Scheme,由於後安裝的app的URL Scheme被覆蓋掉了,是不能被調用的。URL scheme的格式是:web

[scheme]://[host]/[path]?[query]
複製代碼

介紹幾個經常使用的URL Scheme平臺:瀏覽器

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

同時支持Android和iOS平臺bash

meta標籤

在網頁上設置meta標籤,使用safari打開的時候,就會在頂部顯示本身app的導航條。若是沒有安裝app點擊可以跳轉到appstore去下載,若是安裝了app就能直接經過頂部的meta標籤喚醒app了。微信

iOS獨有app

Universal Links

Universal Links就是一個通用連接,iOS9以上的用戶,能夠經過點擊這個連接無縫的重定向到一個app應用,而不須要經過safari打開跳轉。若是用戶沒有安裝這個app,則會在safari中打開這個連接指向的網頁。iphone

iOS獨有而且是iOS9.0纔出的函數

各類方式的使用

URL Scheme和Universal Links都是須要配置的,只有配置了纔能有做用。網站

URL Scheme使用

URL Scheme的使用方式不難,最簡單的使用方式就是添加一個a標籤連接便可:

<a href="weixin://">打開微信</a>
複製代碼

這種方式訪問是比較簡單的,安卓和IOS均可以使用,可是在微信端就不行了,微信端設置了白名單,徹底屏蔽了URL Scheme 用法,除非加入了白名單,像京東就能夠直接打開,不然是不可能的。

meta標籤使用

meta標籤的方式也很簡單隻須要在網頁中添加meta標籤便可:

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

效果就是在網頁的頂部顯示一個置頂條。

Universal Links使用

這種方式配置有點麻煩,本人也沒有接觸過iOS的開發因此就給你們一個官方網站的介紹了

總結

上面的每一種方式都不能完美的解決,要麼只有蘋果支持,要麼會有不少頭部APP限制,因此須要本身來作不少其它工做才能適配。

首先咱們要確認採起哪種方式,綜合以上介紹惟有第一種URL Scheme的方式應該是算是最優的選擇了畢竟兩個平臺都支持,接下倆就是如何解決在頭部APP裏面如何打開,其實這個問題一般都是提示用戶在外部瀏覽器中打開,因此這樣基本就解決了這個難題,下面就用代碼來一步步實現。

實現喚醒APP功能

提示瀏覽器打開

首先須要實現一個在瀏覽器打開的小提示以下:

實現判斷頭部APP的功能

這裏就是經過瀏覽器的User-Agent來判斷是否爲微信或則其它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;
}
複製代碼

上面的函數判斷了幾種瀏覽器,微信、微博、QQ、QQ瀏覽器。若是點擊打開或則下載按鈕時就判斷是否爲頭部APP,若是是則提示在瀏覽器打開不然直接打開本身的APP便可,代碼以下:

function openTuer() {
  if (isBlackApp()) {
    // 頭部APP讓網頁顯示提示在瀏覽器中打開
    showTips();
  } else {
    // 不是頭部APP就直接打開,這裏你們開始能夠不用參數,後面寫好再來添加便可
    openApp(0, 0);
  }
}
複製代碼

喚醒APP的核心方法

上面也提到了openApp這個函數,那麼具體是什麼樣的呢,這裏咱們就來看看如何去實現這個函數。這裏按照目前本身的項目需求就是打開APP須要兩個參數一個是打開APP的某一個頁面which,一個是打開某個頁面須要的參數arg。因此咱們的openApp函數才須要兩個參數。

openApp的實現

openApp這個函數很簡單就是調用兩個函數以下:

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

第一個函數就是負責打開APP的,第二個負責若是沒有打開APP或沒有安裝APP時跳轉的地址處理。

jumpApp的實現

這個函數的實現要注意iOS8以前是可使用iframe來實現的,可是以後的就不行了,被蘋果屏蔽了,因此只能經過頁面跳轉了,具體代碼以下:

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的實現

noApp的實現也很簡單就是定義一個定時器,若是在某個時間段內沒啥反應就跳轉到指定的下載頁面便可。具體代碼以下:

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);
}
複製代碼

到此就實現了基本的功能了,實際過程當中可能還有不少問題存在,若有請留言哦。

相關文章
相關標籤/搜索