关于微信支付（H5获取openid）_h5微信支付为什么会弹出来获取用户昵称

打开电脑，脑袋里把最近做的需求过了一遍，让我最吃足苦头的还是微信支付，不是说有多难，而是坑太多，防不胜防，具体遇到的坑后续总结后再一并更新。
第一次做微信开发，第一次做微信支付，没办法，硬着头皮来，边看文档边思考整个逻辑，等到整个流程过了一遍后，就开始着手撸代码了。

####Config参数配置(配置成功可略过此步)

<?php
	error_reporting(E_ALL || ~E_NOTICE);
	header("Content-type:text/html; charset=utf-8");
	require_once "sdk/jssdk.php";
	$jssdk = new JSSDK(appId, 密钥);
	$signPackage = $jssdk->GetSignPackage();
?>

//通过config接口注入权限验证配置
wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '<?php echo $signPackage["appId"];?>',
 	timestamp: '<?php echo $signPackage["timestamp"];?>',
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: ['getBrandWCPayRequest'] // 必填，需要使用的JS接口列表
});	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

建议debug开启调试模式，config配置提示成功后，开始进入主题。
1

####网页授权获取openid
由于微信支付需要用户openid,而获取openid则需要进行网页授权，将获取到的openid存入cookie中，避免每次请求都要进行一次授权来获取openid。
1.授权用静默授权即可，首先获取code
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。若用户禁止授权，则重定向后不会带上code参数，仅会带上state参数redirect_uri?state=STATE

2.获取code后，请求以下链接获取access_token： 
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
请求成功后，返回的数据中可获得openid,进而可进行下一步的支付。
1
2
3
4
5

微信支付关键点是要获取到openid。

以下为代码实现：

		$(function(){
			var openId="";
			var code="";		
			//获取openId
			openId=getcookie('openId'); 
			_code = getQueryString('code');
			if (openId==null){
				if(_code==null){
					var fromurl = location.href;			
					var url="https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号ID&redirect_uri="+encodeURIComponent(fromurl)+"&response_type=code&scope=snsapi_base&state=123#wechat_redirect";   
					window.location.href=url;
				}else{
					$.ajax({     
						url: serverUrl+"api/webpay.openid?_v=1.3.4&code="+_code, 
						type: "get",
	                    async:false,  
	                    cache:false, 						
						dataType:'json',
						success: function (result) {
							if (result.data != null && result.data.hasOwnProperty('openid') && result.data.openid !=""){  
								openId = result.data.openid;
								addcookie("openId",openId,36000);	
								//进行支付逻辑...		
															
                            }else{  
                              location.href(fromurl);  
                            } 
						}
						
					}); 						
				}
			}else{
				openId = getcookie('openId'); 	
				//进行支付逻辑...			
			}
		})		
		
		//获取code参数
		function getQueryString(name) {
			var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
			var r = window.location.search.substr(1).match(reg);
			if (r != null) {
				return unescape(r[2]);
			 }
			return null; 
		}
		
		function addcookie(name,value,expireHours){  
			var cookieString=name+"="+escape(value)+"; path=/";  
			//判断是否设置过期时间  
			if(expireHours>0){  
				var date=new Date();  
				date.setTime(date.getTime+expireHours*3600*1000);  
				cookieString=cookieString+"; expire="+date.toGMTString();  
			}  
			document.cookie=cookieString;  
		}  
		  
		function getcookie(name){  
			var strcookie=document.cookie;  
			var arrcookie=strcookie.split("; ");  
			for(var i=0;i<arrcookie.length;i++){  
			var arr=arrcookie[i].split("=");  
			if(arr[0]==name)return decodeURIComponent(arr[1]); 
			}  
			return null;  
		}  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67