思源黑体做网站,济南做网站公司,手机销售网站制作,做军事网站的项目背景图片这一节完成用户个人信息昵称的填写和获取 上节编写完成后的页面如下所示#xff1a; 首先进行用户昵称编辑功能的编写#xff0c;铲屎官昵称采用了navigator标签#xff0c;当点击昵称时会自动跳转到昵称编辑页面。
首先输入昵称编辑界面的导航栏名称
{usingCompone… 这一节完成用户个人信息昵称的填写和获取 上节编写完成后的页面如下所示 首先进行用户昵称编辑功能的编写铲屎官昵称采用了navigator标签当点击昵称时会自动跳转到昵称编辑页面。
首先输入昵称编辑界面的导航栏名称
{usingComponents: {},navigationBarTitleText: 编辑昵称
}
基本页面编写
!--pages/editNickName/editNickName.wxml--
view classedit_nickName_wrapview classedit_nickNameinput typetext value{{nickName}} placeholder请输入昵称 bindinputlimitWord//viewview classstr_count_wrapview classstr_count{{count}}/10/view/viewview classtip昵称支持输入1-10个字可输入特殊符号不可与其他用户重复。/viewview classsave_buttonbutton 保存/button/view
/view
当在个人信息页面点击昵称时跳转昵称编辑页面需要携带一个当前昵称的参数 并在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}})},
注意如果微信昵称为特殊符号如表情需要在真机调试下查看效果
