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

谁践踏了优雅 2023-06-08 06:57 32阅读 0赞

这一章，将在首页生成的记录，也就是将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样式代码到标签中 ######

.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分享函数，保证用户可以分享此页面

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

<template>
      <div>
        
        <div v-if='show_record'>
          <div class="prompt">还没有任何记录哦~</div>
        </div>
        
        <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、查看效果 ####

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

> **作者：猫宁一**  
> 全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！  
> 可关注【猫宁一】公众号领取我所有全栈项目代码哦~
> 
> **点击查看课程目录：**[微信小程序全栈开发课程目录][Link 1]

![format_png 1][]

[format_png]: /images/20230531/ee10869c4fe8417a81101679da8df682.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 1]: /images/20230531/603e0dd6aa544c51b2254bc9f0be4f97.png