手把手教你搭建答题流动小程序系列文章,最后面的三章是界面设计篇,别离刻画了如何搭建答题小程序的首页、答题页和答题问题页。
当初曾经进入性能交互篇了,此为性能交互篇的第三章,如何用云开发实现查问题库性能。
其实,说白了就是相当于,前后端拆散架构中的发送异步申请。先看看官网文档怎么说,再看看我是怎么了解和怎么做的,心愿大家能从中失去启发,而后找到适宜本人的学习办法。
软件架构:微信原生小程序 + 云开发
戳源码地址,获取源码,版本继续迭代中 …
后期筹备工作
依照常规,咱们先看看官网文档怎么说。不肯定须要通读文档,能够遵循“用到什么查什么”的准则去针对性的查阅文档。此处应该有表情包,鱿鱼兮“看文档”.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 = res.data || [];
// 将数据从逻辑层发送到视图层,艰深的说,也就是更新数据到页面展现
this.setData({
questionList:data,
index: 0
});
// 暗藏 loading 提示框
wx.hideLoading();})
}
})
4、题库查问后果
保留而后待代码编译之后,点击“开始答题”按钮跳转到答题页面,就能在控制台看到调用的 20 条数据库记录了。
略微要阐明一下的是,如果没有指定 limit,则默认最多取 20 条记录。