h5跳转到app的实现

       随着业务的增加,可能存在这么一种需求,就是需要从h5中直接跳转到app。如果没有安装app的话,则提示到应用市场或者app store下载安装。不过问题就在这个地方,单纯的用h5是没有方法判断是否安装过app的,不过这些是难不倒程序员的,他们通常会用这种代码来解决

1 window.location.href = 'app的协议'2 
3 setTimeout(function() {
4 window.location.href = 'app的下载地址'
5 },500)

      其实代码很简单,先去跳转公司无线组app的自定义的schema协议;如果没有安装的app的话,第一行的代码是不生效的,然后500ms跳转到app的下载地址,通常是是借助tx的亲儿子应用宝或者app store 的下载连接。不过这种实现方式也是有问题的,因为你在微信中或者qq中即使安装app的话,也不会跳转到app中的,因为你司的app的schema协议是禁止跳转的,除非加入了白名单。如果没加入微信的白名单的话,解决方法通常在h5页面某个地方加上一个简单的tips.提示用浏览器打开这个页面。如果安装了app,在浏览器可以正确的打开app的。当然,这是安装了app的情况,当没有安装app的话,上诉代码在微信是没有任何问题的,反正又没法跳schema的,跳转到app的下载地址肯定是万无一失的。但是我们在上一步提示用户在浏览器打开页面,这时候问题又来了。这时候会出现一个讨厌的框框,这种框框是没有啥好办法禁止的。产生的原因嘛。就是那个schema协议搞得鬼。这时候我们的解决方式,就是在上一步的tip中提示‘如果安装了app的话,用浏览器打开’,哈哈,这么简单的嘛,其实很多公司都是这么做的,简单直接。目前我们的公司就是这种方式。或者直接给两个按钮算了。一个打开,一个下载。有些时候,化繁为简未尝不是一种合适的方式。

     那么有其他的方式来解决嘛。按理说是有的。上文说到微信禁止了app的schema协议。其实有一种协议,微信是没有禁止的,那就是universal links。关于怎么配置的话其实不是我们前端工程工作范畴的,甚至有写无线端开发也是一脸懵逼,有兴趣可直接百度。另外的一种方式是利用iframe,不过这种方式在ios9以上是不能成功的。所以这种方式也可以直接pass。

他山之石,可以攻玉
原文地址:https://www.cnblogs.com/webDojo/p/9281316.html