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(//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}
文档来源：51CTO技术博客https://blog.51cto.com/u_15296180/3052400
页:
[1]