记录一点关于小程序前端的开发笔记

  接了BOSS的一个开发任务,大概意思是说做一个类似驾考宝典这样的考试系统,有一个答题模板,展示全部题目,然后答过的题目变颜色,结果如下图。并且为了应付异常情况,比如手机突然关机电话拨入之类的。需要给保存下用户的考试情况。

                记录一点关于小程序前端的开发笔记

  大概考虑一下,首先应对异常情况,小程序提供了本地数据存储的功能,不论关机或者退出微信,除非数据内存紧张,不然数据是不会清除的,所以考虑将数据保存在本地数据中。

  第二个数据存储结构,因为考试信息较多,所以我考虑首先将用户的答题情况保存为一个如下的json

        记录一点关于小程序前端的开发笔记

  其中对象中一个对象包含一种类型的题目信息总和,num代表题目数,score代表每道题目的分数,qid是题目id,rightAns是这道题目的正确答案,answer是用户的答案。

  然后每次打开一道题就根据qid打开一道题目,将题目信息存在currentQuestion对象中,总之根据这个json对象可以获取很多信息。比如上一题,下一题,总之可以在打开题目的时候。

将这些信息查找出来放在currentQuestion对象中,方便使用。

   

  其中几种类型中,填空的需求比较特别,记录一下,先上图,这个界面现在还是比较简单,后期再慢慢改,先实现功能。就是说答案几个字就显示几个空,让用户按这几个格子输入答案,

一个格子一个字。

        记录一点关于小程序前端的开发笔记

    我首先想到的是循环答案字数,一个字数展示一个输入框,但是稍微想一想,就发现不可能这么实现,首先一个输入框一个光标,一个萝卜一个坑,虽然可以让这几个输入框使用同一个输入方法。

控制同一个字符串,但是我们不知道用户是通过哪一个格子触发的输入事件,这个输入框的光标不能回到上一个输入框中,并且小程序目前不太支持改变光标颜色,就是说光标无法隐藏。反正不合理的地

方太多了。只能另外想办法,既然一个字一个空不可能,那只能将答案放在一个输入框中,然后把输入框藏起来,但是藏起来怎么触发输入事件呢,这里用到input的focus属性,这个属性为true时,这个

input会自动获取焦点,我根据答案的字数循环展示view,每个view通过answer[index]这样的方式映射答案的一个字,每个view绑定点击事件,将focus的值从false改成true,点击view就会触发输入事件,

然后通过逻辑修改样式就好啦。。。

 

  插点代码。。。。

            <!-- 循环体开始 -->
            <view wx:for="{{currentQuestion.answer.length}}" wx:for-item="item" wx:key="{{index}}" class="center7">
              <view class="inputCloze center4 {{(currentQuestion.answer.length <= currentQuestion.currentAns.length && index == currentQuestion.answer.length - 1) 
| index == currentQuestion.currentAns.length?‘inputClozeborder‘:‘‘}}"
bindtap="changeCanInput"> <text>{{currentQuestion.currentAns[index]}}</text> </view> <view style="width:10rpx;"></view> </view> <!-- 循环体结束 --> <input data-type="{{currentQuestion.type}}" focus="{{caninput}}" data-qid="{{currentQuestion.qid}}"
class
="{{inputShow?‘inputCloze1‘:‘inputClozeHidden‘}}" bindinput="inputCloze" value="{{currentQuestion.currentAns}}"></input>

 

 

 

记录一点关于小程序前端的开发笔记

上一篇:uniapp实现微信小程序商品分类侧边栏效果


下一篇:微信公众号运维