手腕教你构建答案活动小程序系列文章,最前面三章分别是界面设计篇,说明如何制作答案小程序前端界面。(大卫亚设)。
现在进入了功能交互一边。本章是功能交互便利的第三章,是通过云开发实现查询题库功能的方法。(大卫亚设)。
事实上,这相当于在前后分离体系结构中发送异步请求。首先看看官方文件是怎么说的,看看我是怎么理解和怎么做的,希望大家能从中获得灵感,找到适合自己的学习方法。
软件体系结构:微信基础小程序云开发
消防安全知识问答活动小程序:质量消防安全知识问答活动小程序,基于云开发的回答活动小程序,包含源代码,版本计划连续迭代中。获取源代码,正在连续迭代版本.
前期准备工作
按照惯例,我们先看看官方文件是怎么说的。不需要通读文件,可以根据“用什么找什么”的原则,有针对性地查阅文件。(威廉莎士比亚,温斯顿。)这里是表情包,鱿鱼之间的“看文件”。必须有jpg
数据库|微信开放文档
云开发是什么,云开发能力是什么,这样说吧,巴拉巴拉~
数据库是什么,小程序是怎么调用的,这样说吧,巴拉巴拉~
好吧,有兴趣的话,其他的也可以仔细阅读。
不吹不黑。毕竟,微信小程序开发的正式文件是我见过的正式技术文件中最详细的文件。
当然,也有一笔带过的地方,我希望它能更详细一些。
佛门分析
云开发功能五花八门,包括云数据库、云存储、云函数、云调用等,可以说有这么多概念、眼花缭乱、乱七八糟吧。
事实上,没必要这样。有些东西可以用。可以组合使用,也可以只用一个,这就是“仁者见仁,智者见智”。在这里,使用云数据库的小程序SDK即可。
如果想免费快速开发完整的答案小程序项目,用小程序开发云可能是最佳选择。(约翰f肯尼迪,学生)主要用于开发小程序的云,是前端开发的知识。是的,你没听错。请放重点。(大卫亚设)。
从此,“前端弟弟妹妹”、“后端弟弟妹妹”摆脱阴影,硬、整个项目自己穿梭,可以solo~
云开发快速查询题库
所谓“兵马不动,粮草先行。”要调用数据库,必须先存在数据库。这句话看起来像废话,其实是隐喻的一系列操作。
我不知不觉地问了灵魂三个问题。
开通云开发服务了吗?
创建数据库集合了吗?
添加标题数据了吗?
没有吗?没有吗?没有吗?
还有谁
1、手把手教我如何操作数据库。
1)单击微信开发人员工具上的云开发图标,打开云开发控制台。
2)单击“数据库”图标转到“数据库管理”页面,单击集合名称右侧的编号图标即可创建数据集合。
3)在此处添加activityQuestion集合即可。这个集合是用来存放问题库的。
144"/>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)再通过 Collec 来获取集合里的记录。
项目代码之逐行解读:
// 连接云数据库
const db = wx.cloud.database();
// 获取集合的引用
const activityQuestion = db.collection('activityQuestion');
// 数据库操作符
const _ = db.command;
Page({
/**
* 页面的初始数据
*/
data: {
questionList: [], // 题目列表
index: 0 // 当前题目索引
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 获取题库-函数执行
()
},
// 获取题库-函数定义
getQuestionList() {
// 显示 loading 提示框
wx.showLoading({
title: '拼命加载中'
});
// 构建查询条件
ac({
// 指定查询条件,返回带新查询条件的新的集合引用
true: _.exists(true)
})
.get()
.then(res => {
// 获取集合数据,或获取根据查询条件筛选后的集合数据。
con('[云数据库] [activityQuestion] 查询成功')
con)
let data = res.data || [];
// 将数据从逻辑层发送到视图层,通俗的说,也就是更新数据到页面展示
({
questionList:data,
index: 0
});
// 隐藏 loading 提示框
wx.hideLoading();
})
}
})
4、题库查询结果
保存然后待代码编译之后,点击“开始答题”按钮跳转到答题页面,就能在控制台看到调用的 20 条数据库记录了。
稍微要说明一下的是,如果没有指定 limit,则默认最多取 20 条记录。