前言

今天接到公司通知要求仿照小程式頭腦王者的模型上線一個自己的單詞APP 所以就花了兩個小時的時候寫了一個demo

思路

要想實現答題系統，首先要跟後臺確定題庫返回資料的型別和結構 經過跟後臺協商，決定使用下面的資料結構型別

題目的資料結構型別：

questionList: [
	{
		question: 'test1',
		answer: '測試1',
		answerList: ['測試1', '測試2', '測試3', '測試4'],
	}, {
		question: 'test2',
		answer: '測試2',
		answerList: ['測試1', '測試2', '測試3', '測試4']
	}
]
 

解決完資料結構型別就是要考慮靜態頁面如何來寫了 1、首先要考慮的是頁面頂部的題目編號圖片，這個要跟UI進行協調。選擇合適的方式來讓圖片顯示題目編號，這樣使用者的體驗會更佳 2、其次就是題目頂部的定時器了，這個定時器的用處就是來顯示使用者剩餘的答題時間（如果使用者在規定的時間內沒有選擇正確的答案，答題就立即結束）。那麼當頁面載入（onLoad）的時候就應該初始化一個定時器（setInterval），並且這個定時器的顯示時間應該是data裡面的一個數據，因為後期要進行定時器時間的改變 3、解決完定時器就剩下頁面的重中之重題目的邏輯了，題目的資料我同樣是在頁面載入（onLoad）的時候初始化的，預設初始化第一題（題目編號應在 data

裡有一個數據來定義，預設是0） 4、搞定了題目的初始化，剩下的就是邏輯了！本人邏輯屬於比較簡單粗暴型別的，我準備了除定時器、題目編號、題目集合外，用了另外十個變數來分別作為使用者點選按鈕的樣式（4個）、問題的答案（4個）、使用者選擇的答案、問題的正確答案

data裡的初始化資料：

data: {
		time: 10,  //時間
		button1: null, //按鈕1的類名
		button2: null, //按鈕2的類名
		button3: null, //按鈕3的類名
		button4: null, //按鈕4的類名
		questionNum: 0, //題目編號
		userAnswer: null, //使用者選擇的答案
		questionAnswer: null, //題目的正確答案
		questionAnswer1: null, //題目的答案1
		questionAnswer2: null, //題目的答案2
		questionAnswer3: null, //題目的答案3
		questionAnswer4: null, //題目的答案4
		//題目列表
		//在頁面載入（onload）的時候直接發起請求，用後臺返回的資料進行替換
		questionList: []
	},
 

在頁面載入（onLoad）時需要做的事件如下： 1、初始化定時器的時間 2、初始化題目的編號 3、發起請求（wx.request）訪問後臺介面請求資料，然後替換 data 裡的questionList

在頁面顯示（onShow）時需要做的事件如下： 1、啟動定時器，每秒執行一次，每次讓時間減去一秒 2、判斷定時器的時間，如果小於0就直接讓遊戲結束

在按鈕的點選事件（answerClick）時需要做的事件如下： 1、從 data 裡取出當前題目的編號，來判斷當前是第幾題 2、獲得使用者點選的按鈕的下標（頁面上給按鈕繫結data-index分別賦值0-3即可） 3、獲得使用者點選的按鈕的答案（頁面上給按鈕繫結data-answer分別賦值questionList中的answerList[0-3]即可） 4、把使用者選擇的答案和題目的正確答案賦值給data裡的userAnswer和questionAnswer 5、判斷使用者選擇的答案是否正確（判斷userAnswer和questionAnswer的值）如果相等，直接讓使用者點選的按鈕變為綠色然後跳轉下一題即可。如果不相等就通過switch執行使用者點選的按鈕的index讓此按鈕變為紅色。 6、判斷是否是最後一題，如果不是就跳轉到下一題（讓questionNum+1），並且重置所有的按鈕樣式、使用者選擇的答案和題目的正確答案。如果是就直接結束答題

實現

未完待續…