小程序实例开发学习-1--四则运算小程序

写在前面：
小程序的学习打算用项目的方式来学习。这算是现在做的第一个比较完整的小项目了。本文用各个功能的实现来介绍这个项目
源码地址
注：每一个标题后面有着所涉及到可能的知识点

题目类型的选择(picker)

用一个picker滚动选择器来进行选择。

• range动态绑定"加法",“减法”,“乘法”,"除法"的选择数组。
• 需要绑定一个value。
• 选择器变化的时候需要一个事件来动态获取选择的元素下标value。

<picker class="picker" mode="selector" range="{{operate}}" range-key="" value="{{operate_selected}}" bindchange="pickerChange">
  <div class="picker-container">
    <span class="picker-range">当前选择的题目类型为:{{operate[operate_selected]}}</span>
  </div>
</picker>

符号修改(动态绑定)

• 建立一共代表符号的数组
• 显示符号的位置动态绑定上面数组的一个元素。索引就用上面选择器绑定value就可以了
• 初始化数据

初始化

• 我们在每次操作都需要初始化数据。
• 随机生成a和b2个数，根据符号生成答案的数组
• 重置用户答对的数目和用户输入数组。

/**
     * 初始化，设置问题和答案
     */
    getRandomTest(){
        var n1 = this.getRandom(this.m)
        var n2 = this.getRandom(this.m)
        var a = []
        //此处为计算答案的代码
        this.setData({
            a1:n1,
            a2:n2,
            ans:a,
            count:-1,
            n:[]
        })
    },

答案验证逻辑(Loading/setTimeout/Toast)

• 生成随机数的时候就顺便生成了存储答案的数组
• 在提交之后，逐个校验存储用户填写的答案和存储答案的数组是否一致。
• 由于除法后面尾数过多，所以我们需要和用户约定一下保留多少位小数。
• 但是在核对之前我们还是得检查用户填写是否完整的。
• 如果不完整就给用户一个错误的提示框，告诉他未填写完整。

//在这里校验我们可以来进行一个小优化。
//因为校验需要时间。我们就可以给他一个等待的窗口。让用户知道了已经点击过了。
wx.showLoading({
    title: "校验中",
    mask: true
});
//然后我们也需要其自动隐藏掉所以可以加一个定时器来隐藏，即一秒后隐藏
setTimeout(function(){
   wx.hideLoading()
},1000)

//提示框
// error的错误提示框，持续时间2s
wx.showToast({
  title: '答案不完整',
  icon: 'error',
  duration: 2000
})

填写完整性校验(setData)

• 判断用户填写长度是否和生成的题目数量一致
• 判断填写数组是否有为空。
• 统计用户有效输入个数和题目数是否相同

this.setData({
   countNum:this.data.n.filter(i=>i!="").length
});
// m为题目数量
return this.data.countNum == this.m

完成进度条(progress)

• 我们将校验完整性中2步拆开，在用户输入改变的同步事件中，添加这个获取用户有效输入的函数
• 进度条同步这个countNum*10就可以了(这个如果是动态的m也可以修改一下逻辑就可以了)

<progress percent="{{countNum*10}}" active="{{true}} " active-mode="forwards" show-info="{{true}}" />

完成后显示另一个(wx:if/else)

<progress wx:if="{{countNum!=10}}" percent="{{countNum*10}}" active="{{true}} " active-mode="forwards" show-info="{{true}}" />
<view wx:else>恭喜你做完了所有题目</view>

其他问题

随机数生成
用js的math库中的random函数就可以了