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

image.png

頁面一、首頁

這里我們主要優先實現功能邏輯，UI后面調整，我們用iview 拖一個大致結構的頁面。

這里用了以下組件

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" } }

頁面二、專項練習頁面

這個頁面，我們從數據庫里取出數據，首先建立好數據表，這個表結構昨天有講。

我們導入一個CSV格式數據到表里

CSV文件內容

bSubjects,title  1,時間題  1,速度題  1,距離題  1,罰款題  1,記分題  1,標志題  1,標線題  1,手勢題  1,信號燈  1,燈光題  1,儀表題  1,裝置題  1,路況題  1,酒駕題  1,動畫題  1,情景題 

然后我們取出這里的數據，在小程序里面顯示

核心代碼

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>

首頁點擊到分類，分類點擊到題目頁面，下一個是題目頁面，這個頁面是整個項目的核心， 所以的題目都在這個頁面進行計算，判斷。

頁面三、答題頁面  這個頁面會是最復雜的一個頁面， 涉及到，計時，判斷、記錄歷史等等操作。

之前只想到模擬考試，沒考慮到這種按照順序練習， 第二次進入，可以繼續之前的題目練習。 這里建個學習表，記錄他的順序練習相關數據，以下是數據表暫定的結構

學習表 learning

第一步：還是一樣，用iview 復制出對應組件

第二步：查詢出此類別的題目， 并且默認顯示一道題，點擊下一題，顯示數組下一個元素

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

第四步：點擊下一題計算進度條位置，判斷當前是否選擇了題目，否則提示請選擇結果。

目前做到這個一步，明天繼續。