縱觀現在每家移動網站，打開首頁的時候，都有各種各樣的形式來提示你下載自身的移動App（Android/IOS），這是做移動客戶端產品的一個很好地引流的手段。當然各家引流下載的交互和視覺各不相同，有的是完全“強奸”用戶，有的是完全取悅用戶。但是最終的形式就是你點擊一個按鈕之后，可以去下載對應的App（Android直接下載對應的Apk文件，IOS會跳轉到App store的對應地址）。
之前開發這個需求的時候，就是很簡單的針對用戶訪問的useragent進行判斷，如果android設備，給出的是apk文件的下載URL，點擊之后直接下載；如果ios設備，給出的是App store的URL。但是如此存在的問題有如下幾個：
1、用戶本地如果已經安裝了推薦的App，點擊之后還是進行對應的apk文件下載和App store的跳轉。這樣對用戶來說，會有這樣一個聲音：這網站有病吧？我已經下載安裝了他的App，怎么還給我下載還給我跳轉呢？
2、用戶本地如果已經安裝了推薦的App，但是點擊之后下載的apk文件版本和本地版本是沖突的，這樣就會有版本沖突問題。當然，IOS不存在這個沖突問題。
於是乎，我們便會想，引流下載本來就是個“強奸”用戶的手段，本來就很“流氓”，那我們怎么可以把這種對用戶的“強奸”和“流氓”，讓用戶能接受的心里舒服點呢？我們需要尋求一個臨界點，既“強奸”了用戶，也要讓他覺得還挺爽。
結果是，我們需要這樣一種實現方式：出現引流下載的時候，用戶點擊下載的時候，對用戶設備進行一個判斷，如果用戶本地安裝了當前推薦的App，就直接打開App，而不會再去下載。如果本地沒有安裝，再去進行后續的下載操作。
本着這個目的和這個想法，我們一路看着移動網站的發展，最近發現大眾點評有了（？），淘寶有了，那作為始終追求前沿技術動態的我們，怎么可能能放過這么友好的“強奸”方式呢？我也研究了一下淘寶的源代碼，但是就像我一直說的，我是個“偽”前端，對js不通不通，所以我幾乎看不懂！怎么辦呢？求助google去吧，找了兩套實現方案，但是直接套用之后都不能完全達到我的效果，那些作者給出了技術要點，但是沒有結合地說出前端頁面應該怎么做？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定義文件，但是有兩點需要注意的：
1、以上intent的定義千萬不要放入到主Activity中，因為主Activity是android.intent.action.MAIN，而這里是VIEW，兩者是沖突的，我在這上面糾結了好久。將以上的intent定義放到主Activity以后的任意Activity。
2、scheme的配置，android不像IOS，在ios里面可以隨意進行配置，只需要schema（nihao）和host（11111）就ok，這樣訪問的時候只要：nihao://11111。但是android端最好把URL Schema配置成如果本地沒有對應App的下載URL。
好了，說完了，按照上面的設置android肯定木問題的，慢慢玩去吧。不過以上代碼只經歷過safari瀏覽器和android自帶瀏覽器的測試，需要進行兼容性測試，但是按照個人感覺，應該不會有大問題。
如果哪位看官發現問題了，請評論中給我留言！