小程序登录获取用户头像和昵称

秒速五厘米 2023-02-18 15:25 18阅读 0赞

## 获取用户信息 ##

这个是点击登录按钮获取用户信息

<image src="{
       {userInfo.avatarUrl}}"></image>
      <view wx:if="{
       {userInfo.openid}}">
        {
       {userInfo.nickName}}
      </view>
      <button wx:else open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">登录</button>

在对应页面js文件：

Page({
    	data: {
    		userInfo: {}
    	},
    	onGetUserInfo(e){
    		console.log('onGetUserInfo',e);
    		if(e.detail.userInfo){
    		this.setData({
    			avatarUrl:e.detail.userInfo.avatarUrl,
    			userInfo:e.detail.userInfo
    	   })
    	 }
    	}
    })

这里需要保留app.js内获取信息的函数：

//app.js
    App({
      onLaunch: function () {
        // 运行云函数需要配置一下
        wx.cloud.init();
    
        // 登录
        wx.login({
          success: res => {
            // 发送 res.code 到后台换取 openId, sessionKey, unionId
          }
        })
        // 获取用户信息
        wx.getSetting({
          success: res => {
            if (res.authSetting['scope.userInfo']) {
              // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
              wx.getUserInfo({
                success: res => {
                  // 可以将 res 发送给后台解码出 unionId
                  this.globalData.userInfo = res.userInfo
    
                  // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
                  // 所以此处加入 callback 以防止这种情况
                  if (this.userInfoReadyCallback) {
                    this.userInfoReadyCallback(res)
                  }
                }
              })
            }
          }
        })
      },
      globalData: {
        userInfo: null
      }
    })