当前位置:   article > 正文

H5页面在浏览器中跳转APP的方式/URL Scheme/Universal Link_url scheme前端

url scheme前端

1、URL Scheme (Android或者IOS 9以下)

概念

URL Scheme是我们最常见的一种跳转app的方式,其实就是通过一个链接跳转。
格式为[scheme]://[host]/[path]?[query],具体内容需要h5端与app端协调。例如微信扫一扫weixin://dl/scan

统一资源标识符(英语:Uniform Resource Identifier,缩写:URI)在电脑术语中是一个用于标识某一互联网资源名称的字符串。URI的最常见的形式是统一资源定位符(URL),经常指定为非正式的网址。

流程

通过这种方式跳转APP的具体流程为:(APP端已经配置好的情况下)

  1. h5端通过a链接点击/嵌入iframe跳转/本页面路径跳转链接的方式触发。
    (如果是在微信中打开,需要提醒去其他浏览器打开)
const url = 'weixin://dl/scan';

// a链接
let ahref = document.createElement('a');
ahref.href = url;
ahref.click();

// 嵌入iframe跳转 (ios9以后,屏蔽iframe跳转)
let ifr = document.createElement("iframe");  
ifr.setAttribute('src', url);  
ifr.setAttribute('style', 'display:none');  
document.body.appendChild(ifr);  

// 本页面路径跳转
location.href = url;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  1. 手机端已经安装有APP时,直接跳转到APP。
  2. 手机端没有安装APP时,页面没有任何变化。
劣势

劣势主要体现在手机没有安装APP的情况下,不会给用户任何反馈信息,如果使用了本页面路径跳转方法,还可能跳转到一个404的页面,用户体验非常不好。

解决方案

所以在不使用本页面路径跳转的前提下,目前常见的解决方式有以下几种:

  1. 通过setTimeout设置定时器,如果离开了当前页面,setTimeout执行得会比设置的时间还要慢一些,通过Date.now()便可以监测到。如果没有离开当前页面,就说明用户没有安装APP,在设定的时间后就跳转APP下载页
var timeout, t = 1000, hasApp = true;  
var openScript = setTimeout(function () {  
        if (!hasApp) {
            // 跳转下载链接
        }
}, 2000)  
                
var t1 = Date.now();  
// 使用a标签方法或iframe方法触发URL Scheme

timeout = setTimeout(function () {  
       var t2 = Date.now();  
       if (t2 - t1 < t + 100) {  
             hasApp = false;
       }
}, t);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  1. 第二种也是通过setTimeout的方式判断是否离开页面,只是如果没有离开页面是弹出弹窗提示下载

2、Universal Link (IOS 9及以上)

概念

Universal Link是苹果在WWDC 2015上提出的iOS9的新特性之一。此特性类似于深层链接,并能够方便地通过打开一个Https链接来直接启动您的客户端应用(手机有安装App)。
可以在微信内直接打开其他app。

流程
  1. h5端点击链接触发跳转。
  2. 手机端已经安装有APP时,直接跳转到APP。
  3. 手机端没有安装APP时,跳转到自定义的web页面。
劣势
  1. 只适用于ios 9及以上。
  2. 只能使用https协议。
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/553201
推荐阅读
相关标签
  

闽ICP备14008679号