微信扫描二维码下载app（安卓或IOS）

sunshinefcc

已于 2022-11-16 14:19:09 修改

阅读量1.9k

点赞数

分类专栏：日常工作文章标签：微信 android ios 前端 html

于 2022-11-16 14:14:45 首次发布

本文链接：https://blog.csdn.net/github_37213295/article/details/127884040

版权

日常工作专栏收录该内容

10 篇文章 0 订阅

订阅专栏

问题：微信直接分享apk文件链接，微信提示“网页包含恶意文件”。

解决办法：制作html页面，判断微信打开后，引导用户用浏览器打开链接，下载

碰到问题：微信缓存

参考文章H5页面缓存处理办法

具体实现代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<META HTTP-EQUIV="pragma" CONTENT="no-cache">;
	<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
	<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
	<META HTTP-EQUIV="expires" CONTENT="0">
	<title></title>
	<style>
		.link{display: none;}
		.show{display: block;}
		.download{
			width: 60%;
			height: 70px;
			line-height: 70px;
			background-color: #32B2A7;
			color: #fff;
			text-align: center;
			border-radius: 35px;
			font-size: 34px;
			margin: auto;
			position: relative;   
		}
		.download a{
			color: #fff;
			text-decoration:none;
		}
		.a1 p{
			width: 80%;
			text-align: center;
			font-size: 36px;
			margin: auto;
			margin-top: 50px;
		}
		.boxtop{
			width: 400px;
			height: 500px;
			padding-top: 150px;
			margin-left: 0;
			margin-right: 0;
			margin:auto;
			margin-top: 100px;
			margin-bottom: 50px;
		}
		
		.icon img{
			width: 400px;
		    
		}
		.anicon img{
			width: 70px;
			position: absolute;
			top: -12px;

		}
		.anicon span{
			font-size: 40px;
			font-weight: bold;
			margin-left: 95px;
		}
		.iosicon img{
			width: 70px;
			position: absolute;
			top: -12px;

		}
		.iosicon span{
			font-size: 40px;
			font-weight: bold;
			margin-left: 95px;
		}
		.boxbottom{
			width: 380px;
			margin: auto;
			position: relative;
			margin-bottom: 50px;

		}
		.lineheng{
			width: 80%;
			height: 50px;
			border-bottom: solid #383838 1px;
			margin: auto;
			margin-bottom: 30px;
		}
		.bulid p{
			width: 80%;
			color: #bdc3c1;
			font-size: 36px;
			margin: auto;
			text-align: center;
			margin-bottom: 50px;
			margin-top: 30px;
		}
		.computer p{
			width: 30%;
			font-size: 36px;
			margin: auto;
			text-align: center;
			margin-bottom: 50px;
			margin-top: 30px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="boxtop">
			<div class="icon">
				<img src="img/LOGO1.jpg" alt="">

			</div>
			

		</div>
		<span class="line"></span>
			<div class="android link">

				<div class="anicon boxbottom">
					<img src="img/android.png" alt="">
					<span>app名称</span>
					
				</div>
				<div class="lineheng"></div>
				<div class="bulid">
					<p>
					1.1.0（Bulid 1.1.0_20221114）-20MB<br>
					更新于：2022年11月14日

					</p>

				</div>
				<div  class="link a2 show">
							<!-- 不是微信端 -->
					<div class="download"><a href="http://app.apk">下载安装手机版</a></div>


				</div>
				<div  class="link a1">
				<!-- 微信端 -->
					<p>请点击右上角省略号，用手机浏览器打开此页面进行下载</p>
				</div>

			</div>
			<div class="ios link">
				<div class="iosicon boxbottom">
						<img src="img/iphone.png" alt="">
						<span>app名称</span>
						
					</div>
					<div class="lineheng"></div>
					<div class="bulid">
						<p>
						1.1.0（Bulid 1.1.0_20221114）-20MB<br>
						更新于：2022年11月14日

						</p>

					</div>
				<div class="download"><a href="https://apps.apple.com/cn/app/idxxxxxx">下载安装手机版</a></div>
			</div>
			<div class="computer link">
				<p>请使用手机扫描</p>
			</div>
			

	</div>
	
	
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
	function isWeiXin() {
		var ua = window.navigator.userAgent.toLowerCase();
		console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
		if (ua.match(/MicroMessenger/i) == 'micromessenger') {
			return true;
		}
		else {
			return false;
		}
	}
	if(isWeiXin()){
		// console.log(" 是来自微信内置浏览器");
		$(".a1").addClass("show");
		$(".a2").removeClass("show");
	}
	else{
		// console.log("不是来自微信内置浏览器");
		$(".a2").addClass("show");
		$(".a1").removeClass("show");
	}
   var u = navigator.userAgent;
   var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
   var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
   $(".ios").removeClass("show");
   $(".android").removeClass("show");
   if(isAndroid){
   		$(".android").addClass("show");
   		$(".ios").removeClass("show");
   }else{
   		if(isiOS){
   			$(".ios").addClass("show");
   			$(".android").removeClass("show");
   		}else{
   			$(".ios").removeClass("show");
   			$(".android").removeClass("show");
   			$(".computer").addClass("show");
   			
   		}
   }
   // alert('是否是Android：'+isAndroid);
   // alert('是否是iOS：'+isiOS);
  
	
</script>
</body>
</html>