php js生成二维码

总体思路：1、引入生成二维码的js。

                  2、定义一个空的div用于存放生成的二维码，一般div位于页面中央 。

                  3、点击工具条按钮生成二维码，存入上面定义的div中。

                  4、查看完二维码肯定还要叉掉二维码图片，那么对页面大DIV上写个点击事件，当点到div上任何地方，就二维码隐藏。

 

 

要引入的生成二维码js下载地址：

链接：https://pan.baidu.com/s/1BAreIaU2o14pVYopK0P32g 
提取码：bwx0 

 

一、下面是我页面样式：

<style>
    .modal {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(255,255,255,0.5);
    }
    .modal-wrapper {
        margin: 220px auto;
        width: 260px;
        height: 265px;
        padding: 20px;
        border: 1px solid green;
        background: white;
        /*box-shadow: 2px 3px 8px green;*/
    }
</style>

 二、用的layui的工具条

<script type="text/html" id="toolBar">
   
    <a class="layui-btn layui-btn-xs" lay-event="qrcode">二维码</a>
   
</script>

三、下面是layui的监听事件：

（原理就是new一下QRCode对象，然后存在id=qrcode的div里面）

 table.on('tool(tableList)', function(obj) { //注：tool 是工具条事件名
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值

            if(layEvent === 'qrcode'){
                var $url = “www.baidu.com”
                $(".modal").show();
                var qrcode = new QRCode('qrcode', {
                    text: $url,
                    width: 256,
                    height: 256,
                    colorDark : '#000000',
                    colorLight : '#ffffff',
                    correctLevel : QRCode.CorrectLevel.H
                });

            }
 }

四、查看完二维码叉掉二维码图片

var $ = layui.$;
        $('.modal').on('click', function(){

            $(".modal").hide();
            $("#qrcode").empty();
        });