第四章，我们来完善个人中心，主要操作是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"}}
4、完善个人中心页面
（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"> 操作指引</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）查看效果
在微信开发者工具中目前的效果如下，点击【操作指引】、【清空记录】等按钮都没有反应，这是因为我们没有添加点击事件，在后面的课程中会讲到
