準備工作做完后,今天我們從核心模塊,分類與題目練習開始做。由于開發(fā)時間比較緊,這里主要寫實習思路,與核心代碼。
image.png
這里我們主要優(yōu)先實現(xiàn)功能邏輯,UI后面調(diào)整,我們用iview 拖一個大致結構的頁面。
這里用了以下組件
{ "usingComponents": { "i-tab-bar": "../../dist/tab-bar/index", "i-tab-bar-item": "../../dist/tab-bar-item/index", "i-grid": "../../dist/grid/index", "i-grid-item": "../../dist/grid-item/index", "i-grid-icon": "../../dist/grid-icon/index", "i-grid-label": "../../dist/grid-label/index", "i-tabs": "../../dist/tabs/index", "i-tab": "../../dist/tab/index" } } |
這個頁面,我們從數(shù)據(jù)庫里取出數(shù)據(jù),首先建立好數(shù)據(jù)表,這個表結構昨天有講。
我們導入一個CSV格式數(shù)據(jù)到表里
CSV文件內(nèi)容
bSubjects,title 1,時間題 1,速度題 1,距離題 1,罰款題 1,記分題 1,標志題 1,標線題 1,手勢題 1,信號燈 1,燈光題 1,儀表題 1,裝置題 1,路況題 1,酒駕題 1,動畫題 1,情景題
然后我們?nèi)〕鲞@里的數(shù)據(jù),在小程序里面顯示
核心代碼
首頁點擊到分類,分類點擊到題目頁面,下一個是題目頁面,這個頁面是整個項目的核心, 所以的題目都在這個頁面進行計算,判斷。
頁面三、答題頁面 這個頁面會是最復雜的一個頁面, 涉及到,計時,判斷、記錄歷史等等操作。
之前只想到模擬考試,沒考慮到這種按照順序練習, 第二次進入,可以繼續(xù)之前的題目練習。 這里建個學習表,記錄他的順序練習相關數(shù)據(jù),以下是數(shù)據(jù)表暫定的結構
學習表 learning
第一步:還是一樣,用iview 復制出對應組件
第二步:查詢出此類別的題目, 并且默認顯示一道題,點擊下一題,顯示數(shù)組下一個元素
第三步:先做單選題,點擊選擇,判斷是否正確, 如果正確,記錄到結果對象 [{" id ":" XXX ', '0'}, {" id ":" XXX ", "1"}] ,0代表回答錯誤,1正確
第四步:點擊下一題計算進度條位置,判斷當前是否選擇了題目,否則提示請選擇結果。
目前做到這個一步,明天繼續(xù)。