微信小程序一键获取用户头像、昵称等基本信息

微信小程序一键获取用户头像、昵称等基本信息

系统:Win10
微信开发工具:Stable v1.03.2005140

根据官方发布更新说明:小程序登录、用户信息相关接口调整说明
对getUserInfo的功能进行了调整,可能已经无法实现下面的效果,请注意!!!

需求描述

在一次开发微信小程序的过程中,需要获取到使用小程序的用户头像和用户昵称,而且只需要一次授权,后面再使用就自动获取用户的信息

功能实现

1.操作流程

  • 用户登录时,使用 wx.getSetting 来查询用户是否授权过
    • 如用户首次登录,则使用 button open-type=‘getUserInfo’ 来调起授权
      • 若未授权或拒绝授权,则一直显示授权按钮
      • 若获得授权,则使用 wx.getUserInfo 来获取用户的头像、昵称等信息
    • 若用户是再次登录,则通过成功返回的 scope.userInfo 来调用用户的头像、昵称等信息

2.目录结构

这里我新建了一段代码片段来测试
在这里插入图片描述

3.关键代码

记得在 app.js 下创建一个全局变量 userInfo

App({
  globalData: {
    userInfo: null
  },
  onLaunch: function () {
    
  }
})

index/index.js

const app = getApp()
var that
Page({
  /* 页面初始数据 */
  data: {
    userInfo: {},
    hidden_actionSheet: true,
  },

  /**
   * 页面加载
   */
  onLoad: function () {
    that = this
    that.isAuthorize().then(res => { //用户已经授权获取基本信息
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          that.setData({
            userInfo: app.globalData.userInfo,
          })
        }
      })
    }).catch(res => { //用户没有授权获取基本信息
      that.setData({
        hidden_actionSheet: false,
      })
    })
  },

  /* 是否授权获取基本信息,已经授权返回到then,没有授权返回到catch */
  isAuthorize() {
    return new Promise((resolve, reject) => {
      // 获取用户授权状态
      wx.getSetting({
        success: res => {
          if (res.authSetting['scope.userInfo']) {
            console.log("全局--用户已经授权")
            resolve()
          } else {
            console.log("全局--用户还没有授权获取基本信息")
            reject()
          }
        }
      })
    })
  },

  // 底下的取消按钮
  actionSheetChange: function (e) {
    wx.showModal({
      showCancel: false,
      content: '部分功能需要登录才能使用',
    })
  },

  // 获取用户信息:拒绝还是接受都会进入这里
  allowGetUserInfo: function (e) {
    if (e.detail.rawData) { // 权限选择了:允许
      that.setData({
        userInfo: app.globalData.userInfo,
      })
      // 获取用户信息
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          that.setData({
            userInfo: app.globalData.userInfo,
            hidden_actionSheet: true, // 隐藏actionSheet
          })
        }
      })
    } else { // 权限选择了:拒绝
      wx.showModal({
        showCancel: false,
        content: '部分功能需要登录才能使用',
      })
    }
  },
})

index/index.wxml

<view class="container">
  <view class="userinfo">
    <!-- hasUserInfo为false表示没有获取到用户信息,就显示获取头像昵称的按钮 -->
    <action-sheet hidden="{{hidden_actionSheet}}" bindchange="actionSheetChange">
      <button class="bt_login" open-type="getUserInfo" bindgetuserinfo="allowGetUserInfo"> 微信授权登录 </button>
      <!-- 取消按钮可以不用 -->
      <action-sheet-cancel class='cancel'>取消</action-sheet-cancel>
    </action-sheet>

    <!-- 已获取用户信息,显示头像和昵称 -->
    <block hidden="{{!hidden_actionSheet}}">
      <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>

  </view>
</view>

index/index.wxss

page {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.bt_login {
  width: 200rpx;
  height: 70rpx;
  color: #6699FF;
  border: 3rpx solid #6699FF;
  border-radius: 80rpx;
  font-size: 35rpx;
  margin: 20rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cancel {
  font-size: 35rpx;
}

.userinfo-nickname {
  color: #aaa;
}

4.效果演示

下面是测试效果图,除了头像和昵称外,还可以获取用户的国家,城市,性别,语言等信息
在这里插入图片描述

  • 8
    点赞
  • 48
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李晋江

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值