项目技术栈

微信原生小程序+云开发。我这里主要使用了云开发能力中的小程序端SDK,说白了就是在javascript中就能直接操作数据库。


本篇前言

基于云开发的答题活动小程序v2.0的源码地址,以及手把手教你搭建答题活动小程序v1.0系列文章目录,均在【​​​​基于云开发的答题活动小程序v2.0,终于赶在11月最后一天完成了​​】这篇文章的底部。


在做这个答题活动小程序的时候,有这么一个场景,就是当答题者答完题,想查看自己的答题记录以及历史成绩的时候,这个怎么办呢?我们可以在首页增加一个按钮,通过页面路由功能,实现跳转至答题记录页面。

#私藏项目实操分享#基于云开发的答题活动小程序v2.0-答题记录页_前端页面

接下来,就要开始搭建答题记录页面了,写布局样式和获取数据。


实现过程

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字段做了日期格式化的处理。

#私藏项目实操分享#基于云开发的答题活动小程序v2.0-答题记录页_页面布局_02


实现结果

可以真机预览,也可以把代码上传至服务器,设置为体验版,然后看看实现效果。

#私藏项目实操分享#基于云开发的答题活动小程序v2.0-答题记录页_微信小程序_03



本篇小结

这里有带大家重温了一下,小程序页面的布局与样式,其实相当简单的。然后就是读取答题记录,并以列表的形式展示在页面上。下一篇重点讲讲如何查询历史成绩。