微信小程序用户头像昵称获取规则

学习了一下写小程序，随手记录一下，就当提醒自己不要半途而废。

2022年10月底起，基础库2.27.1以上版本的小程序已无法直接通过授权获取用户的头像和昵称。b站的很多教程使用的仍是wx.getUserInfo或wx.getUserProfile接口授权获取用户信息，和新规则相较之下感觉还是有不小差别的，尤其是对于刚接触小程序的人来说。

用户信息无法再统一授权获取自动补充，而是需要引导用户手动进行填写。在填写时，用户可以选择使用微信头像和用户名快速填充。

如图，图源官方公告。

代码如下：

wxml：

<!-- 头像 -->
<image class="images" src="{{avatar}}" />
<!-- 获取用户信息：按钮获取 -->
<button bind:chooseavatar='getUserAvatar' open-type="chooseAvatar">获取用户信息</button>

js：

​Page({
  data: {
    // 用户默认头像
    avatar: '/ststic/0130.png'
  },
  // 获取到用户修改的头像并更改默认头像
  getUserAvatar(result){
    // const定义变量时的{}，涉及到ES6中变量的解构赋值，等价于const avatarUrl = result.detail.avatarUrl;
    const { avatarUrl } = result.detail;
    this.setData({
      avatar: avatarUrl
    })
  }
})

效果如图：

参考官方：

微信小程序开发文档 - 开放能力 / 用户信息 / 获取头像昵称