纵观现在每家移动网站，打开首页的时候，都有各种各样的形式来提示你下载自身的移动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. IOCP~~

    下载源代码 原文网址:http://www.codeproject.com/KB/IP/iocp_server_client.aspx 源码使用了高级的完成端口(IOCP)技术,该技术可以有效地服务于 ...

  2. Python 抓取html所有特定元素的方法

    直接上代码哦,够直接了吧~ from lxml import etree #import mechanize import lxml.html #import cookielib #br = mech ...

  3. C++语言运算符的功能、优先级和结合性

    优先级 运算符 名称或含义 使用形式 结合方向 说明 1 [] 数组下标 数组名[常量表达式] 左到右   () 圆括号 (表达式)/函数名(形参表)   . 成员选择(对象) 对象.成员名   -& ...

  4. .net 任务（Task）

    1. Task (任务): 很容易调用 ThreadPool.QueueUserWorkItem 实现异步操作,但是这个技术有许多 .net 引入Task类型来使用任务. 如下几种方式都是实现异步的方 ...

  5. 7z文件格式及其源码的分析(二)

    这是第二篇, 第一篇在这里: 这一篇开始分析7z的源码结构. 一. 准备工作: 1. 源码下载: 可以从官方中文主页下载:http://sparanoid.com/lab/7z/． 为了方便, 这里直 ...

  6. POST or GET？

    在web2.0时代,很多网站不再是枯燥的静态页面,也不是那种加上让用户填写一些表单的简单页面.它们已经功能复杂的应用程序.本文,着重改善这些web应用程序出现的问题中的get和post.针对不同需求的 ...

  7. UWA发布 | 2017 Unity手游体检蓝皮书 — ARPG篇

    报告目录: 一.ARPG手游总体性能开销分析 二.ARPG手游CPU模块性能开销分析 三.ARPG手游内存模块性能开销分析 四.ARPG手游资源管理分析 五.UWA对于ARPG手游研发团队的建议 一. ...

  8. 【OCP|052】iZ0-052最新题库及答案整理-第9题

    9.Which is true about the Automatic Diagnostic Repository (ADR)? A) It includes diagnostic data for ...

  9. “全栈2019”Java第七十八章：内部类可以继承其他类吗？

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  10. php面向对象编程_2

    1, 抽象类 ,用abstract关键字来修饰一个类,这个类就是抽象类:如果用abstract关键字来修饰一个方法,这个方法就是抽象方法,如果是抽象方法就不能实现(即抽象方法只能声明,不能定义). 抽 ...