一、输入框中获取用户头像
效果:
实现效果便是,用户点击输入框的时候,输入昵称的同时可以让用户自主选择微信昵称。用户选择完成之后,昵称便会赋值到输入框中
实现过程:
1.编辑器设置
在此之前,我们要先将基础库版本选择到最新版本,这里不用担心兼容问题.较低版本的用户可能会没有此功能,但是也不会影响正常使用,他依然是一个普通的输入框。并且绝大部分用户都是可以使用这个功能的
2.基础功能
wxml 构建一个input输入框,原生或者组件的都行,给其 type 属性‘nickname’的值
<!-- 小程序原生input -->
<!-- <input type="nickname" placeholder="请输入用户名"></input> -->
<!-- vant组件 -->
<van-field placeholder="请输入用户名" label="用户名" type="nickname" />
非常简单,这里基本功能已经实现了,点击输入框,下面便会弹出用户昵称的选择
3.回调函数获取用户输入内容
给组件添加一个 监听失焦 事件,回调函数中的事件对象中便可获得用户的输入内容
<!-- 小程序原生input -->
<!-- <input type="nickname" bindblur="pickNickName" placeholder="请输入用户名"></input> -->
<!-- vant组件 -->
<van-field placeholder="请输入用户名" label="用户名" type="nickname" bindblur="pickNickName" />
pickNickName(ev) {
console.log(ev);
},
注意!!!🔔🔔🔔 :此功能(输入框中获取用户头像)中模拟器有点小bug,第一次在回调函数中获取到的value可能为0,第二次获取没有问题。这个bug不存在于真机,可以放心使用
二、输入框中获取用户头像
效果:
1.编辑器设置
将编辑器的基础库版本更新到2.21.2及以上
2.基础功能
wxml中新建一个button组件,组件库或者原生的都行,并给其添加一个open-type属性,属性值为:'chooseAvatar'
<!-- 小程序原生button -->
<button open-type="chooseAvatar"></button>
<!-- vant组件 -->
<button open-type="chooseAvatar" slot="input" size="mini" class="avatar-button">
<image src="" mode="aspectFill" class="avatar-img" />
</button>
非常简单,这里基本功能已经实现了,点击按钮,下面便会弹出用户头像的选择和从相册选择和拍照
3.回调函数获取用户选择的头像
给组件添加一个 'bindchooseavatar' 事件,回调函数中的事件对象中便可获得用户选择的头像
<!-- 小程序原生button -->
<button open-type="chooseAvatar" bindchooseavatar='pickUserAvatar'></button>
<!-- vant组件 -->
<button open-type="chooseAvatar" slot="input" size="mini" class="avatar-button" bindchooseavatar='pickUserAvatar'>
<image src="" mode="aspectFill" class="avatar-img" />
</button>
pickUserAvatar(ev) {
console.log(ev);
},
注意!!!🔔🔔🔔 :此功能(输入框中获取用户头像)对低版本不兼容,谨慎使用。
未完待续......