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

一步步教你搭建消防安全答题小程序——将使用云开发得到的题目渲染到答题页小程序界面。现在已经进入第二阶段，功能交互。上一篇介绍了如何使用云开发实现查询题库的功能。其实说白了就是相当于前后端分离架构中的一个异步请求。这篇文章承接上一篇，说说使用云开发实现查询题库功能后要做什么。通俗地说，就是拿到主题数据之后，接下来要做什么。软件架构：微信原生小程序+云开发戳源码地址，获取源码，版本不断迭代中……说说使用体验。这里插一句题外话。用户体验真的很重要吗？如何做好答疑小程序的用户体验？我问你一个问题，你敢答应吗？第一个问题留给大家思考。再说第二个问题。我个人认为还是应该从界面交互的细节入手。比如我的问答小程序中的一个界面交互细节，简单说一下。1）看，首先看一下官网的技术文档：wx.showLoading(Objectobject)显示加载提示框；wx.hideLoading(Objectobject)隐藏加载提示框；API，具体使用了专注于发送异步请求的函数：//获取题库getQuestionList(){//显示加载提示框wx.showLoading({title:'拼命加载'});//发起请求activityQuestion.where({true:_.exists(true)}).get().then(res=>{//隐藏加载提示框wx.hideLoading();})}获取数据时，这个加载提示是在告诉用户，题目数据正在加载中，请耐心等待，很快就会加载完成。//显示加载提示框wx.showLoading({title:'拼命加载'});当数据获取成功后，提示会被隐藏，相当于告诉用户，好了，可以开始做题了。//隐藏加载提示框wx.hideLoading();言归正传，拿到数据后做什么？怎么做？实现动态数据绑定，其实归纳起来就是三步：1）首先通过Collection.get获取题库集合中的题型数据；2）使用setData函数将问题数据从逻辑层发送到视图层；3）然后Mustache语法（双花括号）包裹变量，实现动态数据绑定。界面demo1）获取数据2）同步更新3）填写答案界面源码解读数据绑定test.jsPage({/***页面初始数据*/data:{questionList:[],//问题列表index:0//当前主题索引}})test.wxmlNo.{{index+1}}共{{questionList.length}}问题【单选题】{{questionList[index].question}}{{value}}</radio-group>提交下一题meng674782630WXML中的动态数据来源于对应Page的数据其中wx:for实现列表渲染：{{value}}其中wx:if和wx:else实现条件渲染：提交NextquestionUpdateviewsetData函数用于传输数据从逻辑层发送到视图层（异步），同时改变对应的this.data的值（同步）。activityQuestion.where({true:_.exists(true)}).get().then(res=>{letdata=res.data||[];//将数据从逻辑层发送到视图层，popular就是更新数据到页面显示this.setData({questionList:data,index:0});})注：不调用this.setData直接修改this.data是不能改变页面状态的，而且还会造成数据不一致。只支持设置JSONizable数据。一次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。请不要将data中的任何项的值设置为undefined，否则该项将不会被设置，并可能留下一些潜在的问题。