微信登陆授权获取用户信息学习记录
wxml代码:
<view wx:if="{{canIUse}}" class="mai">
<button class="but" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
<view class="med">-----------·-----------</view>
<view class="txt">\t\t欢迎使用小程序，我们需要一些您公开的信息，包括微信昵称，头像等等，请放心，我们会妥善保管您的信息！</view>
</view>
<view wx:else>请升级微信版本</view>
js代码：
Page({
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { //显示加载的图标
wx.showLoading({
title: '加载中',
})
wx.login({
success(res){
if(res.code){
// //发起网络请求
// wx.request({
// url: 'https://test.com/onLogin',
// data:{
// code:res.code
// }
// })
wx.getSetting({
success (res){
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success: function(res) {
console.log(res.userInfo)
getApp().globalData.userInfo = res.userInfo
}
})
}
}
})
}else {
console.log('登陆失败' + res.errMsg)
}
}
})
// 查看是否授权
setTimeout(function () {
wx.hideLoading()
},2000)
},
bindGetUserInfo (e) {
console.log(e.detail.userInfo)
},
})
json代码：
{
"usingComponents": {},
"navigationBarBackgroundColor": "#F2F2F2",
"navigationBarTitleText": "微信授权",
"navigationBarTextStyle": "black"
}
wxss代码：
/* pages/load/load.wxss */
.mai{
width: 80%;
height: 300rpx;
margin-top: 350rpx;
margin-left: 10%;
margin-right: 10%;
}
.but{
width: 70%;
height: 80rpx;
background-color: #04be01;
border-radius: 10rpx;
align-content: center;
text-align: center;
margin-left: 15%;
margin-right: 15%;
color: white;
font-size: 37rpx;
font-weight: bold;
}
.txt{
color: #8a8a8a;
width: 92%;
font-size: 32rpx;
margin-top: 10rpx;
margin: auto;
font-weight: 10rpx;
}
.med{
color: #8a8a8a;
font-size: 40rpx;
text-align: center;
margin-top: 20rpx;
}
