4.1【微信小程序全栈开发课程】个人中心（一）--页面样式、用户信息展示

Love The Way You Lie 2023-06-08 04:41 32阅读 0赞

第四章，我们来完善个人中心，主要操作是src/pages/me文件夹中的me.vue文件，先看看个人中心页面的效果：  
![format_png][]

#### 1、将个人中心页面放在首页 ####

在讲解app.json文件时，提到过在pages数组中第一个页面路径是进入小程序的默认显示页面

这一章我们编辑个人中心页面，将个人中心页面路径放在pages数组中的第一个

编辑src/app.json文件，将个人中心页面路径放在第一个

"pages": [
      "pages/me/main",
      "pages/index/main"
    ]

#### 2、完善样式代码 ####

在me.vue文件标签中粘贴下面代码

.container{ 
      margin-top: 10px;
      background:#FFFFFF;
      font-size:15px; .row{ 
        padding: 0px 18px;
        border-bottom: 1px #E8E8E8 solid;
        height: 55px;
        line-height: 55px; .img { 
          float:left;
          width: 20px;
          height: 20px;
          padding-top:16px;
        }
        .name { 
          float:left;
        }
      }
      .right { 
        float: right;
        color: #C8C8C8;
        line-height:55px;
      }
      .left { 
        width:80%;
      }
    }  
    
    .top{ 
      height: 80px;
      width: 100%;
      background:#EA5149;
      padding-top: 30px;
      display: block; .userinfo{ 
        padding-bottom: 5px;
        float: left; img{ 
          width: 120rpx;
          height:120rpx;
          margin: 10rpx;
          border-radius: 1px;
          border: 1px #D0D0D0 solid;
        }
      }
      .name{ 
        padding-top: 30px;
        padding-left: 5px;
        color: #FFFFFF;
        font-size: 16px;
        float: left; .underline{ 
          border: 1px solid #ffffff;
          border-radius:5px;
          text-align:center;
        }
        .notice{ 
          color: #D8D8D8;
          font-size: 12px;
        }
        .a-line{ 
          background:#EA5149;
          border: none;
          display: inline;
          font-size: 16px;
          color: #FFFFFF;
          text-decoration:underline;
        }
      }
    }

#### 3、获取用户信息 ####

###### （1）编辑script部分 ######

在data对象中添加userinfo变量，在onShow函数中通过wx.getStorageSync获取缓存信息，并保存到userinfo变量中

###### （2）查看userinfo信息的格式 ######

在前端和后端运行`npm run dev`启动项目，打开微信开发者工具在控制台查看打印的用户信息

下面的信息中，有nickName微信昵称字段、avatarUrl头像图片字段，我们接下来会用到

userinfo.avatarUrl、userinfo.nickName就能读到这些信息：  
`用户信息userinfo： {"openId":"oQPCO4ol5Y_-yL0MnCGxwbiHbSek","nickName":"ww","gender":2,"language":"zh_CN","city":"Qingdao","province":"Shandong","country":"China","avatarUrl":"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTINSykpP0tWoQskqd45xh2IKxiaTTAN0rStI9Ude52arCwia3E0Z8qicCNSicK74ZQMYZfSKASw0Tf2ibA/132","watermark":{"timestamp":1567927324,"appid":"wx1537a4db01c83194"}}`

#### 3、完善个人中心页面 ####

###### （1）编辑template部分 ######

<template>
        <div>
          <div class="top">
            <div class="userinfo" >
              
              <img :src="userinfo.avatarUrl" alt="">
            </div>
            <div class="name">
              
              <label>{
       {userinfo.nickName}}</label>
              <p class="notice">这里将用来显示随机语句</p>
            </div>
          </div>
    
          <div class="container">
              <div class="row">
                <label class="left">
                  <img class="img" src="/static/images/homework.png">
                </label>
                <label class="name">  操作指引</label>
                <label class="right">
                  >
                </label>
              </div>
              <div class="row">
                <label class="left">
                  <img class="img" src="/static/images/classroom.png">
                </label>
                <label class="name">  小程序开发实战课程</label>
                <label class="right">
                  >
                </label>
              </div>
            </div>
    
            <div class="container">
              <div class="row">
                <label class="left">
                  <img class="img" src="/static/images/delete.png">
                </label>
                <label class="name">  清空记录</label>
                <label class="right">
                  >
                </label>
              </div>
              <div class="row">
                <label class="left">
                  <img class="img" src="/static/images/approval.png">
                </label>
                <label class="name">  意见反馈</label>
                <label class="right">
                  >
                </label>
              </div>
          </div>
        </div>
    </template>

###### （2）代码解析–冒号`:` ######

我们在读取微信头像时，会发现src前面有一个冒号`:`  
`:src="userinfo.avatarUrl"`

这个是vue的语法，冒号`:`其实是`v-bind`的缩写，本来应该写成  
`v-bind:src="userinfo.avatarUrl"`

在对象前面加冒号`:`表示等号后面的语句是变量、表达式

###### （3）查看效果 ######

在微信开发者工具中目前的效果如下，点击【操作指引】、【清空记录】等按钮都没有反应，这是因为我们没有添加点击事件，在后面的课程中会讲到  
![format_png 1][]

> **作者：猫宁一**  
> 95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！  
> 可关注【猫宁一】公众号领取我所有全栈项目代码哦~
> 
> **点击查看课程目录：**[微信小程序全栈开发课程目录][Link 1]

![format_png 2][]

[format_png]: /images/20230531/ad87003737544d169f404d16c56920ca.png
[format_png 1]: /images/20230531/99e05396845c49f49961f0048a8ef629.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 2]: /images/20230531/269a27ba2120409cb6f2d71e049efdeb.png