关于微信浏览器的问题解决方法

  • A+
所属分类:前端开发

之前开发一个微信公众号的鉴权认证,其中的功能是用户发送文字消息给公众号,然后公众号返回图文消息给用户,用户再点击图文消息即可跳转到一个网页链接,在微信的内置浏览器中打开,然后进行一些鉴权认证操作。那么问题来了,在用户打开的网页 URL 地址中包含有用户的 userId、weixinAppi 等信息,所以我们只能允许用户在微信端打开,不能在其他的浏览器中打开,以下就是我们的解决方案。

一、微信浏览器打开

微信自带的浏览器是 QQ 浏览器 X5 内核,X5 内核是腾讯基于开源Webkit优化的浏览器渲染引擎,目前除了微信、手机QQ、京东等有30多款APP内置浏览器都是基于 X5 内核 ,包括 Windows 版的微信也是一样,所以我们通过正则匹配来判断当前浏览器是什么内核,具体代码如下:

  1. <script type="text/javascript">
  2.     // 对浏览器的UserAgent进行正则匹配,不含有微信独有标识的则为其他浏览器
  3.     var useragent = navigator.userAgent;
  4.     if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') {
  5.         // 这里警告框会阻塞当前页面继续加载
  6.         alert('已禁止本次访问:您必须使用微信内置浏览器访问本页面!');
  7.         // 以下代码是用javascript强行关闭当前页面
  8.         var opened = window.open('about:blank', '_self');
  9.         opened.opener = null;
  10.         opened.close();
  11.     }
  12. </script>

这段代码在 Android、iPhone、iPad、PC 上都进行了测试,只要不是在微信内部打开网页的,首先就会弹出上面那个警告框,此时后面的页面是空白的,什么都还没加载,当点击警告框的确定按钮之后,最后三行代码将强行关闭当前页面。
其实这个也不是根本的解决办法,可以通过一些软件工具来伪造 UserAgent 的值,还是可以绕过这条限制的,我们的当时的解决办法就是把微信传递过来的参数进行了 Base64 加密处理,这样也能减少一些破解问题,总的来说就是防君子不防小人了。

二、微信浏览器关闭

在鉴权认证成功后,会跳转到另外成功提示一个页面,然后点击确定按钮关闭当前页面,返回微信聊天,刚开始我用的是:

  1. <a href="javascript:" on-click="closeWin()">确定</a>
  2. <script type="text/javascript">
  3.     function closeWin() {
  4.         window.open('about:blank', '_self');
  5.         opened.opener = null;
  6.         opened.close();
  7.     }
  8. </script>

这种方法在 Windows 版本的微信中不适用,可能是我的电脑版微信版本问题,所以调用了微信自带的方法:

  1. <a href="javascript:" class="weui-btn weui-btn_primary" id="closeWindow">确定</a>
  2. <script type="text/javascript">
  3.     var readyFunc = function onBridgeReady() {
  4.         document.querySelector('#closeWindow').addEventListener('click', function(e){
  5.             WeixinJSBridge.invoke('closeWindow',{
  6.             },function(res){
  7.             });
  8.         });
  9.     }
  10.     if (typeof WeixinJSBridge === "undefined") {
  11.         document.addEventListener('WeixinJSBridgeReady', readyFunc, false);
  12.     } else {
  13.         readyFunc();
  14.     }
  15. </script>

大家可以用这两种方法试试看效果!

三、总结

这个是一个最基本的问题,我还具体的去研究如何去做微信公众号的开发!

博主只是一名前端的小白,只是把自己用到的知识分享一下,要是有什么不对的地方,欢迎大家提出~~

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: