这一节完成用户个人信息昵称的填写和获取
上节编写完成后的页面如下所示：
首先进行用户昵称编辑功能的编写，铲屎官昵称采用了navigator标签，当点击昵称时会自动跳转到昵称编辑页面。
首先输入昵称编辑界面的导航栏名称
{
"usingComponents": {},
"navigationBarTitleText": "编辑昵称"
}
基本页面编写
{{count}}/10
当在个人信息页面点击昵称时，跳转昵称编辑页面需要携带一个当前昵称的参数
并在editNickname页面进行接收，当页面加载时初始化并赋值给页面参数，使用count来获取当前输入框的字符个数，限制输入不超过10个
给输入框编写方法监听当前输入框的字符个数，并修改当前count值
limitWord(e){
var value = e.detail.value;
var wordLength = parseInt(value.length); //解析字符串长度转换成整数。
if (10 < wordLength) {
return;
}
this.setData({
nickName: value,
count: wordLength
});
},
编写less样式
/* pages/editNickName/editNickName.wxss */
page{
background-color: #f5f5ed;
}
.edit_nickName_wrap{
height: 100vh;
.edit_nickName{
height: 120rpx;
input{
font-size: 24rpx;
padding-left: 20rpx;
margin: 50rpx 50rpx 0rpx 50rpx;
border-radius: 20rpx;
height: 100rpx;
background-color: #fff;
}
}
.str_count_wrap{
display: flex;
justify-content: flex-end;
.str_count{
margin-right: 50rpx;
font-size: 24rpx;
color: #666;
}
}
.tip{
margin: 20rpx 50rpx 20rpx 50rpx;
font-size: 24rpx;
color: #666;
}
.save_button{
position: relative;
button{
position: fixed;
left: 0;
right: 0;
bottom: 120rpx;
font-weight: 500;
font-size: 28rpx;
width: 260rpx;
border-radius: 30rpx;
background-color: #fee05a;
}
}
}
此时的页面样式如下：
在输入框的右侧添加重置按钮来提高用户体验，图标采用iconfont进行导入
引入iconfont矢量图标
iconfont-阿里巴巴矢量图标库
在小程序平台和pages同级创建文件夹styles，并创建文件iconfont.wxss，将生成的代码复制进去
在app.wxss中引入iconfont.wxss让其全局生效
/**app.wxss**/
@import "./styles/iconfont.wxss"
使用时class选择器需要选取两个类名选择器，后面为所需的图标
此时页面样式为：
使用block标签包裹重置图标，当input中字符数为0时隐藏图标
为图标绑定事件
clearInput(){
this.setData({
count: 0,
nickName: ''
})
},
注意：因为图标采用相对定位，实际位置在input层级之下，如果不设置层级的话点击事件不生效，设置z-index来使重置图标位于input之上
设置获取微信用户昵称在输入法中
将昵称保存在全局变量中，在app.js定义全局变量
// app.js
App({
onLaunch() {
},
globalData: {
userInfo: {
avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
nickName: '铲屎官',
userId: '001'
}
}
})
为保存按钮绑定方法
sendNickName(){
app.globalData.userInfo.nickName = this.data.nickName;
wx.navigateTo({
url: '/pages/userInfo/userInfo',
})
},
修改userInfo.js文件
// pages/userInfo/userInfo.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
userInfo: {
nickName: '',
avatarUrl: '',
userId: ''
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.setData({
userInfo: {
nickName: app.globalData.userInfo.nickName,
avatarUrl: app.globalData.userInfo.avatarUrl,
userId: app.globalData.userInfo.userId
}
})
},
注意：如果微信昵称为特殊符号如表情，需要在真机调试下查看效果
推荐阅读
您阅读本篇文章共花了：
发表评论