Skip to content

蒋秀川 / miniProject

Go to a project
Commit 2e65e839 by 陈岩
Options

feat: 增加app下载页html

1 parent 484a935d
Inline Side-by-side
Showing 1 changed file with 225 additions and 0 deletions
h5/src/app-download-html/index.html 0 → 100644
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vStore 下载</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}
body {
background: #fff;
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
flex: 1;
}
.footer {
width: 100%;
margin: 14px 0;
text-align: center;
font-weight: 400;
font-size: 14px;
color: #90949d;
line-height: 28rpx;
}
.i-logo {
position: absolute;
top: 20px;
left: 20px;
width: 89px;
}
.device-selector {
width: 100%;
display: flex;
justify-content: center;
margin-top: 56px;
gap: 20px;
}
.device-selector .device-btn {
width: 140px;
height: 40px;
background: #4084f5;
color: #fff;
border: 1px solid #4084f5;
border-radius: 6px;
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
}
.device-selector .device-btn:last-child {
background: #fff;
color: #4084f5;
}
.wechat-mask {
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
}
.wechat-mask .tip-box {
width: 100%;
height: 100%;
display: flex;
justify-content: flex-end;
padding-right: 20px;
}
.wechat-mask .tip-box .t-text {
width: 150px;
margin-top: 30px;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 32px;
}
</style>
</head>
<body>
<div class="container">
<img
src="https://store.keliuyun.com/download/app/index-bg.png"
style="width: 100%"
alt=""
/>
<img
src="https://store.keliuyun.com/download/app/index-logo.png"
class="i-logo"
alt=""
/>
<div class="device-selector">
<button class="device-btn" id="iosBtn">
<i class="fab fa-apple"></i> iPhone 下载
</button>
<button class="device-btn" id="androidBtn">
<i class="fab fa-android"></i> Android 下载
</button>
</div>
</div>
<div class="footer">
<p>版权所有@ 北京文安智能技术股份有限公司</p>
</div>
<!-- 微信引导层 -->
<div class="wechat-mask" id="wechatMask">
<div class="tip-box">
<div class="t-text">请点击右上角选择“浏览器中打开”</div>
<img
src="https://store.keliuyun.com/download/app/index-arrow.png"
alt=""
style="width: 50px; height: 40px"
/>
<!-- <button class="open-btn" id="openInBrowser">点击跳转浏览器</button> -->
</div>
</div>
<script>
// 检测是否在微信浏览器中
function isWeChatBrowser() {
const ua = navigator.userAgent.toLowerCase();
return ua.indexOf("micromessenger") !== -1;
}
// 检测设备类型
function getDeviceType() {
const ua = navigator.userAgent;
if (ua.match(/Android/i)) return "android";
if (ua.match(/iPhone|iPad|iPod/i)) return "ios";
return "other";
}
// 下载函数
function downloadApp() {
const device = getDeviceType();
if (device === "android") {
// 使用用户交互事件触发下载
window.location.href =
"https://store.keliuyun.com/download/app/vStore.apk";
} else if (device === "ios") {
// 跳转到App Store
window.location.href = "https://apps.apple.com/cn/app/6746431848";
} else {
alert("无法识别您的设备类型，请手动选择下载");
}
}
// 跳转到外部浏览器
function openInBrowser() {
const device = getDeviceType();
let url = "";
if (device === "android") {
url = "https://store.keliuyun.com/download/app/vStore.apk";
} else if (device === "ios") {
url = "https://apps.apple.com/cn/app/6746431848";
} else {
alert("无法识别您的设备类型，请手动选择下载");
return;
}
// 创建隐藏的a标签触发跳转
const link = document.createElement("a");
link.href = url;
link.target = "_blank";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
// 页面加载时执行检测
window.addEventListener("DOMContentLoaded", function () {
const wechatMask = document.getElementById("wechatMask");
const androidBtn = document.getElementById("androidBtn");
const iosBtn = document.getElementById("iosBtn");
const openInBrowserBtn = document.getElementById("openInBrowser");
// 检测是否在微信中打开
if (isWeChatBrowser()) {
wechatMask.style.display = "block";
// 添加跳转按钮事件
openInBrowserBtn.addEventListener("click", openInBrowser);
} else {
// 非微信环境，添加按钮事件
androidBtn.addEventListener("click", function () {
window.location.href =
"https://store.keliuyun.com/download/app/vStore.apk";
});
iosBtn.addEventListener("click", function () {
window.location.href = "https://apps.apple.com/cn/app/6746431848";
});
// 自动检测设备并跳转
const device = getDeviceType();
if (device === "android" || device === "ios") {
// 添加延迟让用户看到页面内容
setTimeout(downloadApp, 1000);
}
}
});
</script>
</body>
</html>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!