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分享函数，保证用户可以分享此页面
<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、查看效果
在微信开发者工具中出现以下页面，说明添加新页面成功
