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

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

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变量中

<script>
  export default {
    data () {
      return {
        // 用户信息
        userinfo: {}
      }
    },

    onShow () {
      const userinfo = wx.getStorageSync('userinfo')
      if(userinfo.openId){
        this.userinfo = userinfo
      }
    },
  }
</script>
(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" >
          <!-- 取userinfo变量中的avatarUrl字段,也就是微信头像的链接 -->
          <img :src="userinfo.avatarUrl" alt="">
        </div>
        <div class="name">
          <!-- 取userinfo变量中的nickName字段,也就是微信昵称 -->
          <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">&nbsp;&nbsp;操作指引</label>
            <label class="right">
              >
            </label>
          </div>
          <div class="row">
            <label class="left">
              <img class="img" src="/static/images/classroom.png">
            </label>
            <label class="name">&nbsp;&nbsp;小程序开发实战课程</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">&nbsp;&nbsp;清空记录</label>
            <label class="right">
              >
            </label>
          </div>
          <div class="row">
            <label class="left">
              <img class="img" src="/static/images/approval.png">
            </label>
            <label class="name">&nbsp;&nbsp;意见反馈</label>
            <label class="right">
              >
            </label>
          </div>
      </div>
    </div>
</template>
(2)代码解析–冒号:

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

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

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

(3)查看效果

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

作者:猫宁一
95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习!热爱编程!
可关注【猫宁一】公众号领取我所有全栈项目代码哦~

点击查看课程目录:微信小程序全栈开发课程目录

  • 3
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

喵宁一

点赞是最好的赞赏~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值