英語學習小程序設計與實現(xiàn)

王爍，虞志恒

（徐州工程學院 信息工程學院（大數(shù)據(jù)學院），江蘇徐州，221018）

0 引言

現(xiàn)如今，隨著世界舞臺的全球化，語言的交流變得愈發(fā)重要，而英語作為世界上使用最廣泛的語言，在中國也越來越被重視[1]。現(xiàn)在的中小學，無論是家長還是學生，都越來越看重英語的教育，所以無論是在課內(nèi)還是課外英語學習都很重要。中小學生正處于學習語言的黃金時期，這時候有渠道全面的接觸外語[2]，就能對該門語言產(chǎn)生濃厚的興趣，再學習起來就會事半功倍，所以本設計開發(fā)的小程序給孩子們提供了一個課外充分接觸英語進行學習的軟件。

本設計通過Vscode+小程序開發(fā)者工具+Pycharm作為開發(fā)者工具[3]，使用typescript作為前端開發(fā)語言，php為后端開發(fā)語言[4]，整個軟件精煉簡潔，具有良好的可讀性以及安全性。

1 需求分析

該軟件主要由三個部分組成，分別是主流程學習，智能復習，以及單詞列表，排行榜和徽章等輔助功能。能讓學生能夠系統(tǒng)的英語學習，鞏固知識。具體功能分析如下。

■1.1 主流程學習

根據(jù)不同年齡段的學習接受度，會有不同的學習流程，其中包括：

(1)針對1-3年級等低年齡段小學生的T-N-1題型，該題型為聽讀練習，主要是幫助低年齡段的學生加深對單詞的印象，幫助他們記住單詞的讀音及意思。

(2)Q-A-1題型為看單詞選圖片，幫助學生記住單詞的意思，加深單詞的印象。

(3)Q-A-3題型為看單詞選詞義，幫助學生記住單詞的意思，加深單詞的印象。

(4)Q-A-8題型為判斷單詞圖片，通過正向選擇單詞，反向選擇圖片，能夠不斷的讓學生對單詞的詞義有深入的了解。

(5)Q-B-2題型為針對高年級同學的看詞意拼單詞，幫助學生能夠?qū)W會單詞的拼寫，能夠在日常中不斷使用。

(6)Q-B-2是聽聲音拼單詞，幫助學生對單詞讀音的掌握能力，也方便學生更好的交流。

■1.2 智能復習

智能復習主要是對在主流程學習中學習錯誤的單詞進行收集，并對一些主流程中比較困難或者相對復雜的單詞進行一個整合，再以不同的題型展示給用戶，以供他們學習和課后復習。

■1.3 輔助功能

一款好的軟件不能夠只單調(diào)的展示主要功能，必須還要有一些輔助功能讓這款軟件變得豐滿起來，所以我還開發(fā)了一些其他的功能，包括：

(1)新手引導:新手引導為新用戶第一次進入，為了引導新用戶熟悉本產(chǎn)品，我設計了輔助用戶選擇他們當前正處于的年級，單元以及詞書，并且讓用戶選擇一些詞書進行了一波主流程學習，并帶有輔助講解，幫助他們更快的了解我們的功能。

(2)班級排行:班級排行是能夠查看在自己班級或者在自己學校中，我所獲得的星星或者所學單詞量所處的排名，來激勵學生們更努力的學習，并且在排行中也添加了個給別人送花的小功能，來促進相互的鼓勵。

(3)打卡日歷功能:本功能是以日歷的形式展示，方便學生們通過日歷查詢每天學習的情況，來記錄每日學習的軌跡。

(4)收藏夾以及錯詞本:該功能是為了方便用戶更好的記憶單詞，用戶可以在主流程學習中收藏某個單詞，這樣用戶就能在學習過后記憶學習該單詞。錯詞本是記錄學生在學習中的錯誤單詞，并且學生能夠通過下面的抽查復習來鞏固該單詞，并且如果某個單詞可以完全正確的通過，該單詞也會從錯詞本中去除。

(5)徽章:徽章功能也是主要為了激勵學生完成日常的學習以及打卡，讓學生愛上學習，能夠從徽章的一些激勵模式中獲得自豪感。

2 系統(tǒng)設計

■2.1 總體設計

根據(jù)需求分析的結果進行總體設計，該APP分為三個TAB欄，分別是主流程學習及相關、智能復習、我的信息三個模塊。其模塊結構如圖1所示。

圖1 總體設計模塊

■2.2 系統(tǒng)結構設計

本軟件采用Uniapp的框架模式，uniapp主要是根據(jù)Vue[5]的基礎上更上一層，在保證框架的可行性上能夠滿足基本的前端需求。其中主要頁面層在pages里面，頁面之間的路由是由RouterHelper。ts類定義，通過uniapp的navigateTo，reLaunch，switchTab，navigateBack等微信跳轉(zhuǎn)實現(xiàn)各種情況下的頁面跳轉(zhuǎn)[6]。環(huán)境層在packagelock.json中，負責各種插件以及環(huán)境的配置語句[7]，一些頁面中的公共組件在Components中，負責公共組件的模塊，后端調(diào)用api的語句也有相對應的api公共類和其預定義的聲明類[8]。

■2.3 功能模塊的實現(xiàn)

2.3.1 主流程學習

點擊首頁的開始學習，我會根據(jù)首頁一開始后端傳來的當前詞書信息，通過我自己封裝的請求方式，給后端傳值post請求，傳入bookId，unitId，就可以從后端請求到所要學習的數(shù)據(jù)。

該小程序的主要核心是他的出題邏輯，首先，根據(jù)之前post請求之后，后端會返回三個數(shù)據(jù)，wordData，wordInfo，wordSteps，分別是顯示單詞具體參數(shù)，就比如包括單詞意思，詞組，音標等。Wordinfo是當前所需要學習的單詞信息，還包括下一步所需要學習的單詞類型。接著wordsteps是整個學習的步驟，通過題型作為Key值獲得所需要學習的參數(shù)，并且會有一個rule規(guī)則，來規(guī)范用戶做對的題型跳轉(zhuǎn)，如果用戶沒有做對題目，那么就沒有題目跳轉(zhuǎn)，就會彈出相對應二點單詞詳情，幫助用戶記憶該單詞，而且同時會記錄下錯誤單詞，方便添加進錯詞本。

每種題型都是以四個一組，如果做錯其中的一題，下一組對應位置的題目指向就是上一題題型錯誤的位置，然后每一組做完都會clearMap清空該Map數(shù)組，并且引入相對應的數(shù)據(jù)，從而讓學習進行下去。這樣就可以在學習中也不斷的復習錯誤的題目，并且在課后也能溫習所做錯的題目。題目相關邏輯如圖2所示。

圖2 主流程學習流程圖

2.3.2 智能復習

智能復習是當你在主流程學習完之后，就會根據(jù)主流程做錯的題目，在加上一些隨機的題目，然后根據(jù)主流程學的流程相同的邏輯出題。智能復習頁面還展示熟識的單詞，認識的單詞，模糊的單詞，忘記的單詞。這些題型也會隨機被添加進智能復習題庫之內(nèi)，頁面還包括所有學習的單詞，讓用戶了解到自己已經(jīng)學過多少個單詞了。智能復習頁面展示見圖3。表中的已學單詞未學單詞，也同樣擁有播放聲音以及點擊查看單詞詳情。該頁面還擁有排序功能，是根據(jù)后端返回的數(shù)組，再運用js中的sort方法，能根據(jù)單詞的首字母A~Z進行正序排行，還有倒敘排行，還有根據(jù)用戶添加該單詞的時間進行時間排序。當用戶點擊排序，APP還將你這次操作存儲到本地，當用戶下次再打開該頁面時候就會自動根據(jù)上次結果排序，讓排序更加的智能化。

圖3 智能復習

2.3.3 輔助功能

其他輔助功能包括收藏夾，錯詞本，我的徽章還有設置功能。

(1)收藏夾和錯詞本

該功能主要是收集日常學習中的單詞，提供在學習中的單詞的記錄，包括在主流程學習中，對不熟悉或者困難的單詞收藏，也能夠在下次主流程中對收藏單詞的取消收藏，這些收藏的單詞都能夠在收藏夾中看到，并且收藏單詞中點擊所選單詞，還能夠展示該單詞的具體屬性，包括詞義，讀音，詞組等。

錯詞本也是為了加強學生對單詞的記憶，在用戶學習中錯誤的單詞，都會被后端記錄，然后再次進入錯詞本，就能夠看到當初學習錯誤的單詞，并且同樣擁有收藏夾同等的功能，也能點擊單詞顯示，還能夠展示該單詞的具體屬性，包括詞義，讀音，詞組等。并且在下面擁有鞏固錯詞功能，在該流程中鞏固之前錯誤的單詞，并在學習中不斷加深印象。錯詞的流程見圖4。

圖4 錯詞流程圖

當用戶在錯詞本頁面點擊抽查復習，也會根據(jù)同樣的學習流程進行復習抽查，當抽查復習全對，錯詞本對應的單詞就會消失。在頁面格式中也采用單詞列表中的已學單詞未學單詞，也同樣擁有播放聲音以及點擊查看單詞詳情。該頁面還擁有排序功能，是根據(jù)后端返回的數(shù)組，再運用js中的sort方法，能根據(jù)單詞的首字母A~Z進行正序排行，還有倒敘排行，還有根據(jù)添加該單詞的時間進行時間排序。當點擊排序，會將這次操作存儲到本地，當下次再打開該頁面時候就會自動根據(jù)上次的排序，讓排序更加的智能化。具體圖片見圖5。

圖5 錯詞本

(2)我的徽章

在我的頁面中我的徽章主要展示用戶所獲得的徽章前三個，當點擊進入我的徽章頁面，徽章將根據(jù)不同類型分成五個組，若是未獲得的徽章顯示是灰色，若是獲得了的徽章會展示他的具體色彩。當點擊某個徽章，會跳出一個dialog公共組件的彈窗，用戶能夠看到該徽章的具體信息以及獲得該徽章的進度，如圖6所示。

圖6 我的徽章

然后當用戶在學習的過程中滿足的該徽章條件，當返回我的首頁的時候，會有一個是否獲得徽章的條件判斷，如果用戶獲得了滿足了某個徽章的條件，那么在首頁也會彈出一個獲得徽章的dialog頁面，如圖7所示。

(3)設置

在設置里面有一個切換英式，美式的功能，還有一個意見反饋的功能，意見反饋主要利用到了uniapp的loadFile功能，用戶可以將自選圖片上傳到后端，選擇圖片也是運用了uniapp的內(nèi)置api的uni.chooseImage功能，能夠選擇本地圖庫里的圖片，然后將圖片轉(zhuǎn)成url格式方便我提交的時候轉(zhuǎn)換格式。

圖7 獲得徽章彈窗

3 結束語

本文對基于Uniapp的英語小程序做了詳細的需求分析，詳細介紹了通過MVVM開發(fā)模式的具體開發(fā)流程，著重介紹了幾個重點功能。該小程序針對中小學生的課外課本學習，通過新手引導，主流程學習，智能復習，錯詞鞏固練習，輔助功能等一系列學習流程，幫助孩子們在課堂之外的地方也能夠?qū)W習到課堂之內(nèi)的知識。同時也對學生能開口說英語起到了積極的推動作用。目前對市場的調(diào)研還不夠完善，該小程序功能還存在欠缺的地方，例如教師端的介入以及家長給孩子布置相應的任務等功能，把孩子課外學習系統(tǒng)的關聯(lián)在一起，這些都有待進一步的改進和完善。