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

　　接了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>

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

猜你喜欢