搜索

我凸(艹皿艹 )了~~~

项目明天要上线了,结果测试那边来了一个bug!!!
“分享模块”中的二维码不显示???

我赶紧打开电脑看,我平常都是用浏览器的开发者模式,调试手机端的web程序。
没问题啊,二维码可以正常显示啊。测试同事给我说:“你拿真机或者模拟器测试一下。我这边测试在Android端下无法正常加载二维码,但是ios端可以。”我赶忙打开模拟器验证。

的确!怎么无法正常显示呢?也没有出现跨域,图片在新窗口下都可以加载出来。那就赶紧去看代码。

<script src="{:cdn()}/static/libs/qrcode.min.js"></script>
<script src="{:cdn()}/static/libs/html2canvas.min.js"></script>
<script>
    $(function(){
        layer.open({type:2, content:'生成二维码'});
        new QRCode($('.wrap')[0], {
            text: '{$invite_url}',
            width: parseInt($('.qrcode').css('width')),
            height: parseInt($('.qrcode').css('height')),
            correctLevel: QRCode.CorrectLevel.L
        });
        setTimeout(function(){
            var qrcode = $('.poster img').last();
            $('.poster .qrcode').attr('src', qrcode.attr('src'));
            qrcode.remove();
            html2canvas($('.poster'), {
                width: 320,
                onrendered: function(canvas){
                    $('.poster').html('<img width="100%" src="'+canvas.toDataURL('image/jpeg')+'">');
                    $('.container').css('height', 'auto');
                    layer.closeAll();
                }
            });
        }, 300);
    });
</script>

我们可以看到,二维码是调用qrcode.min.js绘制而成的,然后使用html2canvas.min.js把二维码装载到海报背景中。

我测试海报绘制是没有问题的,在海报装载二维码的过程中,二维码并没有正常的装载。那应该就是二维码生成的问题。

还是网上冲浪吧!说不定有前辈也遇到过类似的坑,找了很多帖子,有人说因为跨域的问题...我这怎么可能跨域,都是一个域的。服~

那到底是因为什么原因呢,凭借测试提交过来的问题,我感觉应该是qrcode.min.js仅在安卓端出现问题,那应该就是代码中哪里不兼容Android端。看了看qrcode.min.js的代码,里面有一段代码是这样的。

aMat=b.toString().match(/android ([0-9]\.[0-9])/i)

这里感觉是判断Android userAgent,这正则感觉写的有问题啊,于是我做了修改,结果如下

aMat=b.toString().match(/android ([0-9]+\.?[0-9]?)/i)

然后就可以在安卓端正常显示了!!

大半夜的,简直是有惊无险啊~

版权属于:guoxiaorui
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
0
查看目录

目录

来自 《qrcode.min.js在手机上绘制二维码不显示的问题》
评论

博主很懒,啥都没有
© 2021 程序猿小睿