4.1【微信小程序全栈开发课程】个人中心（一） |
您所在的位置：网站首页 › 微信个人中心页面在哪里 › 4.1【微信小程序全栈开发课程】个人中心（一） |
4.1【微信小程序全栈开发课程】个人中心（一）
|
第四章，我们来完善个人中心，主要操作是src/pages/me文件夹中的me.vue文件，先看看个人中心页面的效果： 在讲解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变量中 export default { data () { return { // 用户信息 userinfo: {} } }, onShow () { const userinfo = wx.getStorageSync('userinfo') if(userinfo.openId){ this.userinfo = 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部分 {{userinfo.nickName}} 这里将用来显示随机语句 ;;操作指引 > ;;小程序开发实战课程 > ;;清空记录 > ;;意见反馈 > （2）代码解析–冒号:我们在读取微信头像时，会发现src前面有一个冒号: :src="userinfo.avatarUrl" 这个是vue的语法，冒号:其实是v-bind的缩写，本来应该写成 v-bind:src="userinfo.avatarUrl" 在对象前面加冒号:表示等号后面的语句是变量、表达式 （3）查看效果在微信开发者工具中目前的效果如下，点击【操作指引】、【清空记录】等按钮都没有反应，这是因为我们没有添加点击事件，在后面的课程中会讲到 作者：猫宁一 95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！ 可关注【猫宁一】公众号领取我所有全栈项目代码哦~ 点击查看课程目录：微信小程序全栈开发课程目录 |
【本文地址】
今日新闻 |
推荐新闻 |