【記錄】微信公衆號開發之獲取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爲項目名（僅爲示例，非真實可用）