微信或浏览器访问h5链接，点击操作后进入指定app
- Universal Links IOS >= 9环境下会默认打开apple-app-site-association文件
universal link是ios9之后出的功能。它是通过传统HTTP链接来启动App。它其实就是一个https开头的链接，还要满足一些特定的规则才能被识别为universal link，才能直接唤起app（支持传参）
缺点：个别浏览器不支持唤醒，不支持跳转到app store
参考网站：
b站：ios 微信直接打开、safari直接打开。其他浏览器 指定safari浏览器打开指示弹框，或者跳转app store
function openApp(url) {
var u = navigator.userAgent, ua = u.toLowerCase();
if (ua.match(/iPhone\sOS/i) == "iphone os") {
// 判断是否是qq、qq浏览器、微博 （这里的qq判断不精准）
if(ua.match(/QQ/i) == "qq" || ua.match(/MQQBROWSER/i) == "mqqbrowser" || ua.match(/WeiBo/i) == "weibo"){
$(".fixed_back").show(); // 弹框显示
}else{
window.location.href = url; // Universal Link 指定连接
}
} else if (ua.match(/Android/i) == "android") {
// android 手机
}
}
$(".fixed_back").click(function () { $(".fixed_back").hide(); })
- URL Scheme
URL scheme是在app内配置的链接，比如：weixin://，superclass://
URL scheme的格式是[scheme]??/[host]/[path]?[query]
将参数配置在url scheme后面，唤醒app再进行页面跳转逻辑。
但是QQ和微信都把url scheme 唤醒app这种方式给禁了。
操作步骤：点击按钮，弹出指示弹框引导的分享；将链接在浏览器中显示，点击按钮后进行操作，ios进行判断如果能唤醒则唤醒，否则直接跳转ituns
- 应用宝或ituns（这两种方式不能传参数）
总结：app进行配置，在微信中实现体验较好（可能需要一个中间页面），如果是其他浏览器，辅助第二种方案（或只跳转到app store）
URL Scheme 应用代码（亲测有效）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div">测试跳转按钮</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
var app_links = "应用宝跳转链接",
url_scheme = "app的url scheme协议";
// app link
function detectVersion() {
let isAndroid, isIOS, isIOS9, version,
u = navigator.userAgent,
ua = u.toLowerCase();
if (u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1) { //android终端或者uc浏览器
//Android系统
isAndroid = true
}
if (ua.indexOf("like mac os x") > 0) {
//ios
var regStr_saf = /os [\d._]*/gi;
var verinfo = ua.match(regStr_saf);
version = (verinfo + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");
}
var version_str = version + "";
if (version_str != "undefined" && version_str.length > 0) {
version = parseInt(version)
if (version >= 8) {
// ios9以上
isIOS9 = true
}
else {
isIOS = true
}
}
return { isAndroid, isIOS, isIOS9 }
}
// 判断手机上是否安装了app，如果安装直接打开url，如果没安装，执行callback
function openApp(url, callback) {
let { isAndroid, isIOS, isIOS9 } = detectVersion()
if (isAndroid || isIOS) {
var timeout, t = 4000, hasApp = true;
var openScript = setTimeout(function () {
if (!hasApp) {
callback && callback()
}
document.body.removeChild(ifr);
}, 5000)
var t1 = Date.now();
var ifr = document.createElement("iframe");
ifr.setAttribute(‘src‘, url);
ifr.setAttribute(‘style‘, ‘display:none‘);
document.body.appendChild(ifr);
// 没有跳转
timeout = setTimeout(function () {
var t2 = Date.now();
if (t2 - t1 < t + 100) {
hasApp = false;
}
}, t); // 4000
}
if (isIOS9) {
location.href = url;
setTimeout(function () {
callback && callback()
}, 250);
setTimeout(function () {
location.reload();
}, 1000);
}
}
//跳h5
function goConfirmAddr() {
// 缺点：1. 未安装会弹出safari浏览器网址无效弹框
// 2，跳转前会有中间弹框
if (confirm(‘是否跳转app store‘)) { // **这里加一个确认弹框，防止唤醒app后继续执行下面的代码跳转到ituns**
window.location.href = app_links;
}
}
// window.onload = function(){ // 进入页面后直接执行
var oDiv = document.getElementById("div"); // 点击按钮执行
oDiv.onclick = function () { openApp(url_scheme, goConfirmAddr) };
// }
</script>
</body>
</html>