【微信小程序独立开发 3】个人资料页面编写

 这一节完成用户个人信息昵称的填写和获取

上节编写完成后的页面如下所示：

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

首先输入昵称编辑界面的导航栏名称

{   "usingComponents": {},   "navigationBarTitleText": "编辑昵称" }

基本页面编写

<!--pages/editNickName/editNickName.wxml--> <view class="edit_nickName_wrap">     <view class="edit_nickName">         <input type="text" value="{{nickName}}" placeholder="请输入昵称" bindinput="limitWord"/>     </view>     <view class="str_count_wrap">         <view class="str_count">             {{count}}/10         </view>     </view>     <view class="tip">昵称支持输入1-10个字，可输入特殊符号，不可与其他用户重复。</view>     <view class="save_button">         <button >保存</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          }      })   },

注意：如果微信昵称为特殊符号如表情，需要在真机调试下查看效果