jquery二维码生成插件jquery.qrcode.js在线生成二维码

上山打老虎

　　一代巨匠金庸先生驾鹤西去,谢谢您的作品,陪我度过儿时的时光
–2018.10.31
一.场景再现　　由于业务需求,经常会将访问链接分享给别人,方便其他客户访问我们的业务.在本周的需求中,我们需要根据地址生成二维码,方便用户直接扫描访问.
　　那么,我们是如何实现这个功能的?下面我们来详细讨论.
二.问题探究　　今天我们借助jquery二维码生成插件jquery.qrcode.js来实现如上功能,下面贴出关键代码.

1. html页面
　　首先,我们在页面放置生成二维码的按钮

<div id="shareBox" class="btns-box" >
    <div class="btns" id="popupShow">点击生成二维码</div>
  </div>

　　效果图:

<!-- 弹框 -->
  <div class="popup-wrapper">
    <div class="popup" id="popup">
      <div class="popup__main">
        <input oninput="if(value.length > 11)value=value.slice(0,11)" onkeyup="this.value=this.value.replace(/\D/gi,'')" onkeyup="this.value=this.value.replace(/[/u0391-/uFFE5]/gi,'')" type="tel" placeholder="请输入号码" id="phone">
        <div class="btns-box">
          <div class="btns" id="scewm">确定</div>
        </div>
        <div class="ewm-box" id="ewmBox">
          <div class="ewm" id="ewm">
        <!-- 中间logo-->
            <div class="ewm__icon"><img src="${ctxStaticPre}/images/olcs/moveking/icon_logo.png" alt=""></div>
          </div>
          <div class="ewm__text">点击保存二维码</div>
        </div>
      </div>
      <div class="popup__close">
      <!--关闭按钮图片-->
        <img src="${ctxStaticPre}/images/olcs/moveking/popup__close.png" alt="">
      </div>
    </div>
  </div>
</div>

　　效果图:


2.js

/* 1.生成二维码 */
  var ewmState = true;
  //确定按钮绑定点击事件
  $('#scewm').click(function () {
  //获取输入的手机号码
    var phone = $('#phone').val();
    //校验手机号码合法性
    if (phone == "" || phone == undefined) {
      toast("请输入11位手机号码！");
      return
    }
//显示展示二维码的div层
    $('#ewmBox').show();
    //用于生成二维码地址
    var qrCordSharUrl1 = 'http://www.milogenius.com/toIndexPage.html?mobile=' + phone;
    //获取幕布的宽度
    var ewmW = $('#ewm').width();
    if (ewmState) {
    //调用方法生成二维码
      $("#ewm").qrcode({
        render: "canvas",
        text: qrCordSharUrl1,
        width: ewmW,
        height: ewmW,
        //中间logo
        src: "http://www.milogenius.com/Wapstatic/gsccstatic/userfiles/resource/images/olcs/moveking/icon_logo.png"
      });
    }
    ewmState = false;
  })

3.css

```css
.ewm__icon{position: relative;width: 3.3rem;margin: 0 auto}
.ewm-code img{position: absolute;top: 50%;left: 50%;z-index: 2;width: .75rem;height: .75rem;margin-right: -50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%)}
.ewm__text{padding: .1rem .5rem;font-size: .3rem;color: #4d4d4d;text-align: center}