微信小程序最新授权登录
小程序可以通过getPhoneNumber来获取用户手机号,但是getPhoneNumber必须绑定在button组件里。详情官网:微信小程序获取手机号
如何实现页面进入小程序授权登录?
实现方法:写一个类似微信授权登录的页面,让用户通过按钮触发getPhoneNumber,实现登录授权。再用户进入小程序的时候加个判断,如果未授权,跳到这个登录页面,如果授权,跳到首页。
实现步骤:
1、登录页login
- wxml部分
<view wx:if="{{canIUse}}" class='login-box'>
<view class='login-header'>
<image class='login-img' mode="aspectFill" src='/images/login_pic.png'></image>
</view>
<button class='login-btn' open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" >
<image src='/images/icon/login_wx.png'></image>
微信一键登录
</button>
</view>
<view wx:else>请升级微信版本</view>
- wxss部分
page{
background: #fff;
height: 100%;
overflow: hidden;
border-top: 1rpx solid #E0E0E0;
}
.login-box{
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
padding: 0 96rpx;
}
.login-header{
flex: 1;
display: flex;
align-items: center;
margin-bottom: 100rpx;
}
.login-img{
width: 436rpx;
height: 296rpx;
}
.login-btn{
width: 100%;
background: #11BE84;
margin-bottom: 300rpx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
}
.login-btn >image{
width: 36rpx;
height: 36rpx;
margin-right: 30rpx;
}
- js部分
//登陆
onLogin() {
let that = this
wx.login({
success(res) {
if (res.code) {
api.getXcxUserInfo({
code: res.code
}).then(res => {
that.setData({
sessionKey: res.data.data.sessionKey
})
}).catch(err => {
console.log('获取sessionKey失败')
})
} else {
console.log('登录失败!' + res.errMsg)
}
}
})
},
// 获取手机号授权
getPhoneNumber(e) {
let that = this
wx.showLoading({
title: '加载中',
mask: true,
})
wx.checkSession({
success: function() {
api.phoneAES({
encrypData: e.detail.encryptedData,
ivData: e.detail.iv,
sessionKey: that.data.sessionKey
}).then(res => {
console.log(JSON.parse(res.data.data).phoneNumber)
that.setData({
phone: JSON.parse(res.data.data).phoneNumber
})
api.login({
userName: that.data.phone
}).then(res => {
wx.setStorageSync('token', res.data.data)
wx.reLaunch({
url: '../index/index'
})
}).catch(err => {
console.log("获取token失败");
})
}).catch(err => {
console.log("拒绝登录");
wx.hideLoading()
wx.showModal({
title: '提示',
content: 'BD小助手需要微信授权登录才能正常使用,请授权!',
showCancel: false
})
})
},
fail: function () {
console.log("获取wx.checkSession接口失败");
}
})
},
2、判断是否登录,在app.js
onShow() {
this.getToken()
},
//获取token
getToken(){
let token = wx.getStorageSync('token')
if (!token) {
wx.reLaunch({
url: 'pages/login/login' //无token跳转到登录页
})
} else {
wx.reLaunch({
url: "pages/index/index" //有token跳转到首页
})
}
}
版权声明:本文为weixin_41698051原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。