ITPub博客

首页 > 移动开发 > 微信开发 > 微信/QQ强制浏览器打开 微信跳转外部浏览器代码的实现原理

微信/QQ强制浏览器打开 微信跳转外部浏览器代码的实现原理

微信开发 作者:肉肉的松草 时间:2020-01-02 14:18:52 0 删除 编辑

我们在微信中打开链接或者二维码的时候,微信的安全系统检测爬虫大部分是会去爬取我们的页面是否有违规现象,如果这个页面有一点点违规的话,系统就会把这个页面屏蔽掉。而且几乎不可能解封。我们这边的推广链接以前经常会遇到这些问题。为了解决这个问题,我们翻阅了很多资料,终于找到了一个比较完美的办法---“ 强制浏览器打开”

案例展示

(请使用微信或QQ打开扫一扫,查看案例)

测试链接:  http://www.138tool.cn/wxzz/an...  

作者网站:  http://www.138tool.cn/wxzz

技术原理

这次给大家说的时一个简化版的。使用的是纯JS+HTML+CSS结合的方式,总共分2种操作场景:

1、用户用户通过扫码挥着点击链接打开链接后,直接弹出一个遮罩层,强制要求用户使用浏览器打开!

2、用户通过扫码挥着点击链接打开链接后,不是马上就弹出提示它在新浏览器中打开,只有它点击应用的下载或者其按钮后,才弹出提示它跳转后下载。

部分源码

<!DOCTYPE html>      <html lang="zh\_CN">      <head>      <meta charset="UTF-8">      <meta name="viewport" content="width=device-width, initial-scale=1"/>      <script type="text/javascript" src="http://libs.useso.com/js/jquery/1.9.0/jquery.min.js"></script>      <title>点击下载应用</title>      <style type="text/css">      \*{margin:0; padding:0;}      
a{text-decoration: none;}      
img{max-width: 100%; height: auto;}      
.weixin-tip{display: none; position: fixed; left:0; top:0; bottom: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%;}      
</style>      </head>      <body>      <div class="weixin-tip">      
    <p>      
    <img src="live\_weixin.png" alt="微信打开"/>      
        </p>      
    </div>      
    <script type="text/javascript">      
        $(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();      
            }      
        })      
    </script>      </body>      </html>       点击下载应用
                                                                                                                                                      


文章出自  http://www.138tool.cn/wxzz/u61i99.html 转载请注明出处


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/69958986/viewspace-2671608/ ,如需转载,请注明出处,否则将追究法律责任。

上一篇: 没有了~
下一篇: 没有了~
请登录后发表评论 登录
全部评论

注册时间:2020-01-02

  • 博文量
    1
  • 访问量
    1451