微信扫码提示浏览器打开的

最新推荐文章于 2020-08-10 10:51:45 发布

转载最新推荐文章于 2020-08-10 10:51:45 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/clovem/p/7453849.html

本文介绍了一个简单的网页设计，用于引导用户在微信环境中正确下载APP。通过检测是否在微信环境中并弹出提示，告知用户如何进行正确的下载操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从这个帖子看的:

http://caibaojian.com/weixin-tip3.html

我的页面代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>微信下载引导</title>
    <link rel="stylesheet" type="text/css" href="http://caibaojian.com/demo/reset.css">
    <style type="text/css">
    /*演示用，请勿引入项目中*/
    *{margin:0; padding: 0;}
    body{font:normal 14px/1.5 Arial,Microsoft Yahei; color:#333;}
    .example{padding: 20px;}
    .example p{margin: 20px 0;}
    a{display: inline-block; background: #61B3E6; color:#fff; padding: 0 10px; border-radius: 4px; text-align: center; margin: 0 5px; line-height: 22px; font-size: 14px; text-decoration: none;}
    a.btn-warn{background: #F0AD4E;}
    a:hover{opacity: 0.8;}
    /*核心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(http://img.caibaojian.com/uploads/2016/01/weixin-tip.png) no-repeat; display: block; position: absolute; right: 30px; top: 20px;}
        .wxtip-txt{padding-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;}
    </style>
</head>
<body>
<div class="example">
    <p>右上角打开浏览器下载应用文件</p>
    <a href="https://www.cfdport.com:7004/cfd_czapp/androidApk/1.6.apk" id="JdownApp">点击下载APP</a>
   <div class="wxtip" id="JweixinTip">
        <span class="wxtip-icon"></span>
        <p class="wxtip-txt">点击右上角<br/>选择在浏览器中打开</p>
    </div>
</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>