关于前端:基于云开发的答题活动小程序v20答题记录页

33次阅读

共计 1303 个字符,预计需要花费 4 分钟才能阅读完成。

我的项目技术栈

微信原生小程序 + 云开发。我这里次要应用了云开发能力中的小程序端 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 字段做了日期格式化的解决。

实现后果

能够真机预览,也能够把代码上传至服务器,设置为体验版,而后看看实现成果。

本篇小结

这里有带大家重温了一下,小程序页面的布局与款式,其实相当简略的。而后就是读取答题记录,并以列表的模式展现在页面上。下一篇重点讲讲如何查问历史问题。

正文完
 0