为了娃,周末熬夜开发训练计算能力的微信小程序

269 阅读3分钟

小涂算算(babyplus)

这是一款帮助小孩训练计算能力的微信小程序。

gh_a0050e88e608_430.jpg

前言:

因为自家小孩在上一年级,想提高和考察下他的加减法掌握情况就熬了一夜开发了这样款小程序。在后续分享给同龄家长后,收到许多好的反馈和建议。在此基础上迭代了多次,具体如下更新。望子成龙人皆有,可怜天下父母心,有需要的可以直接扫码使用。

功能介绍

【1】支持加减法、乘除法练习; 【2】支持九九加法口诀、乘法口诀查看; 【3】支持随机生成计算题目、可自定义题目数量; 【4】支持错题查看和重新计算功能; 【5】支持设置选择题或填空题; 【6】支持计算过程记时功能;

版本迭代

v1.7.0

1.交互优化,结果页面界面调整;

v1.6.0

1.新增记一记,学一学功能; 2.新增九九加法口诀表和乘法口诀表功能;

v1.6.0

1.新增记一记,学一学功能; 2.新增九九加法口诀表和乘法口诀表功能;

v1.5.0

1.文案提示优化; 2.交互优化;

v1.4.0

1.新增支持乘除法的训练计算;

v1.3.0

1.新增填空输入题型; 2.支持题型选择判断; 3.支持设置选择题是否允许重选设置; 4.部分交互优化;

v1.3.0

1.新增填空输入题型; 2.支持题型选择判断; 3.支持设置选择题是否允许重选设置; 4.部分交互优化;

v1.2.0

1.优化随机算法; 2.支持4位以内的数字范围设置; 3.优化结果错误显示逻辑;

v1.1.0

1.调整字体大小; 2.优化全对显示为奖杯动态切换模式; 3.增加背景颜色配置;

v1.0.1

1.新增设置功能; 2.支持题目数量自定义; 3.优化部分跳转逻辑; 4.交互优化;

v1.0.0

1.支持自定义数字范围内的加减法; 2.新增随机生成加减法; 3.新增错误题查看功能;

核心代码

// pages/counter/index.js
import {
  SUBTYP
} from '../../data'

Page({

  /**
   * 页面的初始数据
   */
  data: {
    counter: 0,
    numPage: 1,
    numOne: 0,
    numTwo: 0,
    singal: "+",
    items: [{
      value: '1',
      name: '1',
      checked: false
    }],
    histroyList: [], //保存历史
    outerAnswer: "",
    answer: "", //正确的结果
    errorList: [], //错题集
    errorCouter: 0,
    type: 0, //0:首页跳转过来的;其余为错题跳转过来的
    subItem: {
      type: 0,
      title: "",
      subTitle: '',
      tips: ''
    },
    repeat: true,
    disabled:false
  },

  /**
   * 选择答案
   * @param {*} e 
   */
  radioChange(e) {
    const items = this.data.items
    for (let i = 0, len = items.length; i < len; ++i) {
      items[i].checked = items[i].value == e.detail.value
    }
    this.setData({
      items,
      outerAnswer: e.detail.value,
      disabled: !this.data.repeat ? true : false
    })
  },

  getNum: function () {
    const app = getApp();
    let range = app.data.range;
    if (range <= 10) {
      return parseInt(Math.random() * 100 / 10);
    } else if (range < 100) {
      return parseInt(Math.random() * 1000 / 10);
    } else {
      return parseInt(Math.random() * 10000 / 10);
    }
  },

  /*
   *生成随机数
   */
  getData: function () {
    const app = getApp();
    const subType = app.data.subType;
    const proType = app.data.proType;

    //生成算式
    let numOne = this.getNum();
    let numTwo = this.getNum();
    let singal = numOne % 2 == 0 ? "+" : "-";
    if(proType == 1){
      singal = parseInt(Math.random() * 1000 / 10) % 2 == 0 ? "÷" : "×";
    }
    if(singal=="÷"){
      if(numTwo == 0 || numOne ==0){
        return this.getData();
      }
    }
    if (numTwo > numOne && singal == "-" || numTwo > numOne && singal =="÷" ) {
      let temp = numOne;
      numOne = numTwo;
      numTwo = temp;
    }
    let answer = 0;
    if (singal == "+") {
      answer = numOne + numTwo;
    } else if (singal == "-") {
      answer = numOne - numTwo;
    }else if (singal == "×") {
      answer = numOne * numTwo;
    }else if (singal == "÷") {
      while(numTwo > 0){
        if(numOne % numTwo == 0){
          answer = numOne / numTwo;
          break;
        }
        numTwo--;
      }
    }


    //生成选项答案
    let items = [];
    for (let i = 0; i < 4; i++) {
      if (answer % 4 == i) {
        items.push({
          value: answer,
          name: answer,
          checked: false
        })
      } else {
        if (numTwo % 2 == 0) {
          items.push({
            value: answer + i + 2,
            name: answer + i + 2,
            checked: false
          })
        } else {
          items.push({
            value: answer + i + 1,
            name: answer + i + 1,
            checked: false
          })
        }
      }
    }


    if (answer > app.data.range || numTwo > app.data.range || numOne > app.data.range || numOne == 0) {
      return this.getData();
    } else {
      return {
        numOne,
        numTwo,
        singal,
        items,
        answer,
        subItem: SUBTYP[subType]
      }
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let type = options.type;
    const app = getApp();
    const list = app.data.histroyList;
    if (type == 2 && list.length > this.data.errorCouter) {
      const data =
        list[this.data.errorCouter];
      this.setData({
        errorList: list,
        ...data,
        type: 2,
        repeat: app.data.repeat
      });
    } else {
      const data = this.getData();
      this.setData({
        ...data,
        type: 0,
        repeat: app.data.repeat
      });
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    let count = this.data.counter;
    this.timer = setInterval(() => {
      count++;
      this.setData({
        counter: count
      });
    }, 1000)
  },

  tapNext: function () {
    const app = getApp();
    let num = this.data.numPage;
    let answer = this.data.answer;
    let errorCouter = this.data.errorCouter;
    let {
      numOne,
      numTwo,
      singal,
      outerAnswer,
      items,
      histroyList,
      counter,
      type,
      errorList,
      subItem
    } = this.data;
    histroyList.push({
      numOne,
      numTwo,
      singal,
      outerAnswer,
      items,
      counter,
      numPage: num,
      answer,
      isRight: answer == outerAnswer && outerAnswer != "",
      subItem
    });
    if (type == 0) {
      num++;
      if (num <= app.data.num) {
        let data = this.getData();
        this.setData({
          ...data,
          numPage: num,
          outerAnswer: "",
          disabled: false
        });
      } else {
        clearInterval(this.timer);
        app.data.histroyList = histroyList;
        wx.redirectTo({
          url: '/pages/result/index',
        })
      }
    } else {
      errorCouter++;
      if (errorCouter < errorList.length) {
        let data = errorList[errorCouter];
        this.setData({
          ...data,
          errorCouter,
          disabled:false
        });
      } else {
        clearInterval(this.timer);
        app.data.histroyList = histroyList;
        wx.redirectTo({
          url: '/pages/result/index',
        })
      }
    }

  },  

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    clearInterval(this.timer);
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: '一款好用的算术练习工具。',
      path: '/pages/index/index', 
    }
  }
})

使用情况

分享下第一天投产后的数据,目前日活量上百,如下图所示:

eae454d7677c0b651aed1b6b554d27.jpg

部分功能页面截图

image.png image.png image.png image.png image.png image.png

结语

分享的意义在于自己娃成长的同时,大家的娃也在成长,自己也在不断学习提高,很有成就感,我想这就是收获,欢迎大家体验使用,在评论区反馈更好的建议,我会抽空迭代出新。

后续版本持续更新迭代中,敬请期待、、、