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

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

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

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


<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">&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)查看效果


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


image.png

目录
相关文章
|
26天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
1月前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
74 0
|
30天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
27 0
|
4月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
975 7
|
4月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
930 1
|
4月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
278 7
ly~
|
5月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
114 6
|
4月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
335 1
|
4月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
141 5
|
4月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
98 5

热门文章

最新文章