您现在的位置是：网站首页 > 心得笔记
微信联系人二维码生成
简介使用qrcode.js生成微信联系人二维码
先给出运行效果，方便游客选择是否是自己需要的！！！！
扫描后：
下面给出代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>二维码生成</title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color: #262626;
}
#box{
width:1000px;
height:600px;
margin:200px auto;
}
#box .qrcode{
width:400px;
height: 400px;
float: left;
margin: 40px 40px;
}
#box .introduce{
width:500px;
height: 600px;
float: left;
}
.introduce p{
width:200px;
height: 40px;
background: #333;
float: left;
margin:10px 20px;
color:#fff;
border-radius: 5px;
overflow: hidden;
}
.introduce p span{
float: left;
width:50px;
height:40px;
color:#fff;
text-align: center;
line-height: 40px;
}
.introduce p input{
width:150px;
height:40px;
float: left;
border: 0;
color:#fff;
background:#000;
text-indent:10px;
outline: none;
}
.introduce .btn{
width:440px;
height:40px;
text-align: center;
line-height: 40px;
background: #6c0;
}
.qrcode>img{
display: block;border:5px solid white;
}
</style>
</head>
<body>
<div id="box">
<h3 style="color: aliceblue">请用微信搜生成的二微码，查看效果</h3>
<div class="introduce">
<p>
<span>姓名：</span>
<input type="text" id="name" value="盛悦">
</p>
<p>
<span>公司：</span>
<input type="text" id="company" value="北京欧美思">
</p>
<p>
<span>职务：</span>
<input type="text" id="title" value="PHP开发工程师">
</p>
<p>
<span>地址：</span>
<input type="text" id="address" value="北京市丰台区星火路">
</p>
<p>
<span>手机：</span>
<input type="text" id="mobile" value="17610396617">
</p>
<p>
<span>邮箱：</span>
<input type="text" id="email" value="virus_yue@163.com">
</p>
<p>
<span>网址：</span>
<input type="text" id="web" value="blog.blonglee.me">
</p>
<p>
<span>备注：</span>
<input type="text" id="desc" value="盛悦个人博客" >
</p>
<p class="btn">开启通讯录</p>
</div>
<div class="qrcode" id="qrcode"></div>
</div>
<script src="/admin/js/jquery.min.js"></script>
<script src="/admin/js/qrcode.js"></script>
<script>
var name, company, title, address, mobile, email, web, desc;
$(".btn").click(function() {
name = "FN:" + $("#name").val() + "\n";
company = "ORG:" + $("#company").val() + "\n";
title = "TITLE:" + $("#title").val() + "\n";
address = "WORK:" + $("#address").val() + "\n";
mobile = "TEL:" + $("#mobile").val() + "\n";
email = "EMAIL:" + $("#email").val() + "\n";
web = "URL:" + $("#web").val() + "\n";
desc = "NOTE:" + $("#desc").val() + "\n";
var info = "BEGIN:VCARD\n" + name + company + title + address + mobile + email + web + desc + "END:VCARD";
//console.log(info);
//生成二维码
var qrcode = new QRCode("qrcode");
qrcode.makeCode(info);
})
</script>
</body>
</html>注意：引入你的项目中的jquery.js和qrcode.js，在这个过程中，可能会报错：
QRCode.js网址太长生成二维码报错：Code Length OverFlow Error
这时候你需要放弃你现在引入的qrcode.js，可以去https://github.com/KeeeX/qrcodejs/blob/master/qrcode.js下载最新的qrcode.js文件