<!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>
微信下载APP跳转到浏览器页面，遮罩层提示，浏览器下载APP逻辑
需积分: 0 55 浏览量
更新于2024-02-20
收藏 314KB ZIP 举报
在移动互联网时代，微信作为一款超级应用，已经深入人们的日常生活，包括在线沟通、社交媒体互动以及各种服务的接入。然而，由于微信内置的安全策略，对于直接在微信内部下载非官方市场提供的应用程序（APP）有所限制。这导致了用户在微信中点击下载链接时，通常会被引导至浏览器进行下载。这一过程涉及到了“微信下载APP跳转到浏览器页面”的逻辑，以及相关的用户体验设计，如遮罩层提示。下面将详细讲解这一逻辑及其背后的原因和实现方法。
微信的这一策略是为了保护用户安全，防止恶意软件通过微信传播。当用户点击一个指向APP下载的链接时，微信会检测该链接是否符合其安全标准。如果不符，微信会阻止直接下载，并引导用户通过更为安全的浏览器进行下载，以确保用户在知情的情况下进行操作。
接着，跳转到浏览器页面的过程中，为了保持良好的用户体验，通常会显示一个遮罩层提示。这个提示信息通常包含“即将跳转至浏览器下载”或类似的文案，以告知用户接下来会发生什么，防止用户因突然的页面切换而感到困惑。遮罩层设计旨在减少用户的不安感，同时提醒他们这是一个正常的操作流程，而非应用出现错误或被拦截。
浏览器下载APP的逻辑主要包括以下几个步骤：
1. 用户在微信中点击下载链接。
2. 微信检测到链接并判断无法在微信内直接下载。
3. 显示遮罩层提示，告知用户即将跳转。
4. 用户确认后，微信启动系统默认的浏览器（如Safari、Chrome等），并自动加载下载链接。
5. 浏览器展示下载页面，用户可以查看APP信息并开始下载。
6. 下载完成后，浏览器通常会提供安装提示，用户按照提示完成安装过程。
在开发过程中，开发者需要注意以下几点：
- 确保下载链接的安全性：使用HTTPS加密协议，避免链接被篡改。
- 提供清晰的下载提示：在遮罩层中明确说明下载路径和原因，避免用户疑惑。
- 兼容性测试：确保在不同设备和浏览器上，跳转和下载过程都能正常运行。
- 用户体验优化：考虑到不同用户的习惯，可以提供复制下载链接手动粘贴到浏览器的备选方案。
通过以上解释，我们可以理解微信下载APP跳转到浏览器页面的逻辑是出于安全考虑，而遮罩层提示则旨在提升用户体验。在实际应用开发中，遵循这些原则和步骤，可以帮助我们构建更安全、流畅的下载流程。
downloadApp.zip （5个子文件） 
downloadApp 
downloadApp.html 4KB
logo.png 17KB live_weixin.png 21KB download-btn.png 6KB
download.jpg 292KB134 浏览量
2019-08-11 上传
122 浏览量
135 浏览量
171 浏览量
5星 · 资源好评率100%175 浏览量
2019-11-15 上传
2024-12-11 上传
5星 · 资源好评率100%152 浏览量
资源评论
