微信小程序云开发之最新getUserProfile接口登录实现

前言

自从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下载

猜你喜欢

转载自blog.csdn.net/sdqmrj/article/details/123708696