关于微信小程序用户头像昵称获取规则调整后的头像昵称获取方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了关于微信小程序用户头像昵称获取规则调整后的头像昵称获取方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、背景

小程序用户头像昵称获取规则调整公告：小程序用户头像昵称获取规则调整公告 | 微信开放社区

文章来源地址https://www.toymoban.com/news/detail-743953.html

二、案例

1、点击登录按钮

点击登录按钮，先去检查用户授权信息，会弹出用户授权弹窗（首次），用户点击同意授权之后，调用 wx.login 方法获取登录凭证（code），把code传给后端写的登录接口进行解析登录，这时候用户的头像和昵称可以根据具体项目的需求自己传一个默认的头像图片和昵称给后端登录接口进行初始化。

<view class="page-container">

  <view class="login-btn" bindtap="checkScope">授权用户信息</view>
  <view class="tip">若您没有账号，登录后会自动创建</view>

</view>

// 检查授权信息
checkScope() {
    // 获取授权设置信息
    wx.getSetting({
      success: (res) => {
        console.log(res)

        // 判断用户信息是否有授权
        if (!res.authSetting['scope.userInfo']) {
          // 获取授权
          wx.authorize({
            scope: 'scope.userInfo',
            success: (e) => {
              console.log('authorize: ', e)

              // 调用你们后端写的登录接口
              this.login()
            },
            fail: (err) => {
              console.log('authorize-err: ', err)
            }
          })
        } else {
          console.log('已授权')
          // 调用你们后端写的登录接口
          this.login()
        }
      },
      fail: (err)=> {
        console.log(err)
      }
    })
}

  // 登录
  login() {

    let _this = this;

    // 获取微信登录的code
    wx.login({
      success (e) {
        if (e.code) {

          // 请求后端写的登录逻辑接口
          // ......

        } else {
          wx.showToast({
            title: '登录失败！' + e.errMsg,
            icon: 'none',
            duration: 2000
          })
          console.log('登录失败！' + e.errMsg)
        }
      }
    })
    
  },

2、设置头像和昵称为微信账号的头像和昵称

button组件的 open-type 设置为 chooseAvatar，点击之后可以从bindchooseavatar回调中获取到用户头像信息。

input组件的 type 设置为 nickname，点击之后会出现昵称输入键盘，直接获取到昵称填写进去。

之后我们就可以把获取到的微信头像和昵称通过后端接口保存到用户信息里。

<view class="page-container">

  <view class="li">
    <text class="left">头像</text>
    <view class="right">
      <button
        class="box"
        open-type="chooseAvatar"
        bindchooseavatar="onChooseAvatar">
        <image class="avatar" src="{{avatarUrl}}"/>
      </button>
      
    </view>
  </view>

  <view class="li">
    <text class="left">昵称</text>
    <view class="right">
      <input type="nickname" value="{{userName}}" class="weui-input" placeholder="请输入昵称" bindinput="bindinput"/>
    </view>
  </view>

  <view class="submit-btn" bindtap="updateUserInfo">确定</view>

</view>

  // 获取微信昵称
  bindinput(e: any) {
    console.log('bindinput', e)
    this.setUserName(e.detail.value)
  },

  // 获取微信头像
  onChooseAvatar(e:any) {
    console.log(e)
    const { avatarUrl } = e.detail;

    // 把获取到的微信头像的图像文件上传到后端
    this.uploadImg(avatarUrl)
  },

到了这里，关于关于微信小程序用户头像昵称获取规则调整后的头像昵称获取方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！