Alex

利用js判断APP是否安装进行相应跳转

做iOS开发也有些时间了,但随着接触的东西越来越多总是避免不了学了太久不用就会忘记的尴尬。闲来无事自己琢磨着开了个博客站,以此记录自己开发历程中的点点滴滴。

这也是我本站的第一篇博客,实在不知道写啥就以当下遇到的事情写吧。

前段时间有位前端朋友问我web怎么跳转APP,并且要判断APP是否在手机上安装,如果没安装则跳向APP的下载页面,当时我也不知道咋实现的……..而且也在做事情就说不知道- -(其实我是觉得不行的….但是朋友拿着知乎的页面给我看他们实现了….)。现在闲下来了,我又想起了这个问题,既然别人能实现,咱就能实现不是?首先,我们要知道怎么在APP外部打开一个APP,毕竟咱是主打iOS方向的,就先看看怎么在一个应用中打开另外一个应用吧(是不是很像分享的情景,哈哈,分享就是这么做的)。

首先创建一个名为demoOne的工程,如图在工程中添加一个URL Types 设置好你的URL Schemes(图中箭头处,可以自己定义,一定要是能唯一标识你APP的字符串,我这里就随便起了个demoone的名字)

demoone

设置好了运行让应用成功安装在你的模拟器中,我这为了省点截图尺寸所以选择的iPhone5s。然后创建一个新的工程demoTwo,我们用storyboard快速拖一个按钮建立一个点击事件写入跳转事件。

运行工程

Simulator Screen Shot 2015年11月27日 上午9.54.24

点击按钮实现跳转,如图,iOS9状态栏多了一个返回原APP的按钮,之前是没有的。

demotwo

其实这相当于自己定义了一个URL协议进行跳转,我们也可以用这个协议来传值,查阅文档,iOS系统带有相应的代理方法来接受这个url,这样我们就可以定义一些协议做一些想做的事情了。

我们在demoOne工程的appDelegate中实现代理方法并打印url

同时在demoTwo工程的点击事件中传入自己想要传的值,在此我们传入helloworld

运行demoTwo点击跳转,可见demoOne中已接收到url参数

demoline


好了,APP之间的跳转就讲到这里,下面讨论本文的重点,有些项目的web端wap界面也会有类似打开APP的按钮,如知乎、淘宝。如果手机没安装APP会怎样呢,经本人测试,在本机没安装APP的情况下,点击按钮会智能的跳转到相应的APP下载页面,这无疑在用户体验上是十分不错的,那么web是如何实现这个判断逻辑的呢?当然是利用js啦~~~~~~~

Mac OS系统自带有apache服务,同时Xcode的模拟器也是与本机网络桥接的。所以方便了我们测试。

于是我们在本机apache服务器根目录下创建test.html文件,在模拟器中访问测试。

经过长时间思考,查资料,我们貌似没有办法直接判断APP是否安装,于是只有采用一个取巧的办法了。我们利用访问超时的逻辑来判断,直接访问自定义APP URL,如果手机安装有改APP则会响应访问请求直接跳转,否则访问超时则跳向APP下载链接。代码如下

但是经过操作我发现一个问题,无论手机是否安装了APP这个超时的方法都执行了…..装了APP也跳向指定页面!这不科学!…..但是我也不是web大神,只是有空的时候研究一下web….(毕竟工作还是iOS),其中具体的机制我还真不清楚。但我又不能忍受这样的体验,于是陷入了尴尬。


 

十年后….


经过反复思考测试,我发现打开APP弹窗会卡住超时函数的执行….

Simulator Screen Shot 2015年11月27日 上午11.18.44

于是新方法诞生….我们打时间差!

我们在超链接中直接链接APP URL,当本机没有安装该APP时,不会弹出跳转窗口,则执行超时函数跳转至百度。当本机安装有该APP时,则会弹出跳转窗口你再点击跳转,因为之前说了这个窗口会卡住setTimeout函数执行。看我的代码,当窗口弹出,你再点击跳转,超时函数执行,这个过程一般是超过200ms时间差的(为了确保体验你也可以设置小一点的时差)。这样就可以确保当本机安装有该APP时就不跳转至APP下载页了~~~方法有点取巧,但是本人也想不出更好可行的方法了。如果你有更好的方法求告知!

本人QQ:59982435(欢迎php,h5,iOS爱好者交流讨论)

本人也有建立一iOS交流QQ群:477514828,十分欢迎大神前来指导!

 

码字很辛苦,转载请注明来自Alex博客笔记《利用js判断APP是否安装进行相应跳转》

评论

  1. 刘桂兰 #1

    楼主好屌啊,膜拜,我赵日天服了。

    回复
    2015-11-27
  2. Saucheong Ye #2

    sofa

    回复
    2015-11-27
  3. 李文杰 #3

    我良辰我服 ,楼主屌~

    回复
    2015-12-2
  4. 李文杰 #4

    6666666+

    回复
    2015-12-2
  5. 奥龙 #5

    66666

    回复
    2015-12-4