手把手教你搭建消防安全答题小程序-用云开发实现查询题库功能

简介: 手把手教你搭建消防安全答题小程序-用云开发实现查询题库功能

手把手教你搭建答题活动小程序系列文章,最前面的三章是界面设计篇,分别描写了如何搭建答题小程序的首页、答题页和答题成绩页。

现在已经进入功能交互篇了,此为功能交互篇的第三章,如何用云开发实现查询题库功能。

其实,说白了就是相当于,前后端分离架构中的发送异步请求。先看看官方文档怎么说,再看看我是怎么理解和怎么做的,希望大家能从中得到启发,然后找到适合自己的学习方法。

软件架构:微信原生小程序+云开发
戳源码地址,获取源码,版本持续迭代中...

前期准备工作
按照惯例,我们先看看​​​​​​​官方文档怎么说。不一定需要通读文档,可以遵循“用到什么查什么”的原则去针对性的查阅文档。此处应该有表情包,鱿鱼兮“看文档”.jpg

关于云开发是什么,云开发能力有哪些,是这样说的,巴拉巴拉~
image.png

关于数据库是什么,小程序怎么调用,是这样说的,巴拉巴拉~

image.png

好了,有兴趣的话,其他的你也可以仔细阅读阅读。

不吹不黑,毕竟,微信小程序开发的官方文档,是我看过的官方技术文档中描写最详细的文档。

当然,也有的地方一笔带过,我希望它可以更加详细一些。

不成文的分析
云开发能力,包含云数据库、云存储、云函数、云调用等等。可谓五花八门,这么多概念,眼花缭乱,晕乎所以了吧。

其实,大可不必,有的可用可不用。可以组合使用,也可以只用其一,这就“仁者见仁,智者见智”了。而这里,我们使用云数据库的小程序端SDK就行了。

如果你想免费、快速的开发出一个完整的答题小程序项目,用小程序的云开发可能是最好的选择。小程序的云开发所用到的主要是前端开发的知识,是的,你没听错没看错,划重点吧。

从此,摆脱“前端小哥哥小姐姐”、“后端小哥哥小姐姐”笼罩下的阴影,可以硬气一把了,整个项目自己一把梭,solo~

云开发快速查询题库
所谓“兵马未动,粮草先行”。若要调用数据库,则需要先有数据库。这句看似废话,其实是隐喻一系列的操作。

不禁发出灵魂三问:

你开通云开发服务了吗?

你创建数据库集合了吗?

你添加题目数据了吗?

没有?!没有?!没有?!

还有谁

1、手把手教你操作数据库
1)点击微信开发者工具的云开发图标,打开云开发控制台。
image.png

2)点击数据库图标进入到数据库管理页,点击集合名称右侧的+号图标,就可以创建一个数据集合了。
image.png

3)这里我们只需要添加一个activityQuestion的集合即可,这个集合就是存放题库用的。
image.png

4)添加题目数据,或者,导入题库,两种方式均可。

①添加记录,一题一题地手动添加,一题一题地一题一题地......

②导入题库,嗖的一声直接导入事先准备好的题库json文件。
image.png

5)大佬喝茶哦,不对。大佬,记得设置数据权限吖。不然它默认是“仅创建者可读写”,到时查不到数据就GG了。别跑,你还有bug没改完
image.png

2、题库的数据库设计
image.png

可以清晰地看见,一道题目其实就是对应一条记录。你可以粗暴地理解为,集合里面的记录,类似数组里面的对象。

你创建的每一道题,都会自动生成一个id字段,这个你可以不用管。一道题里面,所包含的字段不外乎就question、option、true、checked这几个。

字段解读:

1)question 题干

2)option 选项

3)true 正确答案

4)checked 该题是否已做

3、小程序端调用数据库
在小程序端调用数据库的方式很简单,我们可以把下面的代码写到一个事件处理函数里,然后直接在页面的生命周期函数里面执行。

其实概括起来,就三步走:

1)先使用 wx.cloud.database()获取数据库的引用(相当于连接数据库);

2)再使用 db.collection()获取集合的引用;

3)再通过 Collection.get 来获取集合里的记录。

项目代码之逐行解读:

// 连接云数据库
const db = wx.cloud.database();
// 获取集合的引用
const activityQuestion = db.collection('activityQuestion');
// 数据库操作符
const _ = db.command;

Page({

/**

  • 页面的初始数据

*/
data: {

questionList: [], // 题目列表
index: 0 // 当前题目索引

},

/**

  • 生命周期函数--监听页面加载

*/
onLoad: function (options) {

// 获取题库-函数执行
this.getQuestionList()

},

// 获取题库-函数定义
getQuestionList() {

// 显示 loading 提示框
wx.showLoading({
  title: '拼命加载中'
});
// 构建查询条件
activityQuestion.where({
  // 指定查询条件,返回带新查询条件的新的集合引用
  true: _.exists(true)
})
.get()
.then(res => {
  // 获取集合数据,或获取根据查询条件筛选后的集合数据。
  console.log('[云数据库] [activityQuestion] 查询成功')
  console.log(res.data)
  let data = res.data || [];
  
  // 将数据从逻辑层发送到视图层,通俗的说,也就是更新数据到页面展示
  this.setData({
    questionList:data,
    index: 0
  });

  // 隐藏 loading 提示框
  wx.hideLoading();
})

}
})
4、题库查询结果
保存然后待代码编译之后,点击“开始答题”按钮跳转到答题页面,就能在控制台看到调用的 20 条数据库记录了。

稍微要说明一下的是,如果没有指定 limit,则默认最多取 20 条记录。

image.png
微信小程序“防火安全知识专项学习与竞答”

相关文章
|
1月前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
354 12
|
4月前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
5月前
|
存储 自然语言处理 小程序
微信小程序多语言切换神器:简繁体切换功能完全指南
随着全球化的发展,支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能,以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数,开发者可以方便地实现语言切换,从而提升用户体验。文章中还附带了示例代码和效果图,帮助读者更好地理解和应用这一功能。
212 0
微信小程序多语言切换神器:简繁体切换功能完全指南
|
5月前
|
小程序 开发工具
微信小程序云开发的开通
微信小程序云开发的开通
129 0
微信小程序云开发的开通
|
5月前
|
小程序 Linux Python
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
49 1
|
5月前
|
小程序
创建云开发小程序
创建云开发小程序
39 0
|
7月前
|
存储 运维 小程序
后端开发零负担!揭秘支付宝小程序云开发的高效与安全,你的项目也能飞速上线?
【8月更文挑战第27天】支付宝小程序云开发是由阿里云提供的集成开发环境,助力开发者高效、安全地构建小程序后端服务,免去服务器搭建,显著提高开发效率并降低运维成本。它集成了云函数、云数据库及云存储等功能,便于快速搭建后端逻辑。例如,仅需简单几行代码即可创建HTTP接口或进行数据管理。这使得开发者能更专注于业务逻辑和用户体验优化,同时平台还提供了强大的安全保障措施,确保数据安全和用户隐私。无论对于初创团队还是成熟企业,支付宝小程序云开发都能有效提升产品迭代速度和市场竞争力。
160 1
|
2月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
50 0
|
4月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
97 0
在线课堂+工具组件小程序uniapp移动端源码
|
5月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
664 3

热门文章

最新文章

  • 1
    微信小程序云开发的开通
    130
  • 2
    后端开发零负担!揭秘支付宝小程序云开发的高效与安全,你的项目也能飞速上线?
    160
  • 3
    小程序开发问题之使用小程序云服务开发个人相册小程序如何解决
    63
  • 4
    好的商业模式-----小程序定制资料,加一张好看的海报,在推广中就可以找到用户中了,云服务部署收5000,部署是一种服务,定制化,游戏开发创者,仲裁劳务会剪视频好,提供服务,想增加一些新功能收费,会说
    57
  • 5
    【微信小程序-原生开发】转发给好友/群,分享到朋友圈(含单页模式访问云开发数据库的方法)
    305
  • 6
    【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
    181
  • 7
    【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
    113
  • 8
    【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
    293
  • 9
    【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
    122
  • 10
    小程序云函数从云数据下载excal
    148