web应用微信扫码绑定用户

开发参考官方文档 准备工作｜微信开发文档

需求：“我的账户” 页面增加 “绑定微信” 按钮，点击生成微信登录二维码，用户扫码授权后提示 “绑定成功” / “绑定失败” / “该微信号已被用户xx绑定”。 前后端分离前台无法直接获取扫码结果，所以本例扫码结果存储在cookie，前台每300毫秒查询一次cookie，获取到执行相应事件并删除该cookie值。

一、 html页面增加绑定微信按钮

<button id ='bindWechat' role="button" aria-disabled="false">
	<span class="ui-button-text">绑定微信</span>
</button>

<script>
	// 绑定微信点击事件
	$( "#bindWechat" ).button().click(function() {
   
		var bind_vv_t = null;
		ThirdBind(function (randomStr) {
   
			clearInterval(bind_vv_t);
			//每300毫秒执行一次，获取cookie值
			bind_vv_t = setInterval(function() {
   
				var data = getCookie(randomStr);
				if (data) {
   
					//扫码结果获取成功后删除cookie
					clearCookie(randomStr);
					clearInterval(bind_vv_t);
					data = JSON.parse(decodeURIComponent(data));
					console.log(data);
					//授权失败
					if(data.code!==0){
   
						alert(data.message);
					}else{
   
						//授权成功 TODO 刷新页面或跳转页面等操作
						
					}
				}
			},300)
		});
	});
	
	//第三方账号绑定  调用后台接口生成微信二维码，randomCookies是随机生成的cookie的key值，扫描结果会在后台存储到cookie。callback回调函数，传入randomCookies，用于前台获取微信扫码结果
	function ThirdBind(callback) {
   
		var width = 563,height = 593;
		//后台微信二维码接口
		var url = "http://xxx/system.WechatAction.do?CMD=bindWechat";
		var randomCookies = "emmp"+(new Date().getTime());
		if (url) {
   
			url += "&callback=" + randomCookies;
			var l = (window.screen.width - width) / 2,
					t = (window.screen.height - height) / 2;
			window.open(url, "wechat", "width=" + width + ",height=" + height + ",left=" + l + ",top=" + t + ",menub