项目技术堆栈

微信原生小程序+云端开发。云端开发能力里我主要用到小程序SDK。简单来说就是在微信里直接操作数据库就可以了。

前言

云端竞猜活动小程序v2.0的源代码地址，以及手把手教你如何搭建竞猜活动小程序v1.0的系列文章目录，均在文章底部【云端竞猜活动小程序v2.0终于在十一月的最后一天完成了】。

在制作这个问答活动小程序的时候，有这样的场景，就是当答题者答完题后，想查看自己的答题记录和历史成绩，该怎么办呢？我们可以在首页增加一个按钮，通过页面路由功能跳转到答题记录页面。

接下来我们开始构建答题记录页面，编写排版样式，获取数据。

实现过程

1.首先需要编写前端页面

其实在原生小程序中，页面布局主要使用view和text标签，样式通过css实现，但是文件后缀分别是.wxml和.wxss，这是为什么呢？

class="mw-page">   <view class="cu-list menu mw-menu">     <view class="cu-item arrow" wx:for="{{historyList}}" wx:key="index">       <view class='content'>         <text class='text-black'>消防安全知识答题text>       view>       <view class='action'>         <text class='text-grey text-sm'>{{item.date}}text>       view>     view>   view> view>

2.从答案记录表中查询数据

上一篇文章我们已经讲过如何创建数据表来存储答案记录，这里就不再赘述了，我们主要看如何连接云端数据库，如何获取答案记录集合的引用，以及如何发起获取答案记录集合的请求，这里就不一一解释了，上一篇文章已经有详细的讲解了。

activityRecord .where({ _openid: _.exists(true) }) .orderBy('createDate', 'desc') .get() .then(res => { console.log('[云数据库] [答题记录] 查询成功') console.log(res.data) })

3.更新数据到页面显示

通过调用官方方法就可以实现。

let historyList = []; data.forEach(item => { item.date = this.formatTime(item.createDate) historyList.push(item) }) // 将数据从逻辑层发送到视图层 this.setData({ historyList });

可以看到，在更新视图之前，也就是拿到数据之后，我对数据进行了处理，遍历了数据，并且用工具对字段的日期进行了格式化。

取得成果

你可以在真实设备上预览，或者将代码上传到服务器，设置为试用版，然后查看实现效果。

概括

这里我先给大家介绍一下小程序页面的布局和样式，其实挺简单的，然后我们会读取答题记录，并以列表的形式展示在页面上，下一篇会重点讲解如何查询历史成绩。