【微信小程序】输入框中获取用户信息(已更新：昵称，头像)

一、输入框中获取用户头像

效果：

 实现效果便是，用户点击输入框的时候，输入昵称的同时可以让用户自主选择微信昵称。用户选择完成之后，昵称便会赋值到输入框中

实现过程：

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不存在于真机，可以放心使用

二、输入框中获取用户头像

效果：

官方文档：button | 微信开放文档 (qq.com)

 

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);
  },

 

 注意！！！🔔🔔🔔 ：此功能(输入框中获取用户头像)对低版本不兼容，谨慎使用。

未完待续......