? 背景
- 其實(shí)這篇文章幾個(gè)月前就寫完了,但是這段時(shí)間,微信小程序官方文檔有了更新,同事在我自己的實(shí)際操作過(guò)程中,發(fā)現(xiàn)之前寫的過(guò)于繁雜,所以現(xiàn)在進(jìn)行簡(jiǎn)化梳理,歡迎指摘.
- 語(yǔ)言框架:ThinkPHP3.2.3
- 更新時(shí)間:2018-07-10
- 也可以閱讀近期整理的一篇文章:小程序 報(bào)錯(cuò) errcode: 40029
? 步驟梳理
-
下面是小程序官方提供流程圖:
? 具體實(shí)現(xiàn)
一、登錄獲取用戶唯一信息 openID/unionID
- 此方式,只需要兩步操作即可,但是需要小程序端和項(xiàng)目服務(wù)器的代碼配合進(jìn)行操作,建議參考下官方說(shuō)明 wx.login(OBJECT)
步驟梳理:
> (1).獲取臨時(shí)登錄憑證—— code
> (2).將上述獲得的 code 通過(guò)request 請(qǐng)求發(fā)送給代碼服務(wù)器
> (3).請(qǐng)求接口地址:https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
> ;# 成功則會(huì)返回我們所需要的 "openID/unionID"
- 具體實(shí)現(xiàn):
①. 服務(wù)端代碼處理
- 后面將會(huì)進(jìn)行源代碼的上傳,具體代碼在
"WxController.class.php"
中,可作參考
②.小程序端 js
編碼
- 我在此處設(shè)置了一個(gè)
"button"
按鈕,通過(guò)點(diǎn)擊而調(diào)用其中的方法邏輯,其實(shí)在實(shí)際開(kāi)發(fā)中,自行將其中的代碼提取調(diào)用就可;
/**
* 獲取用戶唯一憑證
*/
bingGetOpenID: function() {
wx.login({
success: function(data) {
console.log('獲取登錄 Code:' + data.code)
var postData = {
code: data.code
};
wx.request({
url: 'http://fetowNew.com/wxApi/wx/getOpenID',//注意改成自己的服務(wù)器請(qǐng)求地址哦!
data: postData,
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
},
success: function(res) {
//回調(diào)處理
console.log('getOpenID-OK!');
console.log(res.data);
},
fail: function(error) {
console.log(error);
}
})
},
fail: function() {
console('登錄獲取Code失敗!');
}
})
},
③. 運(yùn)行效果如下:
- 注意觀察我的數(shù)據(jù)獲取情況,你會(huì)發(fā)現(xiàn)其中包含了
"unionID"
,這是因?yàn)槲以谖⑿砰_(kāi)放平臺(tái)進(jìn)行了綁定操作,如果你沒(méi)有這樣的操作,那么就不會(huì)有這個(gè)數(shù)據(jù)
提示:
UnionID
只在滿足一定條件的情況下返回。具體參看 UnionID機(jī)制說(shuō)明
注意配置信息的填寫,需要正確填寫自己的數(shù)據(jù)哦,應(yīng)該歧義不大
二、新方法獲取用戶信息
- 如果你接觸小程序時(shí)間較早,應(yīng)該會(huì)知道,微信小程序官方之前是使用接口
wx.getUserInfo()
方法進(jìn)行操作的,但是因?yàn)榻诎姹靖?現(xiàn)在有了新的方法,推薦閱讀文檔了解, wx.getUserInfo(OBJECT) 接口獲取用戶信息
①. 第一步,頁(yè)面使用button
引導(dǎo)
官方文檔已做注明:
請(qǐng)使用 <button open-type="getUserInfo"></button> 引導(dǎo)用戶主動(dòng)進(jìn)行授權(quán)操作
- 最簡(jiǎn)單的使用方式就是,使用頁(yè)面中的
Button
進(jìn)行引導(dǎo)操作即可:
<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bingGetUserInfo">獲取用戶信息</button>
②. 第二步,js文件進(jìn)行綁定事件處理
- 在對(duì)應(yīng)的
js
文件中,創(chuàng)建相應(yīng)的方法bingGetUserInfo()
:
/**
* 獲取用戶信息
*/
bingGetUserInfo:function(e){
console.log(e.detail);
},
-
上述方法執(zhí)行后的打印數(shù)據(jù)截圖如下:
③. 第三步,后續(xù)處理
- 根據(jù)上一步得到的
e.detail
打印出的對(duì)象數(shù)據(jù),直接進(jìn)行提取所需要的數(shù)據(jù)(比如微信昵稱和頭像鏈接、性別等); - 然后通過(guò)
wx.request()
存儲(chǔ)到自己的服務(wù)器中即可;
注意
(后面步驟,可繼續(xù)也可停止,自行決定!):
> 其實(shí),獲取當(dāng)前登錄用戶的 "openID/unionID" 信息在前面"(一)"已經(jīng)可以簡(jiǎn)單的獲得了;
> 但是如果想繼續(xù)當(dāng)前的步驟的話:
- 我們完全可以直接通過(guò)獲得的
"encryptedData"
,然后對(duì)其進(jìn)行 算法對(duì)稱解密操作,就可以獲取到用戶的openID/unionID
這些敏感數(shù)據(jù),并且文檔中也提供了不同語(yǔ)言的示例代碼
步驟梳理:
1).獲取臨時(shí)登錄憑證(code)
2).根據(jù)上一步中微信端傳來(lái)的參數(shù) "code",在本地服務(wù)器中請(qǐng)求微信的接口地址,從而得到"session_key"
>接口地址為:"https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code"
3).服務(wù)端獲取數(shù)據(jù)簽名加密信息
④. 進(jìn)一步的實(shí)現(xiàn)處理
- 小程序
js
代碼的補(bǔ)充擴(kuò)展,其實(shí)還是前面的bingGetUserInfo()
方法:
提示:
以我的
PHP
代碼為例,調(diào)用WXBizDataCryptController
類的wxDecrypt()
方法,傳入前面所獲得的所有參數(shù)即可
-
附一張數(shù)據(jù)反饋截圖:
提示:
> 此時(shí)只要進(jìn)行數(shù)據(jù)轉(zhuǎn)化即可得到我們所需要的 "openid/unionid" 重要信息;
> 比如,我需要用到此信息去數(shù)據(jù)庫(kù)比對(duì)該用戶的業(yè)務(wù)信息等;
> 當(dāng)然,我建議的是在服務(wù)端獲取到數(shù)據(jù)后就與自己的數(shù)據(jù)庫(kù)進(jìn)行匹配處理即可