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

1次阅读

共计 2254 个字符,预计需要花费 6 分钟才能阅读完成。

手把手教你搭建答题流动小程序系列文章,最后面的三章是界面设计篇,别离刻画了如何搭建答题小程序的首页、答题页和答题问题页。

当初曾经进入性能交互篇了,此为性能交互篇的第三章,如何用云开发实现查问题库性能

其实,说白了就是相当于,前后端拆散架构中的发送异步申请。先看看官网文档怎么说,再看看我是怎么了解和怎么做的,心愿大家能从中失去启发,而后找到适宜本人的学习办法。

软件架构:微信原生小程序 + 云开发

戳源码地址,获取源码,版本继续迭代中 …

后期筹备工作

依照常规,咱们先看看官网文档怎么说。不肯定须要通读文档,能够遵循“用到什么查什么”的准则去针对性的查阅文档。此处应该有表情包,鱿鱼兮“看文档”.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 条记录。

正文完
 0