小程序获取用户登录及手机号登录
小程序登录除了常见的短信登录、密码登录,还一个最重要的就是微信授权登录了(毕竟是基于微信的,要给人家面子吗: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; } },