準(zhǔn)備工作做完后，今天我們從核心模塊，分類與題目練習(xí)開始做。由于開發(fā)時(shí)間比較緊，這里主要寫實(shí)習(xí)思路，與核心代碼。

image.png

頁面一、首頁

這里我們主要優(yōu)先實(shí)現(xiàn)功能邏輯，UI后面調(diào)整，我們用iview 拖一個(gè)大致結(jié)構(gòu)的頁面。

這里用了以下組件

1. { "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" } }

頁面二、專項(xiàng)練習(xí)頁面

這個(gè)頁面，我們從數(shù)據(jù)庫里取出數(shù)據(jù)，首先建立好數(shù)據(jù)表，這個(gè)表結(jié)構(gòu)昨天有講。

我們導(dǎo)入一個(gè)CSV格式數(shù)據(jù)到表里

CSV文件內(nèi)容

bSubjects,title  1,時(shí)間題  1,速度題  1,距離題  1,罰款題  1,記分題  1,標(biāo)志題  1,標(biāo)線題  1,手勢題  1,信號(hào)燈  1,燈光題  1,儀表題  1,裝置題  1,路況題  1,酒駕題  1,動(dòng)畫題  1,情景題 

然后我們?nèi)〕鲞@里的數(shù)據(jù)，在小程序里面顯示

核心代碼

1. // 庫文件
2. const getQuestionTypeList=()=>{
3. return new Promise((resolve, reject) => {
4. const query = wx.Bmob.Query('questionType');
5. query.find().then(res => {
6. console.log(res)
7. resolve(res)
8. }).catch(err=>{
9. console.error(err)
10. reject(err)
11. })
12. });
13. }

1. // 頁面js文件
2. wechatApp-questions2/pages/topic/index.js
3. onLoad(e){
4. wx.u.getQuestionTypeList().then(r=>{
5. console.log(r,`k`)
6. this.setData({
7. result:r
8. })
9. })
10. },

1. // wxml文件
2.  
3. <i-panel title="題型列表" hide-top>
4. <!-- <view style="padding: 15px;">頭部距離為 0 的 Panel</view> -->
5. <i-row>
6. <i-col wx:for="{{result}}" span="12" i-class="col-class">
7. <i-panel bindtap="handleTabClick" data-id="{{item.objectId}}" class="cell-panel-demo" title="">
8. <i-cell title="{{item.title}}" value="">
9. <i-icon type="enterinto" slot="icon" />
10. </i-cell>
11. </i-panel>
12. </i-col>
13. </i-row>
14. </i-panel>

首頁點(diǎn)擊到分類，分類點(diǎn)擊到題目頁面，下一個(gè)是題目頁面，這個(gè)頁面是整個(gè)項(xiàng)目的核心， 所以的題目都在這個(gè)頁面進(jìn)行計(jì)算，判斷。

頁面三、答題頁面  這個(gè)頁面會(huì)是最復(fù)雜的一個(gè)頁面， 涉及到，計(jì)時(shí)，判斷、記錄歷史等等操作。

之前只想到模擬考試，沒考慮到這種按照順序練習(xí)， 第二次進(jìn)入，可以繼續(xù)之前的題目練習(xí)。 這里建個(gè)學(xué)習(xí)表，記錄他的順序練習(xí)相關(guān)數(shù)據(jù)，以下是數(shù)據(jù)表暫定的結(jié)構(gòu)

學(xué)習(xí)表 learning

第一步：還是一樣，用iview 復(fù)制出對應(yīng)組件

第二步：查詢出此類別的題目， 并且默認(rèn)顯示一道題，點(diǎn)擊下一題，顯示數(shù)組下一個(gè)元素

第三步：先做單選題，點(diǎn)擊選擇，判斷是否正確， 如果正確，記錄到結(jié)果對象 [{" id ":" XXX ', '0'}, {" id ":" XXX ", "1"}] ，0代表回答錯(cuò)誤，1正確

第四步：點(diǎn)擊下一題計(jì)算進(jìn)度條位置，判斷當(dāng)前是否選擇了題目，否則提示請選擇結(jié)果。

目前做到這個(gè)一步，明天繼續(xù)。