給你的移動網站加點料：推薦下載App，若是本地安裝則直接打開本地App（Android/IOS）

時間 2019-11-12

標籤移動網站加點推薦下載 app 若是本地安裝直接打開 android ios 欄目無線简体版

原文原文鏈接

　縱觀如今每家移動網站，打開首頁的時候，都有各類各樣的形式來提示你下載自身的移動App（Android/IOS），這是作移動客戶端產品的一個很好地引流的手段。固然各家引流下載的交互和視覺各不相同，有的是徹底「強姦」用戶，有的是徹底取悅用戶。可是最終的形式就是你點擊一個按鈕以後，能夠去下載對應的App（Android直接下載對應的Apk文件，IOS會跳轉到App store的對應地址）。javascript

　　以前開發這個需求的時候，就是很簡單的針對用戶訪問的useragent進行判斷，若是android設備，給出的是apk文件的下載URL，點擊以後直接下載；若是ios設備，給出的是App store的URL。可是如此存在的問題有以下幾個：html

一、用戶本地若是已經安裝了推薦的App，點擊以後仍是進行對應的apk文件下載和App store的跳轉。這樣對用戶來講，會有這樣一個聲音：這網站有病吧？我已經下載安裝了他的App，怎麼還給我下載還給我跳轉呢？前端

二、用戶本地若是已經安裝了推薦的App，可是點擊以後下載的apk文件版本和本地版本是衝突的，這樣就會有版本衝突問題。固然，IOS不存在這個衝突問題。java

　　因而乎，咱們便會想，引流下載原本就是個「強姦」用戶的手段，原本就很「流氓」，那咱們怎麼能夠把這種對用戶的「強姦」和「流氓」，讓用戶能接受的內心舒服點呢？咱們須要尋求一個臨界點，既「強姦」了用戶，也要讓他以爲還挺爽。android

　　結果是，咱們須要這樣一種實現方式：出現引流下載的時候，用戶點擊下載的時候，對用戶設備進行一個判斷，若是用戶本地安裝了當前推薦的App，就直接打開App，而不會再去下載。若是本地沒有安裝，再去進行後續的下載操做。ios

　　本着這個目的和這個想法，咱們一路看着移動網站的發展，最近發現大衆點評有了（？），淘寶有了，那做爲始終追求前沿技術動態的咱們，怎麼可能能放過這麼友好的「強姦」方式呢？我也研究了一下淘寶的源代碼，可是就像我一直說的，我是個「僞」前端，對js不通不通，因此我幾乎看不懂！怎麼辦呢？求助google去吧，找了兩套實現方案，可是直接套用以後都不能徹底達到個人效果，那些做者給出了技術要點，可是沒有結合地說出前端頁面應該怎麼作？app端應該怎麼作？只有雙方都進行相關配置結合以後才能實現這個需求。瀏覽器

　　通過兩個多小時的努力，我玩通了這中間的貓膩，說了好多關於需求的東西，下面就直接上代碼吧，但願對你們能有一些幫助。app

<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<title>頁面打開App</title>
</head>
<body>
<script language="javascript">
function open_or_download_app() {
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
　　　　　　　　　　　 // 判斷useragent，當前設備爲ios設備
var loadDateTime = new Date();
　　　　　　　　　　　　// 設置時間閾值，在規定時間裏面沒有打開對應App的話，直接去App store進行下載。
window.setTimeout(function() {
var timeOutDateTime = new Date();
if (timeOutDateTime - loadDateTime < 5000) {
window.location = "https://itunes.apple.com/cn/app/hu-lu/id627370076?mt=8";
} else {
window.close();
}
},
25);
window.location = "XXXX://XXXX";　　// Android端URL Schema
} else if (navigator.userAgent.match(/android/i)) {
　　　　　　　　　　　　// 判斷useragent，當前設備爲ios設備
　　　　　　　　　　　　window.location = "XXX://YYYY:8080/ZZZ/AAAA/BBB.html";　　// Android端URL Schema
　　　　　　　　　 }
　　　　　　　}
　　　　</script>
　　　　<p style="height:30px;line-height:30px;text-align:center;">WAP頁面打開本地應用測試</p>
　　　　<a href="javascript:open_or_download_app();" style="margin:100px 100px 100px 100px;"> 打開本地阿里巴巴 </a>
　　</body>
</html>測試

　　移動網站的實現代碼就是上面這段，不復雜吧？我感受很不復雜。可是光有這段代碼是不行了，有心人會發現我代碼中有XXXX。。。相似的東東，這個是由App端設置的URL Schema。
網站

　　什麼是URL Schema呢？我不告訴你，本身問google和度娘去。

　　IOS端怎麼來配置URL Schema呢？這個我也不會告訴你，由於我沒有作過IOS開發，因此具體的配置方法我也不知道，若是有IOS開打的看客的話，歡迎在評論中給出IOS端URL Schema的配置方法。

　　有人會說，你不也沒說客戶端怎麼玩呢？光有你上面一段代碼有屁用啊？等等，我染指過Android應用開發，因此呢，我會給出Android端URL Schema的配置方法，各位僅作參考。

<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<category android:name="android.intent.category.LAUNCHER" />
<data android:scheme="XXX" android:host="YYYY" android:port="8080" android:path="ZZZ/AAAA/BBB.html"/>
</intent-filter>

　　將以上intent定義部分追加到你的Manifest定義文件，可是有兩點須要注意的：

一、以上intent的定義千萬不要放入到主Activity中，由於主Activity是android.intent.action.MAIN，而這裏是VIEW，二者是衝突的，我在這上面糾結了很久。將以上的intent定義放到主Activity之後的任意Activity。

二、scheme的配置，android不像IOS，在ios裏面能夠隨意進行配置，只須要schema（nihao）和host（11111）就ok，這樣訪問的時候只要：nihao://11111。可是android端最好把URL Schema配置成若是本地沒有對應App的下載URL。

　　好了，說完了，按照上面的設置android確定木問題的，慢慢玩去吧。不過以上代碼只經歷過safari瀏覽器和android自帶瀏覽器的測試，須要進行兼容性測試，可是按照我的感受，應該不會有大問題。

　　若是哪位看官發現問題了，請評論中給我留言！