【微信小程序知识点】获取微信昵称

一.效果展示

二.理论

当小程序需要让用户完善个人资料时,我们可以通过微信提供的头像,昵称填写能力快速完善。

想使用微信提供的昵称填写能力,需要三步:

1.通过form组件中包裹住Input以及from-type为submit的button组件

2.需要将input组件type的值设置为nickname,当用户输入框输入时,键盘上方会显示微信昵称

3.给from绑定submit事件,在事件处理函数中通过事件对象获取用户昵称

简单来说,给input设置type="nickname",它的工作是为了让用户点击输入框时,下放会弹出获取昵称的面板,和点击"获取昵称"后,将昵称放到输入框中。设置name="nickname",是为了让用户点击"点击获取昵称"时,由form绑定的回调函数的参数e,有值且是微信昵称的信息。当点击按钮时,onSubmit会执行。用于后续给服务器传值。

三.代码

(1)index.wxml

复制代码
<!-- 需要使用form组件包裹住input以及button组件 -->
<form bindsubmit="onSubmit">
  <!-- input输入框组件的type属性设置为nickname,用户点击输入框,键盘上方才会显示微信昵称 -->
  <!-- 如果添加了name属性,form组件就会自动收集带有name属性的表单元素的值 -->
  <input type="nickname"  name="nickname" placeholder="请输入昵称"/>
  <!-- 如果将form-type = "submit",就会将按钮变为提交按钮 -->
  <!-- 在点击提交按钮时候,会触发表单的bindsubmit提交事件 -->
  <button type="primary" plain form-type="submit">点击获取昵称</button>
</form>

(2)index.wxss

复制代码
input {
  border: 1px solid #179c16;
  margin: 20rpx;
  height: 60rpx;
  border-radius: 20rpx;
  padding-left: 20rpx;
}

(3)index.js

复制代码
 //获取事件昵称
  onSubmit(e) {
    const { nickname } = e.detail.value;
    console.log(nickname);
  }

希望我的文章能对你有所帮助。欢迎👍点赞 ,📝评论,🌟关注,⭐️收藏

相关推荐
paopaokaka_luck19 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
老虎06276 小时前
JavaWeb(苍穹外卖)--学习笔记13(微信小程序开发,缓存菜品,Spring Cache)
笔记·学习·微信小程序
郭邯11 小时前
小程序中自定义组件的样式隔离
微信小程序
每天开心13 小时前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
老华带你飞19 小时前
口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·口腔小程序
尸僵打怪兽19 小时前
HBuilder X打包发布微信小程序
微信小程序·小程序·打包·hbuilder x
说私域1 天前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往1 天前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw1 天前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
weixin_lynhgworld1 天前
淘宝扭蛋机小程序系统开发:重塑电商互动模式
大数据·小程序