小程序登錄除了常見的短信登錄、密碼登錄,還一個最重要的就是微信授權登錄了(畢竟是基於微信的,要給人家面子嗎:0,手動滑稽),寫這篇隨筆的原因還是好久沒更了,今天先隨便放一個壓壓檔。話不多說,直奔主題。
小程序的微信授權登錄中,可以直接寫入微信定義好的button組件掉起微信授權功能。
需要注意的就是定義open-type了,其對應的可選屬性還有很多種,具體去搜文檔即曉。
<button class="footer_nav_btn" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true"> //此處為微信登錄
<button class="footer_nav_btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true">//此處為獲取手機號登錄
wxGetUserInfo:function(res){ //微信登錄
if (!res.detail.iv) {
wx.showToast({
title: "您取消了授權,登錄失敗",
icon: "none"
});
return false;
}else{
this.resDetail = res.detail
this.showspinner = true
var that = this
wx.login({
success: function (r) {
var code = r.code;//登錄憑證
if (code) {
wx.getUserInfo({
success: function(res) {
request.post("您的接口", {
code:code,
encrypteData:res.encryptedData,
rawData:res.rawData,
signature:res.signature,
iv:res.iv
}).then(response => {
})
.catch(ex => {
console.log(ex,"ex")
});
},
fail: function () {
}
})
}
})
}
},
//手機號登錄
getPhoneNumber (e) { if(e.detail.errMsg == "getPhoneNumber:ok"){ this.encryptedData = e.detail.encryptedData this.iv = e.detail.iv var that = this wx.login({ success: function (r) { let code = r.code;//登錄憑證 request.post("您的登錄接口", { code:code, encrypteData:that.encryptedData, iv:that.iv, deviceType:that.$store.state.deviceType, osSystem:that.$store.state.osSystem }) .then(response => { “您的輸出結果” }) .catch(ex => { console.log(ex,"ex") }); }, fail: function () { } }) }else{ wx.showToast({ title: "您取消了授權,登錄失敗", icon: "none" }); return false; } },