在微信小程序实际开发中，获取用户的昵称和头像是一项常见功能，但因为微信小程序的api依赖于不同基础库，所以导致这一需求需要用不同方法来解决。

最早都是用的wx.getUserInfo这个api来获取获取用户信息，但从2021年4月28日24时后发布的小程序新版本将无法再获取用户个人信息（头像、昵称、性别与地区），至于为什么这样改版，官方是这样解释得：很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗，如果用户点击拒绝，无法使用小程序，这种做法打断了用户正常使用小程序的流程，同时也不利于小程序获取新用户。

看下最早的实现方法代码示例，是这样的

  wx.getSetting({
        success(res) {
            if (res.authSetting['scope.userInfo']) {
                // 已经授权，可以直接调用 getUserInfo 获取头像昵称
                wx.getUserInfo({
                    success: function (res) {
                        console.log('用户信息', res.userInfo)
                        That.setData({
                            avatarUrl: res.userInfo.avatarUrl,
                            nickName: res.userInfo.nickName
                        })
                    }
                })
            }
        }
    })

但现在回调重返回的userInfo中 nickName一直为微信用户，avatarUrl一直为默认头像 见下图

最新方法，应用微信小程序 提供得 开放能力 头像昵称填写功能

重点就是

open-type="chooseAvatar" 获取头像

type="nickname" 获取昵称

需要注意的是 必须依靠点击操作动作才能触发

完整实现代码

// wxml
<view data-weui-theme="{{theme}}">
  <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
    <image class="avatar" src="{{avatarUrl}}"></image>
  </button> 
  <mp-form>
    <mp-cells>
      <mp-cell title="昵称">
        <input bindinput="bindKeyInput" value="{{nickName}}" type="nickname" class="weui-input" placeholder="请输入昵称"/>
      </mp-cell>
    </mp-cells>
  </mp-form>
</view>

// js
const app = getApp()
Page({
    data: {
        avatarUrl: '',
        nickName: ''
    },
    onLoad() {
        let That = this
        wx.getSetting({
            success(res) {
                if (res.authSetting['scope.userInfo']) {
                    // 已经授权，可以直接调用 getUserInfo 获取头像昵称
                    wx.getUserInfo({
                        success: function (res) {
                            console.log('用户信息', res.userInfo)
                            That.setData({
                                avatarUrl: res.userInfo.avatarUrl,
                                nickName: res.userInfo.nickName
                            })
                        }
                    })
                }
            }
        })
    },
    onChooseAvatar(e) {
        const {
            avatarUrl
        } = e.detail
        this.setData({
            avatarUrl,
        })
    },
    bindKeyInput(e){
        this.setData({
            nickName: e.detail.value
        })
    }
})

//json
{
  "usingComponents": {
    "mp-form-page": "weui-miniprogram/form-page/form-page",
    "mp-form": "weui-miniprogram/form/form",
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell"
  },
  "pageOrientation": "auto"
}
// wxss
.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.avatar {
  display: block;
  width: 56px;
  height: 56px;
}

.container {
  display: flex;
}

开发中遇到的问题

测试时，部分苹果设备 获取昵称时拿不到值

解决方案： 利用 blur 事件

<input 
bindinput="bindKeyInput" 
bindblur="bindKeyBlur"
value="{{nickName}}" 
type="nickname" 
class="weui-input" 
 placeholder="请输入昵称"/>

版本兼容性问题

因为头像昵称填写能力 基础库在2.21.2以上的版本才支持 为了严谨 要加入版本判断 解决版本不同的问题

判断当前版本方法

关键api wx.getSystemInfoSync().SDKVersion

const version = wx.getSystemInfoSync().SDKVersion;
<!--新版本-->
isNewVersion() {
  const version = wx.getSystemInfoSync().SDKVersion;
  if (this.compareVersion(version, "2.21.2") >= 0) {
    return true;
  }
  return false;
}
compareVersion(v1, v2) {
  v1 = v1.split(".");
  v2 = v2.split(".");
  const len = Math.max(v1.length, v2.length);

  while (v1.length < len) {
    v1.push("0");
  }
  while (v2.length < len) {
    v2.push("0");
  }

  for (let i = 0; i < len; i++) {
    const num1 = parseInt(v1[i]);
    const num2 = parseInt(v2[i]);

    if (num1 > num2) {
      return 1;
    } else if (num1 < num2) {
      return -1;
    }
  }
  return 0;
}

本文转自 https://juejin.cn/post/7374677514536353819，如有侵权，请联系删除。