微信小程序实现授权登录之获取用户信息
时间：2022-06-05 11:18:18|栏目：JavaScript代码|点击： 次
本文实例为大家分享了微信小程序实现获取用户信息的具体代码，供大家参考，具体内容如下
小程序登录
小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。
登录流程时序
效果展示：
功能实现：
新建一个login页面
login.js：
wx.getUserProfile用于获取用户信息
wx.getStorageSync（）用于获取缓存，进入小程序时调用
wx.setStorageSync（）用于保存缓存，保存登录信息，下次进入小程序自动登录
Page({
data:{
userInfo:'',
},
onLoad(){
let user=wx.getStorageSync('user')
this.setData({
userInfo:user
})
},
login(){
console.log('点击事件执行了')
wx.getUserProfile({
desc: '必须授权才能使用',
success:res=>{
let user=res.userInfo
wx.setStorageSync('user', user)
console.log('成功',res)
this.setData({
userInfo:user
})
},
fall:res=>{
console.log('失败',res)
}
})
},
nologin(){
this.setData({
userInfo:''
})
wx.setStorageSync('user', null)
}
})
login.wxml:
<!--登录-->
<button wx:if="{{!userInfo}}" bindtap="login">登录</button>
<view wx:else class="root">
<image class="touxiang" src="{{userInfo.avatarUrl}}"></image>
<text class="nicheng">{{userInfo.nickName}}</text>
</view>
<!--退出登录-->
<view wx:if="{{userInfo}}">
<button bindtap="nologin" >
<text>退出登录</text>
</button>
</view>
login.wxss:
.touxiang {
width: 150rpx;
height: 150rpx;
border-radius: 50%;
margin-top: 20rpx;
margin-bottom: 10rpx;
margin-left: 40%;
}
.nicheng{
color:white;
}
json文件无需更改。
栏 目：JavaScript代码
下一篇：JS实现放烟花效果
本文标题：微信小程序实现授权登录之获取用户信息
本文地址：http://www.codeinn.net/misctech/203800.html
