h5跳轉到app的實現

標籤：市場   直接   set   生效   需求   span   其他   興趣   ram   

       隨著業務的增加，可能存在這麼一種需求，就是需要從h5中直接跳轉到app。如果沒有安裝app的話，則提示到應用市場或者app store下載安裝。不過問題就在這個地方，單純的用h5是沒有方法判斷是否安裝過app的，不過這些是難不倒程式員的，他們通常會用這種代碼來解決

1 window.location.href = ‘app的協議‘；2 3 setTimeout(function() {4 window.location.href = ‘app的‘5 }，500)

      其實代碼很簡單，先去跳轉公司無線組app的自訂的schema協議；如果沒有安裝的app的話，第一行的代碼是不生效的，然後500ms跳轉到app的，通常是是藉助tx的親兒子應用寶或者app store 的下載串連。不過這種實現方式也是有問題的，因為你在中或者qq中即使安裝app的話，也不會跳轉到app中的，因為你司的app的schema協議是禁止跳轉的，除非加入了白名單。如果沒加入的白名單的話，解決方案通常在h5頁面某個地方加上一個簡單的tips.提示用瀏覽器開啟這個頁面。如果安裝了app，在瀏覽器可以正確的開啟app的。當然，這是安裝了app的情況，當沒有安裝app的話，上訴代碼在是沒有任何問題的，反正又沒法跳schema的，跳轉到app的肯定是萬無一失的。但是我們在上一步提示使用者在瀏覽器開啟頁面，這時候問題又來了。這時候會出現一個討厭的框框，這種框框是沒有啥好辦法禁止的。產生的原因嘛。就是那個schema協議搞得鬼。這時候我們的解決方式，就是在上一步的tip中提示‘如果安裝了app的話，用瀏覽器開啟’，哈哈，這麼簡單的嘛，其實很多公司都是這麼做的，簡單直接。目前我們的公司就是這種方式。或者直接給兩個按鈕算了。一個開啟，一個下載。有些時候，化繁為簡未嘗不是一種合適的方式。

     那麼有其他的方式來解決嘛。按理說是有的。上文說到禁止了app的schema協議。其實有一種協議，是沒有禁止的，那就是universal links。關於怎麼配置的話其實不是我們前端工程工作範疇的，甚至有寫無線端開發也是一臉懵逼，有興趣可直接百度。另外的一種方式是利用iframe,不過這種方式在ios9以上是不能成功的。所以這種方式也可以直接pass。

h5跳轉到app的實現