小程序获取用户微信号授权-一进入小程序授权登录获取用户信息

lxf2023-11-12 04:10:01
摘要

这篇文章主要介绍了微信小程序实现授权登录之获取用户信息,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现获取用户信息的具体代码,供大家参考,具体内容如下

小程序登录

小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。

登录流程时序

小程序获取用户微信号授权-一进入小程序授权登录获取用户信息

效果展示:

小程序获取用户微信号授权-一进入小程序授权登录获取用户信息

小程序获取用户微信号授权-一进入小程序授权登录获取用户信息

小程序获取用户微信号授权-一进入小程序授权登录获取用户信息

功能实现:

新建一个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" ></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文件无需更改。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。