{usingCompone…

首先进行用户昵称编辑功能的编写铲屎官昵称采用了navigator标签当点击昵称时会自动跳转到昵称编辑页面。

{usingComponents:

!--pages/editNickName/editNickName.wxml--

view

classstr_count{{count}}/10/view/viewview

classtip昵称支持输入1-10个字可输入特殊符号不可与其他用户重复。

/viewview

保存/button/view

当在个人信息页面点击昵称时跳转昵称编辑页面需要携带一个当前昵称的参数

并在editNickname页面进行接收当页面加载时初始化并赋值给页面参数使用count来获取当前输入框的字符个数限制输入不超过10个

给输入框编写方法监听当前输入框的字符个数并修改当前count值

limitWord(e){var

{return;}this.setData({nickName:

value,count:

pages/editNickName/editNickName.wxss

#f5f5ed;

flex-end;.str_count{margin-right:

50rpx;font-size:

在输入框的右侧添加重置按钮来提高用户体验图标采用iconfont进行导入

引入iconfont矢量图标

在小程序平台和pages同级创建文件夹styles并创建文件iconfont.wxss将生成的代码复制进去

在app.wxss中引入iconfont.wxss让其全局生效

/**app.wxss**/

使用block标签包裹重置图标当input中字符数为0时隐藏图标

为图标绑定事件

clearInput(){this.setData({count:

0,nickName:

注意因为图标采用相对定位实际位置在input层级之下如果不设置层级的话点击事件不生效设置z-index来使重置图标位于input之上

设置获取微信用户昵称在输入法中

https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0,nickName:

铲屎官,userId:

sendNickName(){app.globalData.userInfo.nickName

this.data.nickName;wx.navigateTo({url:

修改userInfo.js文件

生命周期函数--监听页面加载*/onLoad(options)

{nickName:

app.globalData.userInfo.nickName,avatarUrl:

app.globalData.userInfo.avatarUrl,userId:

app.globalData.userInfo.userId}})},