纵观现在每家移动网站，打开首页的时候，都有各种各样的形式来提示你下载自身的移动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自带浏览器的测试，需要进行兼容性测试，但是按照个人感觉，应该不会有大问题。

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

给你的移动网站加点料：推荐下载App，如果本地安装则直接打开本地App（Android/IOS）的更多相关文章

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

    推荐下载App,如果本地安装则直接打开本地App(Android/IOS) - 纵观现在每家移动网站,打开首页的时候,都有各种各样的形式来提示你下载自身的移动App(Android/IOS),这是做移 ...

  2. 如何一步一步用DDD设计一个电商网站（六）—— 给购物车加点料，集成售价上下文

    阅读目录 前言 如何在一个项目中实现多个上下文的业务 售价上下文与购买上下文的集成 结语 一.前言 前几篇已经实现了一个最简单的购买过程,这次开始往这个过程中增加一些东西.比如促销.会员价等,在我们的 ...

  3. python3.4学习笔记(七) 学习网站博客推荐

    python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...

  4. 使用Dynamics 365 CE Web API查询数据加点料及选项集字段常用查询

    微软动态CRM专家罗勇 ,回复336或者20190516可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me. 紧接上文:配置Postman通过OAuth 2 implicit ...

  5. phpMyAdmin提示“无法在发生错误时创建会话，请检查 PHP 或网站服务器日志，并正确配置 PHP 安装。”

    这是以前学生在使用phpwamp时遇到的一个问题(其他环境或是自己搭建时遇到此问题,解决方式同理) 其实这个问题与PHPWAMP本身无关,是电脑设置的问题,一般正常情况下不会出现这个问题. 现在把学生 ...

  6. 20款高质量的 HTML5 网站模板【免费下载】

    下面的列表集合了20款高质量的免费 HTML5 网站模板,这些专业的模板能够让你的网站吸引很多的访客.这些免费的 HTML5 模板虽然不是响应式的,不过都很实用.赶紧来看看. 您可能感兴趣的相关文章 ...

  7. 20款免费的 PSD 网站模板【免费下载】

    如果你的新项目预算很低,那么免费网站模板对你来说是一个很好的解决方案.有很多的预先设计的网站模板 PSD 素材可以使用和自由定制.在这里,你会发现可供下载的超级棒的免费网站模板.你可以使用它们来创建自 ...

  8. phpMyAdmin:无法在发生错误时创建会话，请检查 PHP 或网站服务器日志，并正确配置 PHP 安装。

    一:错误提示 英文:Cannot start session without errors, please check errors given in your PHP and/or webserve ...

  9. Discuz建站教程：本地安装discuz网站

    网站建目前都很简单,建站容易,管理难,网站做大优化更难.本人有建站经验,目前给大家分享一下如何建站,当然,目前使用的是本地建站,因为非本地建站需要购买域名和网站空间,当然,朋友们想真正建站的,对于一些 ...

随机推荐

  1. spring mvc---controller返回值

    1.ModelAndView 类似servlet,之前例子在用 addObject setViewName 2.String a.表示返回逻辑视图名 spring mvc的视图解析器中设置.(在web ...

  2. Java 理论与实践: 修复 Java 内存模型，第 2 部分（转载）

    在 JSR 133 中 JMM 会有什么改变? 活跃了将近三年的 JSR 133,近期发布了关于如何修复 Java 内存模型(Java Memory Model, JMM)的公开建议.在本系列文章的 ...

  3. XJOI 3605 考完吃糖(DAG图dfs)

    题目描述: 期末考试考完了,分数也出来了,大家准备吃糖庆祝一下,为了鼓励同学们下学期能取得更好的成绩,司马红豆同学让n个同学站成一排,如果某个同学的分数比相邻的一个同学要高,那么他得到的糖果就会比这个 ...

  4. 6、Semantic-UI之动画按钮样式

    6.1 动画按钮样式 在Semantic-UI中提供了三种动画样按钮式表,分别为: 左右移动 上下移动 淡入淡出   在实际开发中,很少使用这种动画按钮,根据实际情况使用,强制使用到页面中反而不太适合 ...

  5. (转)@RequestParam @RequestBody @PathVariable 等参数绑定注解详解

    引言: 接上一篇文章,对@RequestMapping进行地址映射讲解之后,该篇主要讲解request 数据到handler method 参数数据的绑定所用到的注解和什么情形下使用: 简介: han ...

  6. asp.net core + 前端H5 页面视频站制作尝试

    .net core 2.1出来一段时间了,一直关注,前周花了半天时间学习了一下,特制作了一个视频小站(欢迎扫码体验): 页面首页效果如下: 播放页面效果如下: 部分代码: using ENT.IBLL ...

  7. jquery 全选反选 .prop('checked',!$(this).is(':checked'));

    //废话不说直接上代码 $("#").click(function(){ $("#content-div label input[type='checkbox']&quo ...

  8. webapi权限常见错误

    webapi权限常见错误 错误一: Response for preflight has invalid HTTP status code 405. 解决方案: 屏蔽配置文件中的如下代码 <!- ...

  9. leetcode 19. 删除链表的倒数第N个节点 JAVA

    题目: 给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点. 示例: 给定一个链表: 1->2->3->4->5, 和 n = 2. 当删除了倒数第二个节点后,链 ...

  10. Mysql 索引原理《一》索引原理与慢查询2

    一 索引未命中 并不是说我们创建了索引就一定会加快查询速度,若想利用索引达到预想的提高查询速度的效果,我们在添加索引时,必须遵循以下问题 1 范围问题,或者说条件不明确,条件中出现这些符号或关键字:& ...