微信设置 在浏览器中打开 用于下载app单页
文章时间：2019年2月14日 00:18:24 解决问题：在微信内置浏览器中，点击下载，弹出提示框，提示在浏览器中打开
第一步 判断微信的ua
var ua = navigator.userAgent;
var isWeixin = !!/MicroMessenger/i.test(ua);第二步 引入默认的隐藏层
<a href="http://nooss.cn/test.apk" id="JdownApp">点击下载APP</a>
<a href="http://nooss.cn/test.apk" id="JdownApp2" class="btn-warn">点击下载APP2</a>
<div class="wxtip" id="JweixinTip">
<span class="wxtip-icon"></span>
<p class="wxtip-txt">点击右上角<br/>选择在浏览器中打开</p>
</div>第三步 添加css样式
.wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 998; display: none;}
.wxtip-icon{width: 52px; height: 67px; background: url(weixin-tip.png) no-repeat; display: block; position: absolute; right: 20px; top: 20px;}
.wxtip-txt{margin-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;}第四步 点击按钮显示隐藏层，点击隐藏层关闭
function weixinTip(ele){
var ua = navigator.userAgent;
var isWeixin = !!/MicroMessenger/i.test(ua);
if(isWeixin){
ele.onclick=function(e){
window.event? window.event.returnValue = false : e.preventDefault();
document.getElementById('JweixinTip').style.display='block';
}
document.getElementById('JweixinTip').onclick=function(){
this.style.display='none';
}
}
}
var btn1 = document.getElementById('JdownApp');//下载一
weixinTip(btn1);
var btn2 = document.getElementById('JdownApp2'); //下载二
weixinTip(btn2);综合真实示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>吉士多商家平台</title>
<style type="text/css">
.wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 998; display: none;}
.wxtip-icon{
width: 220px;
height: 100%;
background: url(./weixin-tip.png) no-repeat;
background-size: 200px 200px;
display: block;
position: absolute;
right: 40px;
top: 20px;
}
.wxtip-txt{margin-top: 150px; color: #fff; font-size: 60px; line-height: 1.5;}
</style>
</head>
<body>
<img src="./jsdsjpt.png" width="100%" border="0" usemap="#planetmap" >
<map name="planetmap" id="planetmap">
<area shape="rect" coords="190,1430,750,1530" alt="gisito" href="http://gisito.oss-cn-beijing.aliyuncs.com/jishiduov2.3.apk" alt="吉士多商家平台" id="JdownApp">
</map>
<div class="wxtip" id="JweixinTip">
<span class="wxtip-icon"></span>
<p class="wxtip-txt">点击右上角<br/>选择在浏览器中打开</p>
</div>
<script type="text/javascript">
function weixinTip(ele){
var ua = navigator.userAgent;
var isWeixin = !!/MicroMessenger/i.test(ua);
if(isWeixin){
ele.onclick=function(e){
window.event? window.event.returnValue = false : e.preventDefault();
document.getElementById('JweixinTip').style.display='block';
}
document.getElementById('JweixinTip').onclick=function(){
this.style.display='none';
}
}
}
var btn1 = document.getElementById('JdownApp');//下载一
weixinTip(btn1);
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019-02-14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
