a-different-approach-to-smooth-wechat-access-experience.png

本文的方向仅是引出遮罩提示并跳转,不做防红用途讨论

配套的Nginx方案在【Nginx try_files处理静态页面传递含参请求返回502错误】一文中

前言

对于非.com .cn域名,微信的内置浏览器经常会弹出提示,有时即便是绑定了业务域名网页也会因为调用其他css js而被转码,严重影响了访问体验,大多数站长多采用了更换域名-反代-跳转三件套,然而随之跳转方案的一步步被封禁,找到合适的解决方案势在必行。
笔者受到了处理微信下载程序的启发,决定采用用浏览器打开的方式绕过微信内置浏览器的转码。其具体的实施方式如下:

解决方案

1.请求固定后端页面,利用伪链接传递参数值
2.页面内识别是否为微信内置浏览器
2.1若为微信内置浏览器,弹出使用浏览器打开遮罩,提示用户用浏览器打开
3.若非微信内置浏览器,提取uri中的参数值,解析真实地址并实现跳转

捷径

根据上面的步骤,请求页面完成的操作实际上只有两个
1.识别是否为微信内置浏览器
2.根据传递的值解析真实地址并跳转
其中第一点可以使用纯JS实现
第二点的实现方式有两种

懒人法:JS提取请求URI跳转至(一次JS跳转,一次302跳转)

进阶法:PHP提取args查询数据得到真实URL返回302跳转

本文先着重阐述懒人法:

进阶法请查看此篇blog(待填坑)

内置浏览器的判定及用浏览器打开遮罩(HTML+CSS+JS法)

思路:通过navigator.userAgent.toLowerCase()得到浏览器类别,若为微信内置浏览器,弹出遮罩
JS代码(写在窗口初始化下):

    function is_weixin() { //函数,用于判断是否为微信内置浏览器
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            return true;
        } else {
            return false;
        }
    }
    var isWeixin = is_weixin(); //变量,存储为微信的值
    var winHeight = $(window).height(); //变量,存储页面
    if (isWeixin) {
        $(".weixin-tip").css("height", winHeight);
        $(".weixin-tip").show();
    } 

HTML&CSS代码(遮罩):
HTML部分

<div class="weixin-tip" style="display: none;">
    <img src="tip.png" alt="微信打开">
</div>

CSS部分(透明度很皮地调成了66,觉得浅的请自行调整)

.weixin-tip p{text-align: center; margin-top: 10%; padding:0 5%;}
.weixin-tip{display: none; position: fixed; left:0; top:0; bottom:0; background: rgba(0,0,0,0.66); filter:alpha(opacity=66);  height: 100%; width: 100%; z-index: 100;}

懒人法伪装URI并实现跳转

原本的JS跳转想法是直接从请求URI中提取想要访问的目的URL,奈何微信有时不一定能正确区分此类URI造成只打开一部分的尴尬情况,因此想到借助短链服务来实现URI的伪装。
具体方式:
1.得到长连接的短链
2.用短链的最后部分修饰URI
3.JS split分割URI得到特定部分
4.还原成短链网站的URL并跳转

给出示例代码(以新浪的t.cn为例)

本例中的代码需配合nginx的index语句食用

配套的Nginx方案在【Nginx try_files处理静态页面传递含参请求返回502错误】一文中

本例的传入URI格式为 以token?短链随机值.jpg为结尾 或URI的最后部分为/短链随机值

var url = window.document.location.href.toString(); //变量,得到请求URL
    if (url.indexOf("?") != -1) { //判断是否有?若有则从?处切割(?后即为短链的随机值)
        url = url.replace(/=/, ""); //将多余的等号去除
        url = url.replace(/.jpg(.*)/, ""); //将用于掩人耳目的jpg
        var u = url.split("?"); //按?切割成数组
        url = "http://t.cn/" + u[1]; //找到第二段(?后的值,即短链随机值)给t.cn
    } else { //没有?的情况(直接传短链随机值)
        url = url.replace(/=/, "");
        url = url.replace(/.css(.*)/, "");
        var u = url.split("/"); //按照/切割成数组
        url = "http://t.cn/" + u[u.length - 1]; //数组的最后一个元素(最后一个/后的值,即短链随机值)
    }
Last modification:February 11th, 2019 at 02:10 pm