为了背单词，我花了两天写了一款背单词小程序

前言

       “要是考试不考英语就好了”
        哎，提起英语，都是伤心事。有时候严重怀疑自己不是一块学习英语的料。单词背了忘，忘了背，背了又忘。考试之前看啥单词都会，一上考场：这单词啥意思？
        前两个月又开始了痛苦的英语学习。起步：背单词。开始还是按照以前的方法，每天规定背多少个单元，以此类推…当背完之后，测试自己的单词数。懵了，明明背过的单词，依然记不住…
        总结失败经验，百度：为什么单词记不牢？发现：艾宾浩斯遗忘曲线[了解一点，没有实践过]。为了验证艾宾浩斯遗忘曲线是否有效，海轰按照遗忘表格背了一个月单词[中间有几天没有坚持住]点开测试网站，哈哈，单词量居然还真的提高了[具体提高多少就不说了，不然就可以猜出一共会多少个词了]
        至今也用过几款单词APP，很好，但是感觉不适合自己。
        不如，给自己写个吧o(￣︶￣)o    希望实现的功能如下：

• 利用艾宾浩斯遗忘曲线记忆单词，统计每个单词自己错误的次数，便于复习
• 界面尽量简单，好操作一点
• 背诵一遍单词后，需要对之前的单词进行复习

程序截图

过程

1、确定数据结构

• 首先，需要一个集合记录单词，组成词库，一个集合记录用户的个人信息、背诵情况，便于之后数据分析。

2、确定功能

• 明确小程序应该具备的一些功能：背诵单词、复习、单词分析…起初开发一个测试版本，用于验证基础功能是否可以实现，然后在后续的版本慢慢更新新功能。
• 作为第一个版本，验证基础功能： 读取艾宾浩斯遗忘表格，确定当天需要新学、复习的单词章节
• 对于在背诵单词过程中，不认识的单词需要进行复习，一直到了解其意思为止//利用while循环
• 统计单词信息:每个单词错误次数、当天背诵单词数量、单词章节//为后续版本作基础

3、具体思路
        对于艾宾浩斯遗忘表格，开始想的办法是将其存为一张二维表。首次加载界面时，获取当前日期，与数据库用户日期进行作差，计算出当天应该背诵复习的章节。之后不知道咋了，一直报错，不知道哪里出了问题。后面只好采用了比较笨的一种方法:一维数组存储。部分代码如下:

  form_18: [3,11,14,16,17,18],
    form_19: [4,12,15,17,18,19],
    form_20: [5,13,16,18,19,20],
    form_21: [6,14,17,19,20,21],
    form_22: [7,15,18,20,21,22],
    form_23: [8,16,19,21,22,23],
    form_24: [9,17,20,22,23,24],

        如何背诵单词呢？这里海轰采用的方法是：根据计算出的章节数组，依次获取对应章节里面的单词，然后再依次循环显示在界面上。背诵单词，首先界面只会显示一个单词，用户需要根据自己是否认识其含义，选择"不认识"or"认识"。选择"不认识"，显示其含义，并将其单词信息加入复习队列，错误次数+1；选择"认识"，则读写下一个单词。在学习完今日的单词之后，再开始对不认识的单词进行重温，必须将单词意思全部了解方可结束。只有不认识，则一直循环，直到认识为止。//是不是有点狠

fontFamily: 'HaihongPro',//字体名字
    loaded: false,//判断字体加载是否完成
    first_words:1,//递增 用于翻转数组
    words:"",//一章节的单词
    words_length:0,//一章节单词的个数
    word:"",//当前单词
    isshowexplain:false,//是否展现单词意思 默认：false
    id_word:0,//一个章节中单词的位置 第几个 初始：0
    id_day_length:0,//背诵表数组的长度
    id_day: "",//背诵表数组
    review_words:[],//不认识的单词
    isreview:false,//是复习单词吗 默认：不是
    ishaveload_reviewwords:false,//是否已经加载不认识的单词
    isknow:true,// 复习模式 判断是认识的next 还是不认识的next 默认：true
    isrv:false,
    isexist:false,//是否含有用户
    openid:"",//用户openid
    today_wordnums:0,//今日背诵单词数量
    review_wordnums:0,//今日复习单词数量
    today_chapter:1,//今日单词章节
    result:false,

         从思路上看，难度不大。开始的时候海轰也是这样认为的。然而，真正自己开发的时候，完了，太难了。其他不论是"认识"/“下一个”，方法都是一样的，难就难在如何在一个方法中区分不同的情况。比如，认识有新学时候的认识，也有复习时候的认识。逻辑性比较强，这里花费的时间最多！部分demo代码如下：

// 下一个单词
  nextword:function(){
    wx.vibrateShort({})
    var k=this
    // 背诵新单词+复习前几天的单词
    if(k.data.isreview==false)
    {
      // 没有背完一个章节
      if (k.data.id_word < k.data.words_length - 1) {
        k.setData({
          id_word: k.data.id_word + 1,
          word: k.data.words[k.data.id_word + 1],
          isshowexplain: false,
        })
      }
      // 背完了该章节
      else {
        // 所有章节都背完了
        if (k.data.first_words == k.data.id_day_length+2) {
          console.log("所有章节背完")
          wx.showToast({
            title: '背完啦\(^o^)/~',
            icon: "none",
            mask:true
          })
          // 当今天新单词背诵完毕 立刻复习今天的单词
          k.setData({
            isshowexplain:false,
            isreview:true,
            isrv:true,       
          })
        }
        // 获取下一章节 单词
        else {
          wx.showLoading({
            title: '下一章节',
            mask: true
          })
          console.log("本章节背完了，背下一个章节了")
          // 获取下个一个背诵章节的单词
      
          db.collection('words').where({
            chapter: parseInt(k.data.id_day[k.data.id_day_length - k.data.first_words])
          }).get().then(res => {
            console.log(res.data[0])//这一天第一个需要背诵的章节
            wx.hideLoading()
            k.setData({
              words: res.data[0].words,//第一章节的所有单词
              words_length: res.data[0].words.length,//第一章节单词数量
              word: res.data[0].words[0],//第一章节第一个单词
              first_words: k.data.first_words + 2,
              id_word: 0,//
              isshowexplain: false,
              review_wordnums: k.data.review_wordnums + res.data[0].words.length
            })
          }).catch(err => {
            wx.showToast({
              title: '出错啦',
              icon: "none",
              mask: true
            })
          })
        }

      }
    }
    // 复习今天背诵的单词
    else
    {
      // 不需要复习
      if(k.data.review_words.length==0)
      {
        wx.showLoading({
          title: '\(^o^)/~',
        })
        var time = util.formatTime(new Date())
        // 如果记录中存在该用户
        console.log(k.data.isexist)
        if (k.data.isexist==="true")
        {
          console.log("更新数据x")
          console.log(time)
          console.log(k.data.today_chapter)
          console.log(k.data.today_wordnums)
          console.log(k.data.openid)

          // 调用云函数 积分减一
          wx.cloud.callFunction({
            // 要调用的云函数名称
            name: 'HHPro_functions',
            // 传递给云函数的event参数
            data: {
              function_name: "update_words",
              openid: k.data.openid,
              last_time: time,
              today_chapter: k.data.today_chapter,//今日章节
              words_nums:k.data.today_wordnums,//已经背诵单词总数
            }
          }).then(res => {
            console.log("更新数据")
            k.setData({
              result:true
            })
            wx.hideLoading()
          }).catch(err => {
            console.log(err)
          })
        }
        // 不存在
        else
        {
          db.collection('study_user').add({
            // data 字段表示需新增的 JSON 数据
            data: {
             study_openid:k.data.openid,//用户id
             first_time:time,//第一次背诵单词的时间
             last_time:time,//最后一次背诵的时间
             words_nums:k.data.today_wordnums,//已经背诵单词总数
             today_chapter:k.data.today_chapter,//今日章节
             days:1,//累积天数
            }
          })
            .then(res => {
              console.log(res)
              k.setData({
                result: true
              })
              wx.hideLoading()
            })
            .catch(console.error)
        }

      }
      else
      {
        // 加载需要复习的单词
        if (k.data.ishaveload_reviewwords == false) {
          k.setData({
            words: k.data.review_words,//今天不认识单词集合
            words_length: k.data.review_words.length,//第一章节单词数量
            word: k.data.review_words[0],//第一章节第一个单词
            id_word: 0,//
            isshowexplain: false,
            ishaveload_reviewwords: true,
            isrv: false,
          })
        }
        // 实现 复习单词中的 下一个 功能
        else {
          console.log(k.data.id_word)
          console.log(k.data.review_words.length)
          console.log(k.data.review_words)

          if (k.data.review_words.length == 1 || k.data.review_words.length == 0) {
            console.log("复习完成")
            wx.showLoading({
              title: '复习完成\(^o^)/~',
            })
            var time = util.formatTime(new Date())
            // 如果记录中存在该用户
            if (k.data.isexist === "true")
       {
            
              // 调用云函数 积分减一
              wx.cloud.callFunction({
                // 要调用的云函数名称
                name: 'HHPro_functions',
                // 传递给云函数的event参数
                data: {
                  function_name: "update_words",
                  openid: k.data.openid,
                  last_time: time,
                  today_chapter: k.data.today_chapter,//今日章节
                  words_nums: k.data.today_wordnums,//已经背诵单词总数
                }
              }).then(res => {
                console.log("更新数据")
                k.setData({
                  result: true
                })
                wx.hideLoading()
              }).catch(err => {
              })
            
            }
            // 不存在
            else {
              db.collection('study_user').add({
                // data 字段表示需新增的 JSON 数据
                data: {
                  study_openid: k.data.openid,//用户id
                  first_time: time,//第一次背诵单词的时间
                  last_time: time,//最后一次背诵的时间
                  words_nums: k.data.today_wordnums,//已经背诵单词总数
                  today_chapter: k.data.today_chapter,//今日章节
                  days: 1,//累积天数
                }
              })
                .then(res => {
                  console.log(res)
                  k.setData({
                    result: true
                  })
                  wx.hideLoading()
                })
                .catch(console.error)
            }
          }
          // 依然存在需要复习的单词
          else {
            // 删除当前单词
            k.data.review_words.splice(0, 1)
            k.setData({
              word: k.data.words[0],
              isshowexplain: false,
            })
          }
        }
      }
    }
  },

4、问题反馈

• 第一个版本的demo写完以后，上线测试了一下。bug非常多！
• 页面自动滚动、单词显示不全
• 新用户无法读取最新单词库 用户无法更新
• 单词未背完，直接返回，程序会崩溃 单词数量出现异常
• 之后根据bug，一个一个找原因。后面还是慢慢找到了一些原因，比如啥变量声明错误、程序异常终止… 当然目前小程序上的背单词模块部分bug已经修复，但是依然有很多bug存在，只有在今后的版本更新再修复了//最近时间不太充足

5、收获
        其实很久没有写过小程序了，很多语法都忘得差不多了。这几天稍微有点空，加上前段时间被英语折磨，一时心血来潮，就写了这个模块，希望以后有时间再慢慢完善吧。
         这次觉得收获最大的事，学会了动态加载字体吧。以前对于字体这块，觉得没有啥，能看就行。后面发现单词如果还是默认字体的话，有点不好看。然后就不断百度，找方法。大多数的方法就是将字体库加载到本地或者服务器，再使用。加载到本地这个，不太行，一个字体都几M了，小程序代码限制在2M以内[近期内测，小程序最多16M]；部署到服务器，不占空间，但是延迟大，用户体验不是很好。综合一些因素，选择了后者，部署在云服务器吧，自己用用也是可以了。[bug:部分手机无法加载新字体]
         虽然目前自己的背单词模块使用体验不是很好，但是毕竟是自己一点一点写出来的，非常喜欢！！

总结

         "巧记单词"模块已经上线小程序，感兴趣的小伙伴可以体验体验【小程序:海轰Pro，在"创意小屋"中】
        目前还处在测试阶段，bug，肯定是非常多，以后有时间再慢慢更新吧。之后版本会依次加入单词默写、单词错误次数分析等功能。程序是一时头脑发热写的，很多地方写的不好，大佬勿喷。开发差不多用了一个下午+一个晚上，时间跨度2天。
        如果有小伙伴发现bug或有什么好的提议，欢迎留言，谢谢♪(･ω･)ﾉ