最近因為小程式官方,逐步廢除UserInfo介面的這個決定,讓很多微信小程式的開發者,很煩惱,同時我也因為這個上火,公司有重要會議要展示,突然來著這麼一招。真的是夠了,但是沒辦法,開始改吧。
於是我,在社群找了很多官方的文件小程式•小故事(4)--獲取使用者資訊 | 微信公眾平臺 開發者社群。 你會發現跟原來的方式,只是改變了userinfo的資料返回。 login的介面拿 res.code,
然後點選登陸按鈕的返回值相結合,就可以換取到unionid,來開始業務邏輯了。
function login(userInfo,callback,reset) {
wx.login({
success: res => {
// 傳送 res.code 到後臺換取 openId, sessionKey, unionId
if(res.code){
//存使用者資訊
wx.setStorageSync('UserInFo', userInfo)
// 掃面二維碼進入
let Scene = wx.getStorageSync('scene')
let userInfoStr = JSON.stringify(userInfo);
wx.request({
url: api.WxUnionId,
data: {
appid: 'xxx',//測試
secret: 'xxx',
js_code: res.code,
grant_type: 'authorization_code',
userInfo: userInfoStr,
scene:Scene//這個是我們的業務邏輯的引數 忽略
},
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: callback
})
}else{
}
}
}) 複製程式碼
封裝好這個,就可以開始用button 來開始彈授權的吐司了。
<button class =“login-btn”open-type =“getUserInfo”bindgetuserinfo =“hand
leUserInfo”>
登入
</ button>
// 然後列印events 你就可以加密資料 資料 調介面 後端解析 換 unionId
handleUserInfo(e) {
let msg = e.detail.errMsg;
if(msg === 'getUserInfo:ok'){
let user = e.detail.userInfo;
user.encryptedData = e.detail.encryptedData;
user.iv = e.detail.iv;
utils.setDataBase('islogin',true);//set 本地資料
utils.login(user,this.handleLogin.bind(this))
this.setData({
islogin:false
});
}else{
utils.setDataBase('islogin',false);//set 本地資料
this.setData({
islogin:true
});
utils.showModal('xxx,申請獲得您的公開資訊(頭像,暱稱等)。授權後,您能體驗到我們更完善的功能,謝謝您關注五色糖。',false,this);
}
},
在handleLogin 裡面 拿到後端的res 就可以開始業務邏輯了。涉及到業務邏輯 就不貼程式碼了。複製程式碼
因為我當時,是一個人寫電商商城,那會mpvue 沒有出 wepy 公司沒有留學習的時間,以上的程式碼全是原生的寫法,但是改這個最重要的,就是別煩,其實你慢慢捋順了就好了。
https://www.zhihu.com/video/979511841957826560 效果在這裡。
登陸頁面比較醜,UI 還沒有出圖,就不要在意這些細節了。
https://juejin.im/post/5b0ccd4e51882515861d2347#comment
我還總結了一些我寫小程式的筆記,寫的有不好的地方,還請大神指點。