h5跳转到app的实现

Posted 2020-12-03 webdojo

       随着业务的增加，可能存在这么一种需求，就是需要从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。