前言
自从2021年4月13日微信小程序api做了新调整,原本获取用户授权的getUserInfo接口不再使用,这对于想要再次升级新版本以及新的小程序开发者来说,学会将getUserInfo改成getUserProfile接口是必然的。
本期文章将介绍如何使用新接口获取用户授权并保留用户数据,以便于提高用户后期使用小小程序的体验。
传统小程序登录流程
说明
1.调用 wx.login()获取临时登录凭证code,并回传到开发者服务器。
2.调用 auth.code2ession 接口,换取用户唯一表示OpenID、用户在微信开放平台账号下的唯一标识UnionID(若当前小程序已绑定到微信开放平台账号)和会话秘钥session_key。
云开发微信小程序登录流程
wxml页面
登录授权页面按钮
<view wx:if="{
{login==false}}" style="display:flex; flex-direction:column; justify-
content:center;align-items: center;">
<image style="margin-top: 300rpx;" src="cloud://cloud1-1g0att72a345759a.636c-cloud1-
1g0att72a345759a-1309936350/chengxu/登录页图片.png"></image>
<button bindtap="getUserProfile" style="margin-top: 100rpx;width: 200rpx;" >
登录
</button>
</view>
登录成功页面
<view wx:if="{
{login==true}}" style="margin-top:200rpx;margin-bottom: 40rpx;padding-top:
50rpx;padding-bottom: 50rpx;" class="cu-list menu margin-sm radius shadow-warp bg-
white ">
<view class=" cu-item arrow">
<navigator class="content" url="../set/set" hover-class="none">
<image src="{
{ userphoto }}" style="border-
radius:50%;overflow:hidden;width:170rpx;height:170rpx;" mode="widthFix" />
<text class="name"
style="color:#000;overflow:hidden;margin-left:60rpx" >Hi,{
{username}}</text>
</navigator>
</view>
</view>
js页面
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认
// 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (xx) => {
let userInfo = xx.userInfo;
//console.log(userInfo)
if(!this.data.login&&userInfo){
wx.showLoading({
title: '登陆中',
})
db.collection('users').add({
data:{
userinfo:{
userphoto:userInfo.avatarUrl,
username:userInfo.nickName,
anonymous:"",
isVIP:false,
login:true,
},
}
}).then((res)=>{
db.collection('users').doc(res._id).get().then((res)=>{
app.userInfo=Object.assign(app.userInfo,res.data);
//console.log(res.data);
wx.hideLoading()
this.setData({
userphoto:app.userInfo.userinfo.userphoto,
username:app.userInfo.userinfo.username,
anonymous:app.userInfo.userinfo.anonymous,
isVIP:app.userInfo.userinfo.isVIP,
login:true,
wenzhang:app.userInfo.wenzhang,
message:app.userInfo.message,
})
wx.showToast({
title: '登陆成功!',
})
if(app.fenxiang=="true"){
app.fenxiang=="false"
wx.navigateTo({
url:"/pages/plate2/plate2?id="+app.fxssid+"&fenxiang=false"
})
}
})
})
}
}
})
},
原理
通过button绑定授权事件,调取getUserProfile接口,弹出用户授权选择框。
用户选择拒绝,则事件结束,login==false页面保持在登录页面显示状态。
用户选择允许,则getUserProfile接口启动,获取用户授权内容并上传至指定云开发数据库存储用户授权数据,以便于用户下次使用。
此时,login==true,登录页面隐藏,登录成功页面显示,并显示用户授权信息,包含昵称头像等。如下图所示。
至此,使用微信云开发新登录接口getUserProfile获取用户数据授权并存储的功能就实现了。
感谢各位看官的支持与鼓励。
获取详细源码及树洞项目源码可跳转至文章:云开发树洞论坛小程序源码零基础可配置-Javascript文档类资源-CSDN下载