微信小程序获取用户头像和昵称完美解决方法(最新方法)

最终效果

在这里插入图片描述

1、背景

自 2022 年 10 月 25 日 24 时后,用户头像昵称获取规则将进行如下调整在这里插入图片描述

2、头像昵称填写

从基础库 2.21.2 开始支持

当小程序需要让用户完善个人资料时,可以通过微信提供的头像昵称填写能力快速完善。
根据相关法律法规,为确保信息安全,由用户上传的图片、昵称等信息微信侧将进行安全检测,组件从基础库2.24.4版本起,已接入内容安全服务端接口(mediaCheckAsync、msgSecCheck),以减少内容安全风险对开发者的影响。

具体使用方法

需要将 button 组件 open-type 的值设置为 chooseAvatar,当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。

官方示例效果

在这里插入图片描述

3、昵称填写

具体使用方法

需要将 input 组件 type 的值设置为 nickname,当用户在此input进行输入时,键盘上方会展示微信昵称。

从基础库2.24.4版本起,在onBlur 事件触发时,微信将异步对用户输入的内容进行安全监测,若未通过安全监测,微信将清空用户输入的内容,建议开发者通过 form 中form-type 为submit 的button 组件收集用户输入的内容。

官方示例效果

在这里插入图片描述

4、代码示例

1、wxml

<page-layout>
  <view slot="header">
    <header-navbar title="个人信息"></header-navbar>
  </view>
  <!-- 关键代码 start -->
  <view slot="scroll" class="content">
    <view class="row">
      <view class="text1">头像:</view>
      <button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
        <image class="avatar" src="{{userInfo.avatar || ''}}"></image>
      </button>
    </view>
    <view class="row">
      <view class="text1">昵称:</view>
      <input type="nickname" class="name-input" name="nickname" value="{{userInfo.nickName||''}}" bindchange="onInput" placeholder="请输入昵称" />
    </view>
  </view>
   <!-- 关键代码 end -->
  <view slot="bottom" class="info__footer">
    <t-button t-class="footer-btn" theme="primary" content="保存" size="medium" shape="round" hover-class="none" bindtap="tapSave"></t-button>
  </view>
</page-layout>

2、js

import request from '../../utils/request'
const baseUrl = require('../../utils/baseUrl')
Page({
  data: {
    userInfo: {
      avatar: '',
      customerId: '',
      depositNum: '',
      mobile: '',
      nickName: '',
      waterNum: ''
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getUserInfo()
  },
  // 最终提交保存
  async tapSave() {
    await this.uploadFile()
    console.log(this.data.userInfo);
    // return
    const res = await request('/customerInfo/update', 'PUT', {
      "avatar": this.data.userInfo.avatar,
      "nickName": this.data.userInfo.nickName,
    })
    console.log('res', res);
    if (res.success) {
      wx.showToast({
        title: '保存成功',
        icon: 'none'
      })
      wx.switchTab({ url: '/pages/usercenter/index' });
    }
  },
  // 输入昵称
  onInput(e) {
    const { value } = e.detail
    console.log('输入昵称', value);
    this.setData({
      ['userInfo.nickName']: value
    })
  },
  // 选择头像
  onChooseAvatar(e) {
    console.log('选择头像', e);
    const { avatarUrl } = e.detail
    this.setData({
      ['userInfo.avatar']: avatarUrl
    })
  },
  uploadFile() {
    let that = this
    return new Promise((resolve, reject) => {
      console.log('uploadFile');
      let url = `${baseUrl}/waterStoreFile/upload`
      // res.tempFiles[0].tempFilePath
      wx.uploadFile({
        filePath: this.data.userInfo.avatar,
        name: 'file',
        url: url,
        header: {
          'Authorization': wx.getStorageSync('token') || ''
        },
        success(res) {
          let result = JSON.parse(res.data)
          console.log('上传成功', result);
          if (result.success) {
            console.log('成功');
            that.setData({
              ['userInfo.avatar']: result.data.outsideUrl
            })
          }
          resolve()
        },
        fail(rej) {
          console.log('rej', rej);
          resolve(rej)
        }
      })
    })
  },
  async getUserInfo() {
    const res = await request('/customerInfo/get', 'GET')
    console.log('个人信息', res);
    this.setData({
      userInfo: res.data || {}
    })
  }
})

3、wxss

.content {
  padding: 20rpx;
}

.info__footer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 80rpx;
  padding-top: 20rpx;
  background: #fff;
}

.info__footer .footer-btn {
  width: 398rpx;
}

.footer-btn {
  background: linear-gradient(90deg, #34AAFF 0%, #0A73EE 100%) !important;
  border: none !important;
}

.footer-btn::after {
  border: none !important;
}

.content .row {
  display: flex;
  align-items: center;
  height: 110rpx;
  padding-left: 20rpx;
}

.content .text1 {
  flex: 2;
}

.content .name-input,
.content .avatar-wrapper {
  flex: 6;
  text-align: right;
}

.content .avatar-wrapper::after {
  border: none !important;
}

.content .avatar-wrapper {
  display: flex;
  justify-content: flex-end;
}

.content .avatar-wrapper .avatar {
  display: block;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}

5、手机示例图

在这里插入图片描述
在这里插入图片描述

其他文章

Vue3 + Vite + Ts开源后台管理系统模板


基于ElementUi或AntdUI再次封装基础组件文档


基于Element-plus再次封装基础组件文档(vue3+ts)

在Uniapp微信小程序中,用户可以通过微信授权登录来获取用户头像昵称信息。具体实现步骤如下: 1. 在小程序中添加一个按钮,用于触发微信授权登录功能。 ```html <view @tap="login"> 微信登录 </view> ``` 2. 在login方法中,调用微信登录接口,获取用户微信授权登录信息。 ```javascript methods: { login() { uni.login({ provider: 'weixin', success: res => { console.log(res.code) // 获取用户登录凭证code // 调用接口获取用户头像昵称信息 this.getUserInfo(res.code) } }) }, getUserInfo(code) { uni.request({ url: 'https://your-api-url.com/getUserInfo', method: 'POST', data: { code: code }, success: res => { console.log(res.data) // 获取用户头像昵称信息 // 将用户头像昵称信息显示在页面上 this.avatar = res.data.avatar this.nickname = res.data.nickname } }) } } ``` 3. 在服务器端接收用户登录凭证code,并调用微信接口获取用户头像昵称信息。 ```javascript const request = require('request') const APPID = 'your-appid' const SECRET = 'your-secret' exports.getUserInfo = async (event, context) => { const code = event.code const url = `https://api.weixin.qq.com/sns/jscode2session?appid=${APPID}&secret=${SECRET}&js_code=${code}&grant_type=authorization_code` const res = await new Promise((resolve, reject) => { request(url, (error, response, body) => { if (!error && response.statusCode == 200) { resolve(body) } else { reject(error) } }) }) const openid = JSON.parse(res).openid const access_token = JSON.parse(res).access_token const user_info_url = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}&lang=zh_CN` const user_info_res = await new Promise((resolve, reject) => { request(user_info_url, (error, response, body) => { if (!error && response.statusCode == 200) { resolve(body) } else { reject(error) } }) }) const user_info = JSON.parse(user_info_res) return { avatar: user_info.headimgurl, nickname: user_info.nickname } } ``` 4. 将获取到的用户头像昵称信息显示在页面上。 ```html <view> <image :src="avatar"></image> <text>{{nickname}}</text> </view> ``` 需要注意的是,微信登录需要在微信开放平台注册并获取到APPIDSECRET等参数,同时需要在小程序后台配置好登录授权域名。
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

wocwin

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

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

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

打赏作者

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

抵扣说明:

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

余额充值