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

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

效果:

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

实现过程:

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

 

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

未完待续......

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值