推荐下载App，如果本地安装则直接打开本地App（Android/IOS） -

纵观现在每家移动网站，打开首页的时候，都有各种各样的形式来提示你下载自身的移动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设备
var loadDateTimes = new Date();
window.setTimeout(function() {
var timeOutDateTimes = new Date();
if (timeOutDateTimes - loadDateTimes < 5000) {
window.location = "http://app.xiaomi.com/detail/118573";
} else {
window.close();
}
},
25);　　　　　　　　　　　　
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自带浏览器的测试，需要进行兼容性测试，但是按照个人感觉，应该不会有大问题。

随机推荐

C++-STL：vector用法总结
目录简介用法 1. 头文件 2. vector的声明及初始化 3. vector基本操作简介 vector,是同一类型的对象的集合,这一集合可看作可变大小的数组,是顺序容器的一种.相比于数组,应 ...
Struts2-part1
作者:禅楼望月(http://www.cnblogs.com/yaoyinglong) 1. Struts2应用的开发步骤: ① 在web.xml中配置核心的Filter来拦截用户的请求. <w ...
js & disabled mouse right button menus
js & disabled mouse right button menus 网页可以屏蔽 F12 https://www.cnblogs.com/Marydon20170307/p/9122 ...
Intellij IDEA 系统路径配置
在使用IDEA启动Tomcat的时候,会读取系统路径,默认路径可能不是我们想要的,可以修改 C:\MyPrograms\IntelliJ IDEA 14.0.1\bin\idea.properties ...
JSON使用(4)
把JSON文本转换为JavaScript对象 JSON最常见的用法之一,是从web服务器上读取JSON数据(作为文件或作为HttpRequest),将JSON数据转换为JavaScript对象,然后在 ...
P2563 [AHOI2001]质数和分解
题目描述任何大于 1 的自然数 n 都可以写成若干个大于等于 2 且小于等于 n 的质数之和表达式(包括只有一个数构成的和表达式的情况),并且可能有不止一种质数和的形式.例如,9 的质数和表达式就有 ...
[洛谷P2986][USACO10MAR]伟大的奶牛聚集Great Cow Gat…
题目大意:给你一棵树,每个点有点权,边有边权,求一个点,使得其他所有点到这个点的距离和最短,输出这个距离题解:树形$DP$,思路清晰,转移显然卡点:无 C++ Code: #include < ...
[洛谷P3935]Calculating
题目大意:设把$x$分解质因数的结果为$x=p_1^{k_1}p_2^{k_2}\cdots p_n^{k_n}$,令$f(x)=(k_1+1)(k_2+1)\cdots (k_n+1)$,求$\su ...
BZOJ3243 [Noi2013]向量内积【乱搞】
题目链接 BZOJ3243 题解模数只有$2$或$3$,可以大力讨论如果模数为$2$,乘积结果只有$1$或$0$ 如果一个向量和前面所有向量乘积都为$1$,那么其和前面向量 ...
【BZOJ 2503】相框图论+讨论
这道题目就是考验了一下图论基本知识与对可爱的代码实现的应对能力. 我们先分析题干信息.我们要形成相框,那么所有的点的度为2(参与的点),那么所有度大于2的点都需要熔断,而且一次完成所有关于这个点的熔断 ...

推荐下载App，如果本地安装则直接打开本地App（Android/IOS）

推荐下载App，如果本地安装则直接打开本地App（Android/IOS） -

推荐下载App，如果本地安装则直接打开本地App（Android/IOS）的更多相关文章

随机推荐

热门专题