H5页面在浏览器中跳转APP的方式/URL Scheme/Universal Link

2024-06-30 13:44| 来源: 网络整理| 查看: 265

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端已经配置好的情况下）

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; 手机端已经安装有APP时，直接跳转到APP。手机端没有安装APP时，页面没有任何变化。劣势

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

解决方案

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

通过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

【本文地址】

公司简介

联系我们