雲栖号資訊：【 點選檢視更多行業資訊】
在這裡您可以找到不同行業的第一手的上雲資訊，還在等什麼，快來！
1. 需求
前段時間開發項目，遇到了一個需求，簡單來說，就是我們H5的頁面有一個“在App中打開”的按鈕，使用者點選後，如果使用者已經安裝app，則直接打開app，如果使用者沒有安裝app，那就跳轉到下載下傳app的頁面
首先，在我的認知中，H5應該是沒有能力檢測到某一款app是否有安裝的（如果有小夥伴知道如何檢測，歡迎評論區告訴我，感謝！），是以我們需要一些技巧來完成判斷app是否安裝這一過程。
之後的步驟以安卓手機為例子介紹，目前ios9版本之後的系統不需要我們H5做這些判斷app是否安裝的流程（ios9之後可以通過提供一個通用連結（Universal link），做到沒有安裝app提示打開蘋果應用商城,安裝了app則直接跳轉打開）
2. 關于scheme協定
scheme協定是一種頁面内跳轉協定，我們可以通過定制scheme協定，跳轉到app中的想要跳轉的各個頁面。scheme協定是通過url的形式進行跳轉的，是以我們H5也可以通過這個url去跳轉到app内指定頁面，這就是H5打開app的原理。
scheme的url格式類似：
3. H5實作在App中打開的兩種方法
3.1 單純使用定時器判斷
這種的方法的思路是，首先把我們要跳轉的位址設定為與原生App同學一起定義好的scheme的url，之後，設定一個定時器，定時器裡執行的邏輯是跳轉到下載下傳app頁面，這樣，如果使用者手機沒有安裝app，就會在一段時間後跳轉到下載下傳頁面。
核心代碼如下：（可以使用iframe完成跳轉，但需要考慮iframe是否在ios等裝置中被允許）
存在的問題
上述實作方案的問題是，即使成功跳轉到App，原先的H5頁面也會在定時時間後，跳轉到下載下傳頁面，這樣體驗很不好
3.2 使用window的hidden屬性判斷
這個方法的思路是，如果成功喚起了app，我們的H5頁面被置于背景，window.hidden屬性會變為true,可以通過這個屬性變化來判斷app有沒有打開，沒打開就跳轉到下載下傳頁面，當然這裡也用到定時器
核心代碼如下：
目前一些安卓浏覽器，在app存在時，會首先跳出一個确認框，詢問使用者是否打開app，隻有使用者同意時，才會跳轉app，如果使用者始終沒有點選确認，最後還是會跳到下載下傳頁面，體驗不好
4. 一些思考
鑒于上面說到的一些問題，個人覺得可以在互動中增加一個“去下載下傳頁面”的互動，如果使用者沒有安裝app，一定時間後，首先提示使用者“是否沒有安裝app，點選去下載下傳”類似的按鈕，使用者點選跳轉到下載下傳頁面，這樣會不會更好呢。
【雲栖号線上課堂】每天都有産品技術專家分享！
課程位址：
https://yqh.aliyun.com/zhibo立即加入社群，與專家面對面，及時了解課程最新動态！
【雲栖号線上課堂 社群】
https://c.tb.cn/F3.Z8gvnK
原文釋出時間：2020-03-29
本文作者：catboy
本文來自：“掘金”，了解相關資訊可以關注“
掘金”