微信小程式登入、獲取使用者資訊以及檢查session_key是否過期大致操作流程[開發採用wepy框架]
阿新 • • 發佈:2019-02-03
基於微信小程式對於getUserInfo的調整,獲取使用者資訊改採用button實現,基於此實現的微信小程式一整套登入流程。
在整個小程式的實現中需要呼叫wx.checkSession()介面,通過該介面檢測session_key是否過期。
- 基於該次專案的流程設計,首先在app.wpy檔案中的onLaunch函式中做如下處理:
wx.checkSession({
success:function(res){
//session_key未過期
},
fail:(res=>{
// session_key已過期
// 進行登入操作
wx.login({
success: function(res) {
const url = '介面地址' //本次專案中是從後臺獲取session_key的介面,可能流程不同,會有相應的變化
const data = {
//你要傳的資料
}
wepy.request({
url: url,
method: 'POST',
data: data,
}).then(res=>{
if (res.data.code == 0){
//拿到的openid和session_key存到快取中
//呼叫換取使用者id介面[需求不同,可能介面會有相應的變化]
const url = '獲取使用者id的介面'
const data = {'要傳的資料'}
wepy.request({
url: url,
method: 'POST',
data: data,
}).then((res)=>{
//該介面設計返回的引數包括換取的使用者ID和返回的使用者的微信中資訊,也就是通過button獲取的那個userInfo[我們為了後續的處理,所以後臺這塊返回使用者資訊,如果使用者還未登入,使用者資訊,返回是空,反之則有值]
//儲存使用者ID
wx.setStorage({
key:'userId',
data:'獲取到的使用者ID'
})
//儲存使用者資訊[userInfo]
wx.setStorage({
key:'userInfo',
data:'獲取到的使用者資訊'
})
})
}
})
}
});
})
})
- 在需要展示使用者資訊的頁面進行處理[onShow函式]
onShow(){
//從快取中獲取session_key
let skey = wx.getStorageSync('session_key');
if (!skey) {
//如果session_key不存在,再次執行登入
wx.login({
//該處登入同app.wpy[流程一樣]
});
}else{
// session_key存在
}
}
//我們假設這個頁面需要獲取使用者的資訊,首先給一個button[open-type設定為getUserInfo],使用這個拿到使用者的資訊,
getUserInfo(e){
this.userInfo = e.detail.userInfo; //e.detail.userInfo攜帶的就是使用者的個人資訊[包括頭像、暱稱等]
if(e.detail.userInfo){
wx.showToast({
title: '授權成功',
icon: 'success',
duration: 1500
})
//這裡做這樣的處理,是因為需求需要點選購物車按鈕跳轉訂單待支付頁,在沒有獲取到使用者資訊之前,跳轉購物車的按鈕隱藏,獲取使用者資訊按鈕顯示,反之則返
this.button = 'none'; //獲取使用者資訊button
this.myMenu = 'block'; //跳轉待支付訂單頁
//更新快取中的使用者資訊
wx.setStorage({
key:'userInfo',
data:this.userInfo
})
}else if(e.detail.errMsg == 'getUserInfo:fail auth deny'){
wx.showModal({
title: '提示',
content: '若不授權微信登入,則無法使用小程式。點選"授權"按鈕並允許使用"使用者資訊"方可正常使用。',
showCancel:false,
confirmText:'授權',
success:(res=>{
wx.openSetting({
success: (res) => {
}
})
})
})
}
},