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

在本章中，我们编辑个人中心页面并将个人中心页面路径作为数组中的第一个

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

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

2、改进样式代码

将以下代码粘贴到 me.vue 文件标签中

.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: 50%; border: 1px #D0D0D0 solid; } } .name{ padding-top: 30px; padding-left: 5px; color: #FFFFFF; font-size: 16px; float: left; .notice{ color: #D8D8D8; font-size: 12px; .number{ font-size: 15px; color: #FFFFFF; font-weight: bold; } } .a-line{ background:#EA5149; border: none; display: inline; font-size: 16px; color: #FFFFFF; text-decoration:underline; } } } .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%; } }

3、获取用户信息（1）编辑部分

给数据对象添加一个变量，通过wx获取缓存信息。在函数中，并将其保存到变量中

<script> export default { data () { return { // 用户信息 userinfo: {} } }, onShow () { const userinfo = wx.getStorageSync('userinfo') if(userinfo.openId){ this.userinfo = userinfo } }, } </script>

(2）查看消息格式

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

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

.,. 可以阅读此信息：

用户信息：{"":"-","":"ww","":2,"":"","city":"","":"","":"","" :"////132","":{"":,"":""}}

3、完善个人中心页面（1）编辑部分

<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="."

这是vue的语法，冒号：其实是v-bind的缩写微信小程序开发页面按钮没反应，应该写成

v-bind:src="."

对象前面加冒号：等号后面的语句是变量，是表达式

(3）查看效果

目前微信开发者工具中的效果如下。点击【操作指南】、【清除记录】等按钮无反应。这是因为我们没有添加点击事件，这将在后面的课程中讨论。