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

Admin
Admin
Admin
52
文章
6
评论
2018年1月18日17:30:55 评论 3,214 1916字阅读6分23秒

之前开发一个微信公众号的鉴权认证,其中的功能是用户发送文字消息给公众号,然后公众号返回图文消息给用户,用户再点击图文消息即可跳转到一个网页链接,在微信的内置浏览器中打开,然后进行一些鉴权认证操作。那么问题来了,在用户打开的网页 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>

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

三、总结

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

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

继续阅读
Admin
  • 本文由 发表于 2018年1月18日17:30:55
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
Vue 中计算属性和侦听器 前端开发

Vue 中计算属性和侦听器

在 Vue 中通常我们会在模板绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑性语句,那么整个模板就会变得特别的臃肿,可读性和维护性将会降低,因此为了简化逻辑,我们可以使用计算属...
浅谈 JS 中的防抖和节流操作 前端开发

浅谈 JS 中的防抖和节流操作

一般在进行窗口的 resize、scroll 等输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用 debounce(防抖)和 thr...
JS中的「import」和「require 」的区别 前端开发

JS中的「import」和「require 」的区别

import 和 require 是 JS 模块化编程使用的,模块化是一种将系统分离成独立功能部分的方法,一个模块是为完成一个功能的一段程序或子程序,"模块"是系统中功能单一且可替换的部分。模块化思想...
匿名

发表评论

匿名网友 填写信息

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