6-1【微信小程序全栈开发课程】记录页面（一）--添加记录页面

这一章，将在首页生成的记录，也就是将records数据表中的数据显示出来

1、创建记录页面文件夹

（1）在src/pages文件夹下面新建一个命名为record的文件夹，并且在文件夹下创建record.vue、main.js两个文件

（2）修改src/pages/record/main.js文件

main.js是入口文件，通过main.js来加载record.vue文件。每个页面文件夹中都要有main.js文件

import Vue from 'vue'
import App from './record'

const app = new Vue(App)
app.$mount()

（3）修改record.vue文件

在style标签中加入了scoped，意思是样式仅在此页面有效，不影响其他页面

<template>
  <div>
    记录
  </div>
</template>

<script>
export default {
}
</script>

<style lang='scss' scoped>
</style>

2、修改app.json文件

（1）在pages数组中添加上record页面的路径

"pages": [
  "pages/index/main",
  "pages/me/main",
  "pages/instruction/main",
  "pages/opinion/main",
  "pages/record/main"
],

（2）添加TabBar

在TabBar中，将记录页面插入到「首页」、「我的」这两个页面的中间

"tabBar": {
  "selectedColor":  "#EA5149",
  "list": [{
    "text": "首页",
    "pagePath": "pages/index/main",
    "iconPath": "static/images/danhuang.png",
    "selectedIconPath": "static/images/danhuang-active.png"
  },
  {
    "text":"记录",
    "pagePath":"pages/record/main",
    "iconPath": "static/images/huasheng.png",
    "selectedIconPath": "static/images/huasheng-active.png"
  },
  {
    "text": "我的",
    "pagePath": "pages/me/main",
    "iconPath": "static/images/binggan.png",
    "selectedIconPath": "static/images/binggan-active.png"
  }]
}

3、重启项目

如果目前项目在启动状态要先停止项目（ctrl+c）,再重新启动，不然新页面显示不出来。

//在项目目录中运行
~/WeChatProjects/truth_hold$ npm run dev

4、完善记录页面样式

（1）添加css样式代码到<style></style>标签中

.add{
    margin-top: 20px;
    margin-bottom: 10px;
    text-align:center;
  p{
      font-size: 15px;
  }
}
.th {
  width: 100%;
  height: 30px;
  line-height:30px;
  background: #EA5149;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: bold;
  display: flex;
}
.prompt{
  margin-top: 50px;
  margin-bottom: 30px;
  font-size: 14px;
  color: #888888;
  text-align: center;
}
.date{
  width: 23%;
  padding-left: 60px;
}
.busi{
  width: 10%;
  margin-left: 5px;
}
.mark{
    width: 20%;
  margin-left: 10px;
}
.net{
  width: 20%;
  margin-left: 20px;
}
.text-footer{
  text-align: center;
  font-size: 12px;
  margin-bottom:5px;
  padding-top: 5px;
}

（2）完善script部分

添加两个data变量：show_record和userinfo。show_record用来控制显示当前是否有记录、userinfo用户信息

添加onShow小程序生命周期函数，用来获取用户信息

添加onShareAppMessage分享函数，保证用户可以分享此页面

<script>
export default {
  data () {
    return {
      show_record:false,
      userinfo:{},
    }
  },

  onShow () {
    const userinfo = wx.getStorageSync('userinfo')
    //如果缓存中有userinfo的信息，说明用户登录了。
    if(userinfo.openId){
      //将用户信息储存到data的userinfo字段里面，this.userinfo就是指的这个字段。
      this.userinfo = userinfo
    }
  },

  onShareAppMessage(e) {
    return {
      title: "真自律",
      path: "/pages/index/main",
      imageUrl: ""
    }
  }
}
</script>

（3）完善template部分，添加html页面代码

<template>
  <div>
    <!-- 如果在数据库没有查询到记录，show_record为false，提示当前没有记录 -->
    <div v-if='show_record'>
      <div class="prompt">还没有任何记录哦~</div>
    </div>
    <!-- 如果在数据库查询到该用户的记录，show_record默认为true，显示记录表格 -->
    <div v-else>
      <div class="table th">
        <div class="date">时间</div>
        <div class="busi">分数</div>
        <div class="mark">最后得分</div>
        <div class="net">备注</div>
      </div>
    </div>
  </div>
</template>

5、查看效果

在微信开发者工具中出现以下页面，说明添加新页面成功

作者：猫宁一
全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~
可到【猫宁一】公众号回复【源码】领取我所有全栈项目代码哦~

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