h5跳轉到app的實現

       隨著業務的增加，可能存在這麼一種需求，就是需要從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。