微信小程序授权登录
微信小程序更改了getUserInfo的接口,无法自动去弹出授权,所以在获取授权信息的时候需要根据button去进行获取;
在首页文件中,编写一个获取授权的页面,在刚进入页面时,判断用户是否授权。如果没有授权则显示出授权的页面,否则直接显示页面;
// 判断是否需要显示授权按钮
<view wx:if="{
{isHide}}">
<view wx:if="{
{canIUse}}" >
<view class='header'>
<image src='/images/wx_login.png'></image>
</view>
<view class='content'>
<view>申请获取以下权限</view>
<text>获得你的公开信息(昵称,头像等)</text>
</view>
<button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
授权登录
</button>
</view>
<view wx:else>请升级微信版本</view>
</view>
<view wx:else> 这里是正文内容 </view>
css:
//授权框的样式;
.header {
margin: 90rpx 0 90rpx 50rpx;
border-bottom: 1px solid #ccc;
text-align: center;
width: 650rpx;
height: 300rpx;
line-height: 450rpx;
}
.header image {
width: 200rpx;
height: 200rpx;
}
.content {
margin-left: 50rpx;
margin-bottom: 90rpx;
}
.content text {
display: block;
color: #9d9d9d;
margin-top: 40rpx;
}
.bottom {
border-radius: 80rpx;
margin: 70rpx 50rpx;
font-size: 35rpx;
}
js代码
page({
isHide: false,
userInfo: {
}
})
onLoad: function () {
var that = this;
// 查看是否授权
wx.getSetting({
success: function (res) {
if (res.authSetting['scope.userInfo']) {
wx.getUserInfo({
success: function (res) {
// 用户已经授权过,不需要显示授权页面,所以不需要改变 isHide 的值
// 获取昵称和头像,**这里看需求因为这里需要将昵称和头像传送给后台所以需要;**
var name = res.userInfo.nickName;
var photo = res.userInfo.avatarUrl;
//调取登录按钮
that.userLogin(name,photo);
}
});
} else {
// 用户没有授权
// 改变 isHide 的值,显示授权页面
that.setData({
isHide: true
});
}
}
});
},
// 用户登录方法
userLogin:function(name,photo){
var That = this;
wx.login({
success: res => {
wx.request({
url: api.login,
data:{
code:res.code,name:name,photo:photo},
success: res => {
// 获取oppenid 和sessicon_key 用户ID
var wechat = {
openid:res.data.openid,
session_key: res.data.session_key,
uid:res.data.uid
}
//返回openid session_key 本地缓存,方便其他页面使用
wx.setStorage({
key: 'wechat',
data: wechat
})
}
});
}
});
},
// 用户授权方法
bindGetUserInfo: function (e) {
if (e.detail.userInfo) {
//用户按了允许授权按钮
var that = this;
var name = e.detail.userInfo.nickName;//获取姓名
var photo = e.detail.userInfo.avatarUrl;//获取头像
//授权成功后执行登录方法;
this.userLogin(name,photo);
//授权成功后,通过改变 isHide 的值,让实现页面显示出来,把授权页面隐藏起来
that.setData({
isHide: false,
userInfo:e.detail,
});
} else {
//用户按了拒绝按钮
wx.showModal({
title: '警告',
content: '您点击了拒绝授权,将无法进入小程序,请授权之后再进入!!!',
showCancel: false,
confirmText: '返回授权',
success: function (res) {
// 用户没有授权成功,不需要改变 isHide 的值
if (res.confirm) {
console.log('用户点击了“返回授权”');
}
}
});
}
},