<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0,no shrink-to-fit=no,user-scalable=0; viewport-fit=cover" />
<title>下载APP</title>
<link rel="icon" type="image/png" href="./logo.png" />
</head>
<body>
<style type="text/css">
* {
margin: 0;
padding: 0;
overflow: hidden;
/* 禁止滚动条出现 */
}
body {
touch-action: manipulation;
/* 防止双击放大 */
overflow: hidden;
/* 防止页面上下滑动 */
touch-action: pan-x pan-y;
}
/* 防止双指缩放 */
@media (max-width: 1024px) {
html {
touch-action: manipulation;
}
}
#weixin-tip {
display: none;
position: fixed;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.8);
filter: alpha(opacity=80);
width: 100%;
height: 100%;
z-index: 100;
}
#weixin-tip p {
text-align: center;
margin-top: 10%;
padding: 0 5%;
position: relative;
}
#weixin-tip p img {
width: 100%;
}
#weixin-tip .close {
color: #fff;
padding: 5px;
font: bold 20px/24px simsun;
text-shadow: 0 1px 0 #ddd;
position: absolute;
top: 0;
left: 5%;
}
.bg_img {
width: 100%;
height: 100vh;
object-fit: fill;
}
.test {
position: relative;
z-index: 0;
height: 100vh;
/* 设置容器高度为视窗高度 */
width: 100%;
overflow: hidden;
/* 隐藏溢出部分 */
}
.download_btn {
position: absolute;
left: 50%;
bottom: 10vh;
z-index: 10;
max-width: 60%;
height: auto;
transform: translate(-50%, -50%);
}
</style>
<div class="test" id="test">
<img src="./download.jpg" class="bg_img" id="bg_img" />
<img src="./download-btn.png" id="J_weixin" class="download_btn" />
<div id="weixin-tip">
<p><img src="./live_weixin.png" alt="微信打开" /><span id="close" title="关闭" class="close">×</span></p>
</div>
</div>
<script type="text/javascript">
function is_weixin() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
} else {
return false;
}
}
// 判断设备类型
function isIOS() {
return /iPhone|iPad|iPod/i.test(navigator.userAgent);
}
// 执行跳转逻辑
function downloadAPP() {
// 使用 uniapp 设置的 scheme url，替换成你的实际 scheme
var appScheme = "yoofa://";
window.location.href = appScheme;
// 检查是否是 iOS
if (isIOS()) {
// 如果无法跳转到 app，可以提供下载链接
setTimeout(function () {
let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden
if (typeof hidden == "undefined" || hidden == false) {
//App store下载地址
window.location.href = "https://apps.apple.com/cn/app/id6473148988";
}
}, 2000);
} else {
setTimeout(function () {
let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden
if (typeof hidden == "undefined" || hidden == false) {
//应用宝下载地址 (emmm 找不到淘宝应用宝的地址，这里放的是 lucky coffee 地址)
window.location.href = "https://h5.yoofa.cn/app_url/yoofa_link.apk";
}
}, 2000);
}
}
window.onload = function () {
var isWeixin = is_weixin();
var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight; //兼容IOS，不需要的可以去掉
var btn = document.getElementById('J_weixin');
var tip = document.getElementById('weixin-tip');
var close = document.getElementById('close');
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
if (isSafari) {
document.getElementById('bg_img').style.height = '100%';
document.getElementById('test').style.height = '100%';
}
if (isWeixin) {
btn.onclick = function (e) {
tip.style.height = winHeight + 'px'; //兼容IOS弹窗整屏
tip.style.display = 'block';
return false;
}
close.onclick = function () {
tip.style.display = 'none';
}
} else {
downloadAPP()
btn.onclick = function (e) {
downloadAPP()
}
}
}
</script>
</body>
</html>
