给你的移动网站加点料：推荐下载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自带浏览器的测试，须要进行兼容性测试，可是按照我的感受，应该不会有大问题。

　　若是哪位看官发现问题了，请评论中给我留言！