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

前言

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

在这里插入图片描述

原理

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

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

<script>
         var ua = navigator.userAgent.toLowerCase();
             if (ua.match(/MicroMessenger/i) == "micromessenger") {
                return true;
            } else {
                return false;
            }
</script>
1
2
3
4
5
6
7
8

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

安卓场景：

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

PC mac 场景：

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

剩下的就是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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Body：

<body>
	<div class="weixin-tip">
	    <img src="mobile_bg.jpg" class="img1"/>
	div>
body>
1
2
3
4
5

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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

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

在这里插入图片描述

相关阅读:
Java工程师的工资高吗？一般多少钱？
openEuler生态大会 | 麒麟信安受邀参加欧拉伙伴入驻仪式，加速欧拉新发展
 获取商品历史价格返回值说明
 Pycharm中右键运行python程序时出现Run ‘pytest in XXX.py
都已过35+程序员高危高龄，我为什么还要学习python？
DCMM数据能力成熟度评估模型--学习笔记（1）
prompt提示词：AI英语词典优化版Pro，让AI教你学英语，通过AI实现一个网易有道英语词典
 LeetCode 594. Longest Harmonious Subsequence
leetcode 刷题日记计算右侧小于当前元素的个数
 fiddler抓包番外————了解工具栏
原文地址：https://blog.csdn.net/weixin_44427181/article/details/127690536