zoukankan      html  css  js  c++  java
  • 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。

    他山之石,可以攻玉
  • 相关阅读:
    pat 甲级 1065. A+B and C (64bit) (20)
    pat 甲级 1064. Complete Binary Search Tree (30)
    pat 甲级 1010. Radix (25)
    pat 甲级 1009. Product of Polynomials (25)
    pat 甲级 1056. Mice and Rice (25)
    pat 甲级 1078. Hashing (25)
    pat 甲级 1080. Graduate Admission (30)
    pat 甲级 团体天梯 L3-004. 肿瘤诊断
    pat 甲级 1099. Build A Binary Search Tree (30)
    Codeforce 672B. Different is Good
  • 原文地址:https://www.cnblogs.com/webDojo/p/9281316.html
Copyright © 2011-2022 走看看