给你的移动网站加点料:推荐下载App,如果本地安装则直接打开本地AppAndroid/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端应该怎么做?只有双方都进行相关配置结合之后才能实现这个需求。

经过两个多小时的努力,我玩通了这中间的猫腻,说了好多关于需求的东西,下面就直接上代码吧,希望对大家能有一些帮助。

);
                    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自带浏览器的测试,需要进行兼容性测试,但是按照个人感觉,应该不会有大问题。

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

更多相关文章
  •        今日Windows 7 RTM简体中文旗舰版终于出来啦,天缘特别整理提供Windows 7 RTM 7600.16385(x86/x64)简体中文旗舰版ISO下载地址供大家学习和测试参考.Windows 7旗舰版本是Windows 7中配置最高的全功能版本,当然售价也是最贵,特别声明本 ...
  • phpMyAdmin错误-无法在发生错误时创建会话,请检查PHP或网站服务器日志,并正确配置PHP安装
    当登录 phpMyAdmin 出现错误提示"无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装.".原因是退出phpMyAdmin的时候,没有点"退出"而退出,而是直接叉掉浏览器窗口,当再次登录phpMyAdmin的时候就会出 ...
  • 这是站长的好东西网站广告代码演示+下载 太强了[url]http://asp99.net/adjs.htm[/url]
  • 挨踢IT脱口秀介绍--给你的生活加点料
    挨踢(IT)脱口秀的内容&成绩:1.内容不打草稿,以最真实的方式说给你听.北漂.IT.生活.技术.娱乐.大实话.薪水.跳槽.行业真相.热点事件等一网打尽.2.收听挨踢脱口秀之后你可以不看新闻也能知道热点事件,你可以不看书也能读到书,你可以点播你想听的话题,你可以分享自己的观点,你可以听到别人 ...
  • 1,文本框焦点 效果:获得焦点的时候有一段提示文字,没有获得焦点的时候为空. 代码: <input type="text" value="请输入密码" onblur="if(value=='请输入密码'){value=''}" onf ...
  • 很不错的模板素材网站,在国外有专门的公司做模板,上传到网站后首先让用户进行一段时间的体验,然后根据体验来成立正式用户,从公司的简介中发现他们做模板是根据用户需求以及使用风格,有专门的行情分析师(懂这个公司业务的)和专业美工人员.销售客服人员等等.就想一个小小的设计系统,从采单到设计到模板实现 后期销 ...
  • [推荐]图解虚拟机VMware Workstation的安装与使用
  • 项目一期结束了,老板让我写一个Review文档.之前没有接触过,Google模板的时候让我发现了 ITS Standard Downloadable Templates.下载几个看了下,感觉还不错,推荐给大家.ITS Project Management Flowchart - PDF overvi ...
一周排行
  • phpcmsv9前台无限制GETSHELL
    0x01:介绍PHPCMS V9(后面简称V9)采用PHP5+MYSQL做为技术基础进行开 ...
  • 一.不谈什么 1.咱们不谈老板就是首席产品经理,如周鸿祎.张小龙.史玉柱.雷军... 2.咱们不谈产品经理是All In One的领导 二.产品经理不是什么 1.产品经理不是项目经理:整个项目的进度/任务分配.整个项 ...
  • 秒开缓存系统支持的硬件阵列卡
    秒开缓存系统支持的硬件阵列卡列表(不限于以下型号) 目前可以确认完美支持的有:HP/惠普 ...
  • 建立源文件List.cpp#include"List.h" int main() {     Test();     system("pause");     return 0 ...
  • 一.数字推理(加减乘除幂的先后运算)(一)等差数列(二)等比数列(三)平方数列1.完全平方数列2.一个数的平方是第二个数一个数的平方加减一个数等于第二个数3.隐含完全平方数列1)通过加减一个常数归成完全平方数列:0, ...
  • RFC一致性 Methods GET: 获取某个资源,幂等且无副作用. POST: 创建一个新的资源. PUT: 替换某个已有的资源.幂等有副作用. PATCH: 修改某个已有的资源. DELETE:删除某个资源.幂 ...
  • python基础(3)--条件判断循环语句与列表解析,生成器
    判断循环语句语法说明:1,if        if boolean_expression: ...
  • "1.自动保存和加载上一次vim打开的编辑信息"  设置mksession "    设置sessionoptions可以用在UNIX下 set sessionoptions+=slas ...
  •   现象:使用vmware converter对一台ibm x3650做完p2v成功之后,将之前的服务器关机,在这台机器上设置ip地址,会提示该ip地址已经配置给其他硬件.    解决办法,定位到注册表的如下位置:分 ...
  • 1.冒泡排序(1)基本思想:在要排序的一组数中,对当前还未排好序的范围内的全部数,自上而下对相邻的两个数依次进行比较和调整,让较大的数往下沉,较小的往上冒.即:每当两相邻的数比较后发现它们的排序与排序要求相反时,就将 ...