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
  }

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

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

UniApp 是一套基于 Vue.js 的跨平台框架,用于快速开发微信小程序、H5、支付宝小程序以及更多。下面是一个简单的 UniApp 项目中,利用 `open-type=chooseAvatar` 属性来让用户选择头像的基本代码示例: ```html <!-- uni-app 页面模板 --> <template> <view class="container"> <button @click="handleChooseAvatar">选择头像</button> <image :src="selectedAvatar" :mode="isShowAvatar ? 'scaleToFill' : 'noBorder'" /> </view> </template> <script> export default { data() { return { selectedAvatar: '', isShowAvatar: false, }; }, methods: { handleChooseAvatar() { this.$api.openSetting({ success(res) { if (res.authSetting['scope.userInfo']) { this.getUserInfo(); } else { // 如果用户未授权,可以引导用户去设置中心开启权限 console.log('用户未授权'); } } }); }, getUserInfo() { uni.getUserInfo({ openType: 'getAvatar', // 这里是关键部分,注意是 getAvatar 而不是 chooseAvatar avatarField: ['head肖像'], success(res) { const avatarUrl = res.tempAvatar; this.selectedAvatar = avatarUrl; // 更新头像 URL this.isShowAvatar = true; // 显示已选头像 }, fail(err) { console.error('获取用户信息失败', err); } }); } } }; </script> <style scoped> .container { display: flex; justify-content: space-between; } </style> ``` 在这个例子中,`getUserInfo` 方法负责调用微信小程序的用户信息接口,并指定需要头像 (`openType: 'getAvatar'`)。请注意,微信小程序的实际API可能会有所不同,此代码仅供参考。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值