【记录】微信公众号开发之获取openid，unionid，用户信息等数据，支付

获取openid

步骤：

1. 获取code
2. 调用https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code获取openid，access_token等信息

1.获取code的方法：

步骤：

1. 调用https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=redirect_uri&response_type=code&scope=snsapi_userinfo&state=state#wechat_redirect得到

详细代码：

getCode() {
    // 获取code
    // const redirect_uri='http://app.xxx.com/project'
    const redirect_uri=window.location.href.replace(/[\?&]((code|state|from|pass_ticket|isappinstalled)=[^&#]+)/g,'').replace(/&&/g,'');
    let appid = 'appid'
    let state = parseInt(Math.random() * 1000);
    const path=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(redirect_uri)}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`;
    window.location.replace(path);
}
复制代码

参数说明：

参数	是否必须	说明
appid	是	公众号的惟一标识
redirect_uri	是	受权后重定向的回调连接地址， 请使用 urlEncode 对连接进行处理
response_type	是	返回类型，请填写code
scope	是	应用受权做用域，snsapi_base （不弹出受权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出受权页面，可经过openid拿到昵称、性别、所在地。而且， 即便在未关注的状况下，只要用户受权，也能获取其信息 ）
state	是	重定向后会带上state参数，开发者能够填写a-zA-Z0-9的参数值，最多128字节
#wechat_redirect	是	不管直接打开仍是作页面302重定向时候，必须带此参数

redirect_uri要是可用的地址，最好是线上的，不能使用本地地址，不然会提示redirect_uri参数错误

好比此例中redirect_uri为http://app.xxx.com/project为生产地址，访问此地址，执行getCode()方法以后，会提示受权，若已经受权过，则会自动跳转，跳转到http://app.xxx.com/project?code=001IovRQ1kOCa218wpQQ1sbURQ1IovRv&state=3536

此项目获取code的代码为：

// 此处可用window.location.search获取参数，判断是否含有code，并取得code的值
// 本人项目使用uniapp,因此使用options.code得到参数
if (options.code) {
	this.getOpenId(options.code);
	this.loadData(); // 获取页面展现数据
} else {						
	this.$api.getStorage('openid').then((res) => {
		if (res.data) {
			this.loadData(); // 获取页面展现数据
		} else {
			this.getCode(); // 获取code
		}	
	}).catch((err) => {
		this.getCode(); // 获取code
	})			
}
复制代码

至此，就拿到code了

2. code换取openid，access_token等信息

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
获取openid,unionid，access_token
复制代码

参数说明：

参数	是否必须	说明
appid	是	公众号的惟一标识
secret	是	公众号的appsecret
code	是	上一步获取的code参数
grant_type	是	填写为authorization_code

返回说明

正确时返回的JSON数据包以下：

{
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE" 
}
复制代码

参数	描述
access_token	网页受权接口调用凭证,注意：此access_token与基础支持的access_token不一样
expires_in	access_token接口调用凭证超时时间，单位（秒）
refresh_token	用户刷新access_token
openid	用户惟一标识，请注意，在未关注公众号时，用户访问公众号的网页，也会产生一个用户和公众号惟一的OpenID
scope	用户受权的做用域，使用逗号（,）分隔

错误时微信会返回JSON数据包以下（示例为Code无效错误）:

{"errcode":40029,"errmsg":"invalid code"}
复制代码

注：访问这个地址获取openid等信息是会有跨域问题的，能够本身配置一下，或者通常这个是要后台小伙伴来完成的，直接调用后台小伙伴的接口就行了

获取unionid、昵称、头像等用户信息

https://api.weixin.qq.com/sns/userinfo?access_token=access_token&openid=openid&lang=zh_CN
复制代码

参数说明

参数	描述
access_token	网页受权接口调用凭证,注意：此access_token与基础支持的access_token不一样
openid	用户的惟一标识
lang	返回国家地区语言版本，zh_CN 简体，zh_TW 繁体，en 英语

返回说明

正确时返回的JSON数据包以下：

{   
  "openid":" OPENID",
  "nickname": NICKNAME,
  "sex":"1",
  "province":"PROVINCE"
  "city":"CITY",
  "country":"COUNTRY",
  "headimgurl":       "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNxxxxxx/46",
  "privilege":["PRIVILEGE1" "PRIVILEGE2"],
  "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
复制代码

参数	描述
openid	用户的惟一标识
nickname	用户昵称
sex	用户的性别，值为1时是男性，值为2时是女性，值为0时是未知
province	用户我的资料填写的省份
city	普通用户我的资料填写的城市
country	国家，如中国为CN
headimgurl	用户头像，最后一个数值表明正方形头像大小（有0、4六、6四、9六、132数值可选，0表明640*640正方形头像），用户没有头像时该项为空。若用户更换头像，原有头像URL将失效。
privilege	用户特权信息，json 数组，如微信沃卡用户为（chinaunicom）
unionid	只有在用户将公众号绑定到微信开放平台账号后，才会出现该字段。

关于unionid机制 (官网说明)

一、请注意，网页受权获取用户基本信息也遵循UnionID机制。即若是开发者有在多个公众号，或在公众号、移动应用之间统一用户账号的需求，须要前往微信开放平台（open.weixin.qq.com）绑定公众号后，才可利用UnionID机制来知足上述需求。

二、UnionID机制的做用说明：若是开发者拥有多个移动应用、网站应用和公众账号，可经过获取用户基本信息中的unionid来区分用户的惟一性，由于同一用户，对同一个微信开放平台下的不一样应用（移动应用、网站应用和公众账号），unionid是相同的。

简单来讲，就是用户要将公众号绑定到微信开放平台账号, 而且同一个用户的多个应用中,unionid是相同的

注： 本人使用uniapp，调用此接口的时候获取的数据会有乱码问题，是由于请求的 header 中 content-type 默认为 application/json，
没有设置字符集，因此要手动设置一下，解决方法为
header： {
  content-type: "application/json;charset=utf-8"
}
复制代码

这个接口也是会有跨域问题的，能够本身配置一下，或者调用后台小伙伴的接口

检验受权凭证（access_token）是否有效

https://api.weixin.qq.com/sns/auth?access_token=ACCESS_TOKEN&openid=OPENID
复制代码

参数说明

参数	描述
access_token	网页受权接口调用凭证,注意：此access_token与基础支持的access_token不一样
openid	用户的惟一标识

支付

支付流程：

1. 生成订单
2. 接口返回appId，nonceStr，package， signType， timeStamp，paySign信息
3. 调用微信提供的接口支付

参数	描述
appId	公众号的惟一标识
timestamp	支付签名时间戳
nonceStr	支付签名随机串，不长于 32 位
package	统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
signType	签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign	支付签名

let that = this;
let sucCallback = function(res) {
	that.nowOrderPay = false;
	uni.redirectTo({
		url: '/pages/money/paySuccess'
	})
}
let failCallback = function(err) {
	that.nowOrderPay = false;
	uni.redirectTo({
		url: '/pages/money/payFail'
	})
}
let cancelCallback = function(err) {
	that.nowOrderPay = false;
	uni.redirectTo({
		url: '/pages/money/payFail'
	})
}
// wx_config：生成订单返回的信息，包含appId，nonceStr，package， signType， timeStamp，paySign信息
WXPay(wx_config, sucCallback, failCallback, cancelCallback)
复制代码

WXPay 能够单独写一个文件，使用的地方导入

export function WXPay(wx_config, sucCallback, failCallback, cancelCallback) {
	let pack = {
		"appId":wx_config.appId,
		"nonceStr": wx_config.nonceStr,
		"package":wx_config.package,
		"signType":wx_config.signType,
		"timeStamp":wx_config.timeStamp,
		"paySign":wx_config.paySign
	}
	function onBridgeReady(){
		try{
			uni.showLoading({
				title: '正在发起支付..'
			})
			WeixinJSBridge.invoke(
				'getBrandWCPayRequest',pack,
				function(res){
					uni.hideLoading();
					if(res.err_msg == "get_brand_wcpay_request:ok" ){
						// 使用以上方式判断前端返回,微信团队郑重提示：
						//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
						 uni.showToast({
							title: '支付成功！'
						 })
						 sucCallback && sucCallback()
				   } else if(res.err_msg == "get_brand_wcpay_request:cancel" ){
						uni.showToast({
							title: '取消支付',
							icon: 'none',
							duration: 3000
						})
						failCallback && failCallback()
				   } else {
						uni.showToast({
							title: JSON.stringify(res),
							icon: 'none',
							duration: 3000
						})
						failCallback && failCallback()
				   }
				}
			); 
	  }catch(ex){
			uni.showToast({
				title: '支付出现异常！' + JSON.stringify(res)
			})
			failCallback && failCallback()
	  }
	}
	if (typeof WeixinJSBridge == "undefined"){
		if( document.addEventListener ){
			document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
		}else if (document.attachEvent){
			document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
			document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
		}
	}else{
		onBridgeReady();
	}
}
复制代码

WeixinJSBridge 为微信浏览器内置对象，不用引入jweixin-x.x.x.js

关于手机号码：公众号没有像小程序那样，点击按钮得到加密数据，解密以后得到手机号，公众号能够调用后台接口获取手机号码

参考微信公众号开发文档

支付时提示“当前页面的URL为注册”

解决方法： 登陆微信商户平台-产品中心-开发配置 添加公众号支付的支付受权目录，本里配置的支付目录为：app.xxx.com/project project为项目名（仅为示例，非真实可用）