qrcode.js和jQuery根据用户输入信息生成微信联系人二维码

1.首先去官网下载qrcode.js
2.下载最新的jQuery文件
3.导入qrcode.js文件和jQuery文件
html部分:

<div id="box">
			<div class="left">
				<ul>
					<li>
						<span>姓名</span>
						<input type="text" id="name" />
					</li>
					<li>
						<span>公司</span>
						<input type="text" id="company" />
					</li>
					<li>
						<span>职位</span>
						<input type="text" id="title" />
					</li>
					<li>
						<span>地址</span>
						<input type="text" id="Address" />
					</li>
					<li>
						<span>手机</span>
						<input type="text" id="mobile" />
					</li>
					<li>
						<span>邮箱</span>
						<input type="text" id="email" />
					</li>
					<li>
						<span>网址</span>
						<input type="text" id="web" />
					</li>
					<li>
						<span>备注</span>
						<input type="text" id="desc" />
					</li>
					<li id="bth">开启通讯录</li>
				</ul>
			</div>
			<div class="right" id="qrcode"></div>

css部分:

	body {
				margin: 0;
				padding: 0;
				background-image: url(img/5a0ea84244421.png);
			}
			
			#box {
				width: 930px;
				height: 300px;
				margin: 80px auto;
				position: absolute;
				top: 20%;
				left: 10%;
			}
			
			.left {
				float: left;
				width: 535px;
				height: 320px;
			}
			
			.right {
				margin-top: 25px;
				float: right;
				width: 180px;
				height: 180px;
			}
			
			.left ul li {
				color: white;
				float: left;
				list-style: none;
				width: 200px;
				height: 40px;
				background: #333;
				margin: 10px 20px;
				text-align: center;
				line-height: 40px;
			}
			
			.left ul li span {
				float: left;
				width: 50px;
				height: 40px;
			}
			
			.left ul li input {
				float: left;
				width: 150px;
				height: 38px;
				border: 0;
				background: rgb(0, 0, 0.1);
				color: white;
				outline: none;
				text-indent: 10px;
			}
			
			#bth {
				width: 440px;
				background: #00CCCC;
				cursor: pointer;
				border-radius: 5px;
			}

js部分:

	var name, company, title, Address, mobile, email, web, desc;
			$('#bth').click(function() {
				name = "FN:" + $('#name').val() + "\n";
				company = "ORG:" + $('#company').val() + "\n";
				title = "TITLE:" + $('#title').val() + "\n";
				Address = "ADR:" + $('#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);
				//让手机识别为通讯录 
			});

最终效果:

二维码生成成功后，我们可以打开微信扫一下，就会发现刚才文本框输入的信息全部保存到了新建联系人中，直接可以添加