2022微信小程序填充昵称头像 open-type=“chooseAvatar“

2021年7月份之后，微信开始加强对微信用户个人信息的安全防控，收回了相关服务端接口。微信后面也推出了前端填写昵称头像的方法。

官方代码如下：

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}"></image>
</button> 
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})

最终页面效果：

 

 但是，这个是对小程序基础库以及微信客户端版本有要求的。

目前测试，微信小程序基础库要在2.24.7及以上版本才能同时支持昵称跟头像的填写。

而且微信客户端版本要求需要是8.0.24以上版本。

所以对应有些客户的微信版本没有及时更新，停留在8.0.24以下版本的，填充功能不能使用，需要另外兼容能够支持头像上传，于是需要获取并比较微信客户端版本号

获取微信客户端版本号：

const wxVersion = wx.getSystemInfoSync().version;

比较版本号：

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
  }

另外在做真机调试时，一直出现真机的小程序基础库跟开发工具的基础库不同步问题

 只要在工具选择好对应版本的基础库，然后推送，并且真机的微信客户端版本达到版本要求即可，真机调试器显示的基础库即使显示低版本并没有影响。