基于云开发的答题活动小程序v2.0-答题记录页
项目技术栈
微信原生小程序+云开发。我这里主要使用了云开发能力中的小程序端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字段做了日期格式化的处理。
实现结果
可以真机预览,也可以把代码上传至服务器,设置为体验版,然后看看实现效果。
本篇小结
这里有带大家重温了一下,小程序页面的布局与样式,其实相当简单的。然后就是读取答题记录,并以列表的形式展示在页面上。下一篇重点讲讲如何查询历史成绩。
基于云开发的答题活动小程序v2.0-答题记录页相关推荐
- 基于云开发的答题活动小程序v2.0-完整项目分享(附源码)
简介 答题活动小程序v2.0,是一个微信小程序答题软件,它基于微信原生小程序+云开发实现. 它使用了最新的前端技术栈,具有原生APP体验服务的小程序框架,小程序视图层描述语言 WXML 和 WXSS, ...
- 基于云开发的答题活动小程序v2.0-用云开发的聚合能力实现从题库中随机出题功能
项目技术栈 微信原生小程序+云开发.为什么选择微信原生小程序进行开发呢?因为能够直接应用它的云开发能力吖. 我这里主要使用了云开发能力中的小程序端SDK,说白了就是在javascript中就能直接操作 ...
- 基于云开发的答题活动小程序v2.0-结合具体场景谈谈路由传参以及组件化思想
项目技术栈 微信原生小程序+云开发.我这里主要使用了云开发能力中的小程序端SDK,说白了就是在javascript中就能直接操作数据库. 本篇前言 基于云开发的答题活动小程序v2.0的源码地址,以及手 ...
- 基于云开发的微信答题活动小程序v1.0搭建部署帮助文档
11月是全国"119"消防宣传月,不少企事业单位都会举办消防安全知识竞答活动,因此我基于云开发搭建了消防安全知识答题活动小程序. 接着,还写完了初阶的手把手教你搭建答题活动小程序系 ...
- 基于云开发的答题活动小程序v1.0,开开开源啦
基于云开发的微信答题活动小程序v1.0,开开开源啦!!!这个答题小程序,技术栈是基于云开发的微信原生小程序. 搭建教程系列文章 11月是全国"119"消防宣传月,不少企事业单位会举 ...
- 答题活动小程序v3.0
答题活动小程序v3.0 简介 答题活动小程序v3.0,基于云开发的微信答题小程序,软件架构是微信原生小程序+云开发. 主要包含六大功能模块页面,首页.答题页.结果页.活动规则页.答题记录页.排行榜页. ...
- 基于云开发模式的评分小程序总结!二维码、导出excel表格等实用干货!
基于云开发的打分小程序开发总结 1.TAKE打分小程序 1.1.项目简介 1.1.1.开发背景 1.1.2.项目介绍 1.2.项目效果图 1.2.1.主页 1.2.2.评分流程页 1.2.3.项目详情 ...
- 基于云开发的智慧校园小程序的设计与实现
摘 要 伴随着科技的发展,手机是我们生活中的必需品,而小程序是应时代而生成的便捷型工具,线上教育让学习不再对时间和地点的影响,同时让教育更加丰富多彩.为了实现课堂中或者学习上的困难和不解,智慧校园类微 ...
- 答题活动小程序v1.0
本文背景 手里运营一个答题活动助手小程序,这个小程序目前版本已经到了v1.81,产品推出也快半年了,功能上没有已知问题,前两天趁空闲,做了下优化了,今天做个总结,对近期的工作收尾,小程序刚刚已提交审核 ...
最新文章
- How to never give up
- 另类寻找百度文库下载地址
- VTK:Utilities之GetDataRoot
- org.apache.hadoop.hbase.PleaseHoldException: Master is initializing(解決方案汇总+自己摸索)
- yii2 刷新缓存(刷新模型缓存)
- linux脚本定时运行脚本,linux定时运行命令脚本——crontab
- HPUX分析Crash Dump_q4pxdb vmunix
- 两个不同的list合并_Stata:数据合并与匹配mergereclink
- 图像处理-灰度图像转化为伪彩图像
- 【二分答案】Problem A:天堂_珍珠
- 面试题 - 头条、京东
- 微信公众号引流的方法有哪些?
- phpExcel单元格内换行
- vscode背景图片无法删除
- Rabin-Karp算法 (拉宾-卡普)
- 著名画家孙王平作品欣赏
- 通过我买西瓜霜来看外观模式(vb.net实现)
- css3动画照片墙,css3照片墙动态效果
- 「微信同声传译」小程序插件:快速实现语音转文字、文本翻译、语音合成等能力...
- HDU 2222(AC自动机模板)
热门文章
- 少年西游记 服务器维护中,【公告】《少年西游记》12月22日停服维护
- 面向对象之类和对象(一)
- Big Data(七)MapReduce计算框架(PPT截图)
- 猎聘招聘网数据可视化
- 基于深度神经网络的安卓移动端智能花卉识别算法研究
- android深度探索 iso,深度探索:iOS 10 原生相册的 「半熟智能」
- 定时关闭华为交换机的端口
- python socket 域名_python实现域名系统(DNS)正向查询的方法
- java 三次贝塞尔曲线算法_转:穿过已知点画平滑曲线(3次贝塞尔曲线)
- 小米手机怎么卸载软件?来帮小米手机“清理门户”