javascript 生成二维码实现链接从微信内跳出


现在的二维码相当火,借着移动互联网的风口也快飞起来了.


现在各种语言的各种开源包,基本都有对应的生成二维码的源码.但是今天我们分享的不是服务器生成二维码,而是前端页面如果用 javascript 来生成一个二维码.


这种动态生成二维码的需求越来越多.如果都要依靠服务器端赖生成,

第一:面临资源紧缺的状况,如果在大的并发环境,这种cpu密集型计算必定导致一个问题,就是请求排队,那就不用谈了.用户不会一直在傻傻的等你.

第二:就算你顺利生成了二维码,还面临一个网络传输带宽的压力,虽然它很小很小,但是当在一个并发压力大的环境下,依然面临带宽被占的问题.


这样说来,如果能在客户端生成二维码,貌似是最好的解决方案.解决了资源并发紧张,解决了传输带宽占用.


今天我们的应用场景是微信内置浏览器:

就是当你点开一个微信好友发过来的页面链接时,在你点开那一瞬间,无论页面设计的多年牛逼,你必须面对一个残酷的现实:这里面的链接是点不出去的.

没错,微信屏蔽了出去的链接,即使你在查看公众平台发出来的文章,内容里面的链接也会被屏蔽,只有在左小角的地方,有个链接 "查看原文" 这个链接是公众平台文章向外跳出去的唯一一个出口.


直到,微信5.4版本发布,多了一个扫描二维码的功能,就是当你按住一张图片的时候,如果是一张有效的二维码,弹出菜单里会多出一项,识别图中的二维码,这时会实现一个跳转到外部链接的出口.

这样有什么好处,意义在哪里?最大的意义我想就是微信一个封闭这么久的平台终于有了一个能让链接跳出去的出口了.

而之前我们如果在微信内置浏览器打开一个第三方页面,点击上面的链接,我们通常会引导用户点击右上角的按钮,选择在浏览器内打开.

就是下面这个引导图片.

 

   

但是:微信在识别二维码的时候还是会做一定的过滤和限制.

就是说,并不是你的什么链接我都去跳转或者做出响应.


比如:你的链接里面配置了下载 apk 的路径,这样识别二维码以后也是空白页.我没有试其他文件的下载.

我想任何的下载链接应该都是不会正常在微信内置浏览器下载下来的.


如果你配置了一个 taobao.com 链接的二维码,会有什么效果呢.....期待吧.

因为当初阿里说微信屏蔽了淘宝链接,腾讯说是阿里屏蔽了微信.如今有了二维码识别,会不会打开这个口子,我们验证一下:

结果是这样的,猜中了吗?

这也是进步,或许微信考虑更多的是,消费者不管打开了什么样的购物网站(钓鱼网站)消费了,或者泄露隐私信息等,为了避免这样的情况出现,我把你要去的网址贴出来,具体决定要不要继续去,你自己决定,这样做更多的对用户行方面安全性考虑,当然也为了给自己免责.


下面我们终于要正式开题了,首先来做一些准备工作.


一份 jquery 的min 文件,在生成的时候我们需要jquery 来支持.自己找吧,我就不贴链接了.

一份二维码生成的 js 文件,我们就叫 qr.js 吧.

https://github.com/zzhi191/demo/blob/master/qr.js

你可以随时把上面这份文件copy 下来使用.


此插件使用起来也非常方便:

首先需要一个能接收二维码的容器

<div class="nav_img_tip" id="nav_img_ios" style="display:none;vertical-align:middle; align-content: center;width:100%;height: 100%;margin-left: auto;margin-right: auto; padding-top:18%;">
    <label id="qr" >

</label>

上面外层有一个 div ,里面的 <label > 是二维码的容器.


有了容器,我们就去生成一个二维码放进来

(function() {
        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {

var qr_coder = new QRCoder($(‘#qr’));                 $(‘#qr’).html(“稍等…”);

qr_coder.setMode(0);                 qr_coder.draw(                         'http://taobao.com’,                         'H’,                         function (data) {                             console.log(‘二维码生成成功’);                         }); });

外面一个自启动函数 (function(){ … }); 这当然是等待 jquery 加载完成后开始执行.所以上面的代码之前需要先加载 jquery 文件


var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == ‘micromessenger’) {

这2行 就是判断当前浏览器是不是微信内置浏览器,(是不是在微信内打开)


var qr_coder = new QRCoder($(‘#qr’));

这一句把接收二维码的容器id 传进去,可以看到我们传的是一个 jquery 对象.


qr_coder.setMode(0);

这里是指二维码输出的方式:

0 :表示把一个 bmp编码的base64数据字符串作为 img 元素的 src 数据源来填充,就像下面这样

qr



1:表示用矩阵布局的方式,把每一个点用 div 陈列出来,然后css控制其为黑白颜色.

就像这样:

在容器中有密密麻麻的 div 点阵,每个点就是一个 宽高各4个像素的点.

这种方式对于IE老版本浏览器兼容性更强.


但是我们今天讨论的是在微信内置浏览器识别二维码,所以第二种方式不可取,因为对于微信来说,他本身就不是个图片,所以也不存在能不能识别一说.


下面是二维码生成函数:

                qr_coder.setMode(0);
                qr_coder.draw(
                        'http://taobao.com’,
                        'H’,
                        function (data) {
                            console.log(‘二维码生成成功’);
                        });

draw 方法有 4 个参数:

  1. http://taobao.com    指定二维码跳转链接

  2. icon / logo 地址 会出现在生成的二维码中间位置  (可选参数)

  3. 最大填容错率 有4个参数:

    1. L  最大容错率 7%

    2. M 最大容错率 15%

    3. Q 最大容错率 25%

    4. H  最大容错率 30%

  4. 回调函数

    此时二维码已经生成,并填充到了容器之内.


出自:javascript 生成二维码实现从微信内跳出




回到顶部