微信小程序获取头像open-type=“chooseAvatar“ bind:chooseavatar方法

在这里插入图片描述
微信一直对获取头像和昵称一直很执着。抛弃了3个

open-type=“getUserInfo” 在2021年4月13日停用
wx.getUserInfo 在2021年4月28日停用
wx.getUserProfile 在2022年11月8日停用

现在用 open-type=“chooseAvatar”

  • 要求版本 2.24.4以上
  • 头像与昵称是分开
  • 获取到头像路径是临时的

使用方法
wxml

<!--获取头像-->
<button open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"></button> 
<!--获取昵称-->
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>

js

onChooseAvatar(e) {
    console.log(e.detail.avatarUrl)
  }

头像选择
在这里插入图片描述
昵称也是一样,用户点击,在键盘选择昵称,或可以自己输入

总结:

个人建议你们放弃微信头像。理由:

  • 1、首先用户多一个选择操作,体验不佳
  • 2、获取到头像路径是临时路径,开发者需要把整个图片存放在自己服务器上,不然下次又要选择一次
  • 3、由于头像客户可以随意选择,所以没有好的识别作用

最后问大家一个问题,我们获取微信头像目的是什么?用户都可以随意选择自己其它图片做为头像,完全没有社交功能,所以最后还是推荐大家以后不用考虑头像问题了

微信小程序实际上并不直接支持 Vue.js 中的 `v-bind` 指令以及其特定属性绑定语法,例如 `$attrs` 的使用。这是因为微信小程序基于原生的 JavaScript 和 WXML/WXS (一种类似于 XML 的模板语言) 来构建组件,并提供了一套自有的特性集。 在 Vue.js 中,`$attrs` 属性用于获取除 `props` 定义之外的所有属性,这对于处理动态传入的元素属性非常有用。然而,在微信小程序中,开发者通常需要通过其他方式进行类似的功能实现: ### 1. **使用自定义事件** 对于动态传递的属性,开发者可以考虑利用事件机制来接收并处理外部传递的数据。比如,可以在父组件向子组件传递数据时触发一个事件,然后子组件监听该事件并在事件处理器中接收所需的数据。 ```javascript // 父组件中 onDataTransfer(data) { // 使用 data 参数处理数据 } <view class="child-component"> <button @click="handleClick">点击传输数据</button> </view> <script> export default { methods: { handleClick() { this.$emit('data-transfer', { key: 'value' }); }, }, }; </script> ``` ### 2. **使用函数式组件** 微信小程序提供了一些函数式组件的特性,如使用回调函数、事件处理等方式,间接地达到动态绑定效果。开发者可以通过这种方式接收来自外部的属性值。 ### 3. **使用局部数据存储** 对于某些简单的属性,也可以通过组件自身的数据状态来管理,而不是依赖全局的 `$attrs` 对象。这样可以避免过多依赖外部传递的数据而影响组件的复用性和解耦性。 ### 相关问题: 1. 是否有替代方案可以让微信小程序的组件接受动态属性而不修改核心框架? 2. 如何在微信小程序中有效地处理动态传入的样式属性? 3. 在实际项目中如何优化使用动态属性的性能和维护性?
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值