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

手把手教你搭建答题活动小程序系列文章,最前面的三章是界面设计篇,分别描写了如何搭建答题小程序的首页、答题页和答题成绩页。
现在已经进入功能交互篇了,此为功能交互篇的第三章,如何用云开发实现查询题库功能。
其实,说白了就是相当于,前后端分离架构中的发送异步请求。先看看官方文档怎么说,再看看我是怎么理解和怎么做的,希望大家能从中得到启发,然后找到适合自己的学习方法。
软件架构:微信原生小程序+云开发 戳源码地址,获取源码,版本持续迭代中...
前期准备工作 按照惯例,我们先看看官方文档怎么说。不一定需要通读文档,可以遵循“用到什么查什么”的原则去针对性的查阅文档。此处应该有表情包,鱿鱼兮“看文档”.jpg
关于云开发是什么,云开发能力有哪些,是这样说的,巴拉巴拉~
手把手教你搭建消防安全答题小程序-用云开发实现查询题库功能
文章图片

关于数据库是什么,小程序怎么调用,是这样说的,巴拉巴拉~
手把手教你搭建消防安全答题小程序-用云开发实现查询题库功能
文章图片

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

好了,有兴趣的话,其他的你也可以仔细阅读阅读。
不吹不黑,毕竟,微信小程序开发的官方文档,是我看过的官方技术文档中描写最详细的文档。
当然,也有的地方一笔带过,我希望它可以更加详细一些。
不成文的分析 云开发能力,包含云数据库、云存储、云函数、云调用等等。可谓五花八门,这么多概念,眼花缭乱,晕乎所以了吧。
其实,大可不必,有的可用可不用。可以组合使用,也可以只用其一,这就“仁者见仁,智者见智”了。而这里,我们使用云数据库的小程序端SDK就行了。
如果你想免费、快速的开发出一个完整的答题小程序项目,用小程序的云开发可能是最好的选择。小程序的云开发所用到的主要是前端开发的知识,是的,你没听错没看错,划重点吧。
从此,摆脱“前端小哥哥小姐姐”、“后端小哥哥小姐姐”笼罩下的阴影,可以硬气一把了,整个项目自己一把梭,solo~
云开发快速查询题库 所谓“兵马未动,粮草先行”。若要调用数据库,则需要先有数据库。这句看似废话,其实是隐喻一系列的操作。
不禁发出灵魂三问:
你开通云开发服务了吗?
你创建数据库集合了吗?
你添加题目数据了吗?
【手把手教你搭建消防安全答题小程序-用云开发实现查询题库功能】没有?!没有?!没有?!
还有谁
1、手把手教你操作数据库 1)点击微信开发者工具的云开发图标,打开云开发控制台。
手把手教你搭建消防安全答题小程序-用云开发实现查询题库功能
文章图片

2)点击数据库图标进入到数据库管理页,点击集合名称右侧的+号图标,就可以创建一个数据集合了。
手把手教你搭建消防安全答题小程序-用云开发实现查询题库功能
文章图片

3)这里我们只需要添加一个activityQuestion的集合即可,这个集合就是存放题库用的。
手把手教你搭建消防安全答题小程序-用云开发实现查询题库功能
文章图片

4)添加题目数据,或者,导入题库,两种方式均可。
①添加记录,一题一题地手动添加,一题一题地一题一题地......
②导入题库,嗖的一声直接导入事先准备好的题库json文件。
手把手教你搭建消防安全答题小程序-用云开发实现查询题库功能
文章图片

5)大佬喝茶哦,不对。大佬,记得设置数据权限吖。不然它默认是“仅创建者可读写”,到时查不到数据就GG了。别跑,你还有bug没改完
手把手教你搭建消防安全答题小程序-用云开发实现查询题库功能
文章图片

2、题库的数据库设计 手把手教你搭建消防安全答题小程序-用云开发实现查询题库功能
文章图片

可以清晰地看见,一道题目其实就是对应一条记录。你可以粗暴地理解为,集合里面的记录,类似数组里面的对象。
你创建的每一道题,都会自动生成一个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 = https://www.it610.com/article/res.data || []; // 将数据从逻辑层发送到视图层,通俗的说,也就是更新数据到页面展示 this.setData({ questionList:data, index: 0 }); // 隐藏 loading 提示框 wx.hideLoading(); }) } })

4、题库查询结果 保存然后待代码编译之后,点击“开始答题”按钮跳转到答题页面,就能在控制台看到调用的 20 条数据库记录了。
稍微要说明一下的是,如果没有指定 limit,则默认最多取 20 条记录。
手把手教你搭建消防安全答题小程序-用云开发实现查询题库功能
文章图片

    推荐阅读