一.效果展示
二.理论
当小程序需要让用户完善个人资料时，我们可以通过微信提供的头像，昵称填写能力快速完善。
想使用微信提供的昵称填写能力，需要三步：
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);
}
希望我的文章能对你有所帮助。欢迎👍点赞 ，📝评论，🌟关注，⭐️收藏
