【微信小程序独立开发 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
         }
     })
  },

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