爲了背單詞，我花了兩天寫了一款背單詞小程序

前言

       “要是考試不考英語就好了”
        哎，提起英語，都是傷心事。有時候嚴重懷疑自己不是一塊學習英語的料。單詞背了忘，忘了背，背了又忘。考試之前看啥單詞都會，一上考場：這單詞啥意思？
        前兩個月又開始了痛苦的英語學習。起步：背單詞。開始還是按照以前的方法，每天規定背多少個單元，以此類推…當背完之後，測試自己的單詞數。懵了，明明背過的單詞，依然記不住…
        總結失敗經驗，百度：爲什麼單詞記不牢？發現：艾賓浩斯遺忘曲線[瞭解一點，沒有實踐過]。爲了驗證艾賓浩斯遺忘曲線是否有效，海轟按照遺忘表格背了一個月單詞[中間有幾天沒有堅持住]點開測試網站，哈哈，單詞量居然還真的提高了[具體提高多少就不說了，不然就可以猜出一共會多少個詞了]
        至今也用過幾款單詞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或有什麼好的提議，歡迎留言，謝謝♪(･ω･)ﾉ