【前端】IOS微信浏览器点击右上角遮罩实现

前言

现在有一个需求,通过公众号或者链接,下载app应用,大家都知道,安卓和ios下载对应的版本都不一样。并且,ios 微信浏览器不支持应用下载,需要实现一个遮罩功能,提示用户通过浏览器下载,效果如下:

【前端】IOS微信浏览器点击右上角遮罩实现_第1张图片

原理

我们先说下实现原理。这个遮罩功能,只允许在一个场景内实现,就是IOS微信浏览器内部。那怎么判断用户是否是IOS微信浏览器访问的呢?

研究发现微信的UA中一定带有MicroMessenger。并且其他浏览器UA中没有,这时候就可以利用MicroMessenger 来判断。代码片段如下:

<script>
         var ua = navigator.userAgent.toLowerCase();
             if (ua.match(/MicroMessenger/i) == "micromessenger") {
                return true;
            } else {
                return false;
            }
</script>

IOS场景判断:

ios 场景又分两种,IOS微信浏览器和非微信浏览器,代码片段如下:

<script>
    if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
    
        $(window).on("load", function () {
            var winHeight = $(window).height();
            function is_weixin() {
                var ua = navigator.userAgent.toLowerCase();
                if (ua.match(/MicroMessenger/i) == "micromessenger") {
                    return true;
                } else {
                    return false;
                }
            }

            var isWeixin = is_weixin();
            //微信浏览器打开遮罩
            if (isWeixin) {
                $(".weixin-tip").css("height", winHeight);
                $(".weixin-tip").show();
            } else {
            //非微信浏览器,直接访问下载链接
                window.location.href = "IOS对应的下载链接";
            }
        })

    } 
</script>

安卓场景:

<script>
	if (/(Android)/i.test(navigator.userAgent)) {
        window.location.href = "安卓对应的下载链接";
    } 
</script>

PC mac 场景:

<script>
 if (/(mac os x)/i.test(navigator.userAgent)) {
        window.location.href = "IOS对应的下载链接";
    }
</script>

剩下的就是PC windows 场景了。

完整源码如下:

CSS:

<head>
    <meta charset="UTF-8">
    <title>COMI下载title>
    <style>
        .weixin-tip {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            background: rgba(0, 0, 0, 0.8);
            filter: alpha(opacity=80);
            height: 100%;
            width: 100%;
            z-index: 100;
        }

        .weixin-tip p {
            text-align: center;
            margin-top: 10%;
            padding: 0 5%;
        }

        .img1 {
            width: 100%;
            height: 100%;
            filter: alpha(opacity=100);
            -moz-opacity: 0.4;
            -khtml-opacity: 0.5;
            opacity: 0.5;
        }
    style>
head>

Body:

<body>
	<div class="weixin-tip">
	    <img src="mobile_bg.jpg" class="img1"/>
	div>
body>

JS:

<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js">script>

<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js">script>
<script>

    var u = navigator.userAgent;
    var isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent); //ios终端

    if (isiOS) {
        $(window).on("load", function () {
            var winHeight = $(window).height();

            function is_weixin() {
                var ua = navigator.userAgent.toLowerCase();
                if (ua.match(/MicroMessenger/i) == "micromessenger") {
                    return true;
                } else {
                    return false;
                }
            }

            var isWeixin = is_weixin();
            if (isWeixin) {
                $(".weixin-tip").css("height", winHeight);
                $(".weixin-tip").show();
            } else {
                window.location.href = "IOS对应的下载链接";
            }
        })

    } else if (/(mac os x)/i.test(navigator.userAgent)) {
        window.location.href = "IOS对应的下载链接";

    } else if (/(Android)/i.test(navigator.userAgent)) {
        window.location.href = "安卓对应的下载链接";

    } else {
        window.location.href = "PC windows对应的下载链接";
    }

script>

最后给大家奉上原图,以供大家使用。

如有帮助,麻烦点赞收藏关注,感谢。

【前端】IOS微信浏览器点击右上角遮罩实现_第2张图片

你可能感兴趣的:(前端,前端,ios,微信,javascript,移动端H5)