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

获取用户信息

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

  <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
  }
})