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。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM