手把手教你搭建消防安全答题小程序-将用云开发获取到的题目渲染到答题页面

简介: 手把手教你搭建消防安全答题小程序-将用云开发获取到的题目渲染到答题页面

手把手教你搭建答题活动小程序系列文章,第一阶段为界面设计篇,分别描写了如何搭建答题小程序界面。

现在已经进入第二阶段,功能交互篇。而上一篇文章描写了,如何用云开发实现查询题库功能。其实说白了就是相当于,前后端分离架构中的异步请求。

这一篇紧接着上一篇,聊聊用云开发实现查询题库功能后要做的事情。通俗来说,就是拿到题目数据后,接着要干什么。

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

聊聊用户体验
这里先插个题外话。

用户体验好不好,真的重要吗?如何做好答题小程序的用户体验呢?

我问你一句,你敢答应吗,第一个问题留给你来思考一下。我来聊聊第二个问题,我个人认为,从做好一个个的界面交互细节开始。

举个栗子,就拿我这个答题小程序,项目里的其中一个界面交互细节,来简要聊聊吧。

1)看,首先还是快速看一下官网技术文档:

wx.showLoading(Object object)显示 loading 提示框;

wx.hideLoading(Object object)隐藏 loading 提示框;

2)用,我使用了上述的小程序原生的API,具体使用聚焦到发送异步请求的函数:

// 获取题库
getQuestionList() {

// 显示 loading 提示框
wx.showLoading({
  title: '拼命加载中'
});

// 发起请求
activityQuestion.where({
  true: _.exists(true)
})
.get()
.then(res => {

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

})

}
当获取数据的时候,这个加载提示是在告诉用户,题目数据正在加载中,请耐心等待一下,很快就好了。

// 显示 loading 提示框
wx.showLoading({
title: '拼命加载中'
});
当数据获取成功后,就隐藏这各提示,相当于告诉用户,好了,你可以开始做题了。

// 隐藏 loading 提示框
wx.hideLoading();
言归正传
拿到数据后要干什么?如何做?

实现动态数据绑定,其实,概括起来就三步走:

1)先通过 Collection.get 来获取题库集合里的题目数据;

2)再使用setData函数将题目数据从逻辑层发送到视图层;

3)再Mustache 语法(双大括号)将变量包起来,实现动态数据绑定。

界面演示
1)获取数据
image.png
微信小程序“防火安全知识专项学习与竞答”

2)同步更新
image.png
微信小程序“防火安全知识专项学习与竞答”

3)填充到答题界面
image.png
微信小程序“防火安全知识专项学习与竞答”

源码解读
数据绑定
test.js

Page({
/**

  • 页面的初始数据

*/
data: {

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

}
})
test.wxml

第<text class="text-bold text-xl">{{index+1}}</text>题
共<text class="text-bold text-xl">{{questionList.length}}</text>题


<view class="page__title">
  <text class="text-bold">【单选题】</text>
  {{questionList[index].question}}
</view>


<radio-group class="radio-group">
  <label class="radio my-choosebox" wx:for="{{questionList[index].option}}" wx:for-index="key"  wx:for-item="value" wx:key="index">
    <radio value="{{key}}" checked="{{questionList[index].checked}}" />
    <text class="margin-left-xs">{{value}}</text>
  </label>
</radio-group>


<button class="cu-btn bg-red round lg" wx:if="{{index == questionList.length-1}}">提交</button>
<button class="cu-btn bg-red round lg" wx:else>下一题</button>


<text class="icon-weixin"></text> meng674782630



WXML 中的动态数据均来自对应 Page 的 data。

其中,wx:for实现列表渲染:



{{value}}

其中,wx:if和wx:else实现条件渲染:



更新视图
setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。

activityQuestion.where({
true: _.exists(true)
})
.get()
.then(res => {
let data = res.data || [];

// 将数据从逻辑层发送到视图层,通俗的说,也就是更新数据到页面展示

this.setData({
    questionList:data,
    index: 0
});

})
注意:

直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。

仅支持设置可 JSON 化的数据。

单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。

请不要把 data 中任何一项的 value 设为 undefined ,否则这一项将不被设置并可能遗留一些潜在问题。

相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
1月前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
4天前
|
JSON 小程序 数据格式
微信小程序默认的文字内容在左上角怎么办?带你0基础快速了解skyline渲染模式。
本文主要介绍微信小程序开发中遇到的问题及其解决方法。问题通常由微信小程序自带的Skyline渲染模式引起,而非代码编写错误。解决步骤包括:1. 找到全局配置文件app.json;2. 去掉相关配置项;3. 修改后的配置示例。通过这些步骤可以有效解决文字内容顶格或覆盖的问题。文中还提供了进一步了解Skyline渲染模式的链接,帮助开发者深入理解其原理和应用。
19 1
|
5天前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
41 0
|
23天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
4天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
10 0
|
1月前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
1月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
2月前
|
人工智能 小程序 IDE
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
随着AI技术的发展,各大厂商推出的AI运动APP如“乐动力”、“天天跳绳”等,使云上运动会、线上健身等概念大热。本文将指导你如何利用“云智AI运动识别小程序插件”,在微信小程序中实现类似功能,包括工具搭建、服务启动及数据回传等步骤,助力开发者高效开发AI运动小程序。
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
|
1月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。

热门文章

最新文章

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