我的项目技术栈
微信原生小程序+云开发。我这里次要应用了云开发能力中的小程序端SDK，说白了就是在javascript中就能间接操作数据库。
本篇前言
基于云开发的答题流动小程序v2.0的源码地址，以及手把手教你搭建答题流动小程序v1.0系列文章目录，均在【基于云开发的答题流动小程序v2.0，终于赶在11月最初一天实现了】这篇文章的底部。
在做这个答题流动小程序的时候，有这么一个场景，就是当答题者答完题，想查看本人的答题记录以及历史问题的时候，这个怎么办呢？咱们能够在首页减少一个按钮，通过页面路由性能，实现跳转至答题记录页面。
接下来，就要开始搭建答题记录页面了，写布局款式和获取数据。
实现过程
1、首先须要写好前端页面
其实在原生小程序中，页面布局次要应用view和text两个标签，款式就是css实现。只不过文件命名的后缀名别离是.wxml和.wxss，至于为什么呢。
<view 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、将数据更新到页面展现
这个能够调用官网提供的setData办法实现。
let historyList = [];data.forEach(item => { item.date = this.formatTime(item.createDate) historyList.push(item)})// 将数据从逻辑层发送到视图层this.setData({ historyList});大家能够看到，在更新视图之前，也就是在获取到数据之后，我这里对数据做了一个解决。遍历数据，应用工具formatTime对createDate字段做了日期格式化的解决。
实现后果
能够真机预览，也能够把代码上传至服务器，设置为体验版，而后看看实现成果。
本篇小结
这里有带大家重温了一下，小程序页面的布局与款式，其实相当简略的。而后就是读取答题记录，并以列表的模式展现在页面上。下一篇重点讲讲如何查问历史问题。