【记录】微信公众号开发之获取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);
}

参数说明：

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

参数说明：

返回说明

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

{
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"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

参数说明

返回说明

正确时返回的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"
}

关于unionid机制 (官网说明)

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

2、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

参数说明

支付

支付流程：

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

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为项目名（仅为示例，非真实可用）