部分項(xiàng)目截圖

開發(fā)試題分類頁(yè)面

新增home頁(yè)面

pages目錄下新建home目錄，并添加4個(gè)文件，如圖所示：

其中： home.js

// pages/home/home.jsPage({ data: {? }, onLoad: function (options) {? }, toTestPage: function(e){   let testId = e.currentTarget.dataset['testid'];   wx.navigateTo({     url: '../test/test?testId=' testId   }) }})

home.wxml

<!--pages/home/home.wxml--><view class="page"> <view class="page-title">請(qǐng)選擇試題：</view> <view class="flex-box">   <view class="flex-item"><view class="item bc_green" bindtap="toTestPage" data-testId="18">IT知識(shí)</view></view>   <view class="flex-item"><view class="item bc_red" bindtap="toTestPage" data-testId="15">游戲知識(shí)</view></view>   <view class="flex-item"><view class="item bc_yellow" bindtap="toTestPage" data-testId="21">體育知識(shí)</view></view>   <view class="flex-item"><view class="item bc_blue" bindtap="toTestPage" data-testId="27">動(dòng)物知識(shí)</view></view>   <view class="flex-item item-last"><view class="item bc_green" bindtap="toTestPage" data-testId="0">綜合知識(shí)</view></view> </view></view>?

home.json

{ "navigationBarTitleText": "試題分類", "usingComponents": {}}

home.wxss

/* pages/home/home.wxss */.page-title { padding-top: 20rpx; padding-left: 40rpx; font-size: 16px;}.flex-box { display: flex; align-items:center; flex-wrap: wrap; justify-content: space-between; padding: 20rpx; box-sizing:border-box;}.flex-item { width: 50%; height: 200rpx; padding: 20rpx; box-sizing:border-box;}.item { width:100%; height:100%; border-radius:8rpx; display: flex; align-items:center; justify-content: center; color: #fff;}.item-last { flex: 1;}

修改app.json，注意：pages/home/home一定要放到pages數(shù)組的最前，以成為首頁(yè)。

{ "pages": [   "pages/home/home",   "pages/index/index",   "pages/logs/logs", ], "window": {   "backgroundTextStyle": "light",   "navigationBarBackgroundColor": "#fff",   "navigationBarTitleText": "WeChat",   "navigationBarTextStyle": "black" }, "style": "v2", "sitemapLocation": "sitemap.json"}

修改app.wxss，定義全局樣式

/**app.wxss**/.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;} ?.bc_green{   background-color: #09BB07;}.bc_red{   background-color: #F76260;}.bc_blue{   background-color: #10AEFF;}.bc_yellow{   background-color: #FFBE00;}.bc_gray{   background-color: #C9C9C9;}

運(yùn)行結(jié)果

開發(fā)試題展示功能

新增test頁(yè)面

pages目錄下新建test目錄，并添加4個(gè)文件，如圖所示：

修改test.js

// pages/test/test.jsPage({? /**   * 頁(yè)面的初始數(shù)據(jù)   */ data: {   test_id:0 },? /**   * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載   */ onLoad: function (options) {   this.setData({test_id:options.testId}) } })?

修改test.wxml

<!--pages/test/test.wxml--><text>我是{{test_id}}</text>?

運(yùn)行結(jié)果

在試題分類頁(yè)點(diǎn)擊某一分類，跳轉(zhuǎn)到試題頁(yè)，試題頁(yè)顯示分類id

Mock試題數(shù)據(jù)

項(xiàng)目目錄下新增data目錄，data目錄新增json.js，存放我們的試題模擬數(shù)據(jù)。

var json = { "18": [ { "question": "This mobile OS held the largest market share in 2012.?", "option": { "A": "iOS", "B": "Android", "C": "BlackBerry", "D": "Symbian" }, "true": "A", "scores": 10, "checked": false }, { "question": "This mobile OS held the largest market share in 2012.?", "option": { "A": "iOS", "B": "Android", "C": "BlackBerry", "D": "Symbian" }, "true": "A", "scores": 10, "checked": false } ], "0": [ { "question": "This mobile OS held the largest market share in 2012.?", "option": { "A": "iOS", "B": "Android", "C": "BlackBerry", "D": "Symbian" }, "true": "A", "scores": 10, "checked": false }, { "question": "This mobile OS held the largest market share in 2012.?", "option": { "A": "iOS", "B": "Android", "C": "BlackBerry", "D": "Symbian" }, "true": "A", "scores": 10, "checked": false } ]}module.exports = { questionList: json}

修改app.js

var jsonList = require('data/json.js');App({... }, globalData: { questionList: jsonList.questionList, // 拿到答題數(shù)據(jù) // questionList:{}, quizCategory:{ "0": "綜合知識(shí)", "18": "IT知識(shí)", "21": "體育知識(shí)", "15": "游戲知識(shí)", "27":"動(dòng)物知識(shí)", } }})

修改test.js

// import he from "he";var app = getApp();Page({ data: { bIsReady: false, // 頁(yè)面是否準(zhǔn)備就緒 index: 0, // 題目序列 chooseValue: [], // 選擇的答案序列 }, shuffle(array) { return array.sort(() => Math.random() - 0.5); }, /** * 生成一個(gè)從 start 到 end 的連續(xù)數(shù)組 * @param start * @param end */ generateArray: function (start, end) { return Array.from(new Array(end 1).keys()).slice(start) }, onLoad: function (options) { wx.setNavigationBarTitle({ title: options.testId }) // 動(dòng)態(tài)設(shè)置導(dǎo)航條標(biāo)題 this.setData({ questionList: app.globalData.questionList[options.testId], // 拿到答題數(shù)據(jù) testId: options.testId // 課程ID }) let countArr = this.generateArray(0, this.data.questionList.length - 1); // 生成題序 this.setData({ bIsReady: true, shuffleIndex: this.shuffle(countArr).slice(0, countArr.length) // 生成隨機(jī)題序 [2,0,3] 并截取num道題 }) }, /* * 單選事件 */ radioChange: function (e) { console.log('checkbox發(fā)生change事件，攜帶value值為：', e.detail.value) this.data.chooseValue[this.data.index] = e.detail.value; console.log(this.data.chooseValue); }, /* * 退出答題 按鈕 */ outTest: function () { wx.showModal({ title: '提示', content: '你真的要退出答題嗎？', success(res) { if (res.confirm) { console.log('用戶點(diǎn)擊確定') wx.switchTab({ url: '../home/home' }) } else if (res.cancel) { console.log('用戶點(diǎn)擊取消') } } }) }, /* * 下一題/提交 按鈕 */ nextSubmit: function () { // 如果沒有選擇 if (this.data.chooseValue[this.data.index] == undefined) { wx.showToast({ title: '請(qǐng)選擇至少一個(gè)答案!', icon: 'none', duration: 2000, success: function () { return; } }) return; } // 判斷是不是最后一題 if (this.data.index < this.data.shuffleIndex.length - 1) { // 渲染下一題 this.setData({ index: this.data.index 1 }) } else { console.log('ok') } }})

test.wxml

<!--pages/test/test.wxml--><view wx:if="{{bIsReady}}" class="page"> <!--標(biāo)題--> <view class='page__hd'> <view class="page__title"> {{index 1}}、{{questionList[shuffleIndex[index]].question}} （{{questionList[shuffleIndex[index]].scores}}分） </view> </view> <!--內(nèi)容--> <view class="page__bd"> <radio-group class="radio-group" bindchange="radioChange"> <label class="radio my-choosebox" wx:for="{{questionList[shuffleIndex[index]].option}}" wx:for-index="key" wx:for-item="value"> <radio value="{{key}}" checked="{{questionList[shuffleIndex[index]].checked}}"/>{{key}}、{{value}} </label> </radio-group> </view> <!--按鈕--> <view class='page_ft'> <view class='mybutton'> <button bindtap='nextSubmit' wx:if="{{index == questionList.length-1}}">提交</button> <button bindtap='nextSubmit' wx:else>下一題</button> <text bindtap='outTest' class="toindex-btn">退出答題</text> </view> </view></view>

test.wxss

/* pages/test/test.wxss */.page { padding: 20rpx;}.page__bd { padding: 20rpx;}.my-choosebox { display: block; margin-bottom: 20rpx;}.toindex-btn { margin-top: 20rpx; display:inline-block; line-height:2.3; font-size:13px; padding:0 1.34em; color:#576b95; text-decoration:underline; float: right;}

項(xiàng)目運(yùn)行結(jié)果：

請(qǐng)求真實(shí)數(shù)據(jù)

修改test.js

getQuestions(testId) { // 顯示標(biāo)題欄加載效果 wx.showNavigationBarLoading(); wx.request({ // url: 'https://opentdb.com/api.php?amount=10&difficulty=easy&type=multiple&category=' testId, url: 'https://opentdb.com/api.php?amount=10&difficulty=easy&type=multiple&category=' testId, method: "GET", success: res => { if (res.data.response_code === 0) { this.setData({ questionList: this.parseQuestion(res.data.results), // 拿到答題數(shù)據(jù) testId: testId // 課程ID }) console.log(this.data.questionList); app.globalData.questionList[testId] = this.data.questionList let count = this.generateArray(0, this.data.questionList.length - 1); // 生成題序 this.setData({ bIsReady: true, shuffleIndex: this.shuffle(count).slice(0, 10) // 生成隨機(jī)題序 [2,0,3] 并截取num道題 }) } else { ; } // 停止加載效果 wx.stopPullDownRefresh(); wx.hideNavigationBarLoading(); }, fail: err => { // 停止加載效果 wx.stopPullDownRefresh(); wx.hideNavigationBarLoading(); } }); }, onLoad: function (options) { this.getQuestions(options.testId) console.log(options); wx.setNavigationBarTitle({ title: app.globalData.quizCategory[options.testId] }) // 動(dòng)態(tài)設(shè)置導(dǎo)航條標(biāo)題 },

解析返回的數(shù)據(jù)：

// 主題列表數(shù)據(jù)模型 parseQuestion(aList) { let aTopicList = []; if (!aList || (aList && !Array.isArray(aList))) { aList = []; } aTopicList = aList.map(oItem => { const answers = [oItem.correct_answer, oItem.incorrect_answers].flat() let optionArr = ['A', 'B', 'C', 'D'] let options = {} let optionArrShuffle = this.shuffle(optionArr) for (let i = 0; i < answers.length; i ) { options[optionArr[i]] = String(answers[i]); } const ordered_options = {}; Object.keys(options).sort().forEach(function (key) { ordered_options[key] = options[key]; }); return { "question": String(oItem.question), // id "scores": 10, "checked": false, "option": ordered_options, "true": optionArr[0] }; }); return aTopicList; },

這里解析的原因是，接口返回的json數(shù)據(jù)和我們自己設(shè)計(jì)的數(shù)據(jù)格式略有不同，我們要轉(zhuǎn)換成自己的數(shù)據(jù)格式： 接口返回的數(shù)據(jù)格式：

{ "response_code": 0, "results": [{ "category": "Science: Computers", "type": "multiple", "difficulty": "easy", "question": "The numbering system with a radix of 16 is more commonly referred to as ", "correct_answer": "Hexidecimal", "incorrect_answers": ["Binary", "Duodecimal", "Octal"] }, { "category": "Science: Computers", "type": "multiple", "difficulty": "easy", "question": "This mobile OS held the largest market share in 2012.", "correct_answer": "iOS", "incorrect_answers": ["Android", "BlackBerry", "Symbian"] }, { "category": "Science: Computers", "type": "multiple", "difficulty": "easy", "question": "How many values can a single byte represent?", "correct_answer": "256", "incorrect_answers": ["8", "1", "1024"] }, { "category": "Science: Computers", "type": "multiple", "difficulty": "easy", "question": "In computing, what does MIDI stand for?", "correct_answer": "Musical Instrument Digital Interface", "incorrect_answers": ["Musical Interface of Digital Instruments", "Modular Interface of Digital Instruments", "Musical Instrument Data Interface"] }, { "category": "Science: Computers", "type": "multiple", "difficulty": "easy", "question": "In computing, what does LAN stand for?", "correct_answer": "Local Area Network", "incorrect_answers": ["Long Antenna Node", "Light Access Node", "Land Address Navigation"] }]}

我們自己的數(shù)據(jù)格式：

var json = { "18": [ { "question": "This mobile OS held the largest market share in 2012.?", "option": { "A": "iOS", "B": "Android", "C": "BlackBerry", "D": "Symbian" }, "true": "A", "scores": 10, "checked": false }, { "question": "This mobile OS held the largest market share in 2012.?", "option": { "A": "iOS", "B": "Android", "C": "BlackBerry", "D": "Symbian" }, "true": "A", "scores": 10, "checked": false } ], "0": [ { "question": "This mobile OS held the largest market share in 2012.?", "option": { "A": "iOS", "B": "Android", "C": "BlackBerry", "D": "Symbian" }, "true": "A", "scores": 10, "checked": false }, { "question": "This mobile OS held the largest market share in 2012.?", "option": { "A": "iOS", "B": "Android", "C": "BlackBerry", "D": "Symbian" }, "true": "A", "scores": 10, "checked": false } ]}

注意：

開發(fā)期間：不校驗(yàn)合法域名，web-view…..這里不要勾選。

引入第三方庫(kù)

細(xì)心的朋友可能會(huì)發(fā)現(xiàn)，有些題目中有亂碼，如下圖所示'：

有一個(gè)很好的第三方庫(kù)He可以處理這個(gè)問題。

我們需要使用npm導(dǎo)入一個(gè)第三方庫(kù)處理這個(gè)問題，大家會(huì)學(xué)習(xí)到在小程序開發(fā)中如何使用npm引入第三方庫(kù)。

項(xiàng)目根目錄下新建package.json文件

{ "name": "wechatanswer-master", "version": "1.0.0", "description": "答題類微信小程序", "main": "app.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "repository": { "type": "git", "url": "https://gitee.com/kamiba/my_quiz_wechat_app.git" }, "author": "", "license": "ISC", "dependencies": { "he": "^1.2.0" }}

2、執(zhí)行npm install –production xxx，這個(gè)xxx就是你想使用的npm 包。此時(shí)在當(dāng)前文件夾下會(huì)生成一個(gè)node_modules文件夾。PS：此處請(qǐng)務(wù)必使用–production選項(xiàng)，可以減少安裝一些業(yè)務(wù)無關(guān)的 npm 包，從而減少整個(gè)小程序包的大小。

npm install --production he

3、在微信開發(fā)者工具–>工具–>構(gòu)建npm，此時(shí)會(huì)生成一個(gè)miniprogram_npm文件夾。

4、構(gòu)建完成后就可以使用 npm 包了。首先把使用npm模塊勾起來，然后在js文件中引入即可。

然后修改test.js

import he from "he"; // 主題列表數(shù)據(jù)模型 parseQuestion(aList) { let aTopicList = []; if (!aList || (aList && !Array.isArray(aList))) { aList = []; } aTopicList = aList.map(oItem => { const answers = [oItem.correct_answer, oItem.incorrect_answers].flat() let optionArr = ['A', 'B', 'C', 'D'] let options = {} let optionArrShuffle = this.shuffle(optionArr) for (let i = 0; i < answers.length; i ) { options[optionArr[i]] = he.decode(String(answers[i])); } const ordered_options = {}; Object.keys(options).sort().forEach(function (key) { ordered_options[key] = options[key]; }); return { "question": he.decode(String(oItem.question)), // id "scores": 10, "checked": false, "option": ordered_options, "true": optionArr[0] }; }); return aTopicList; },

上面和以前有三處修改

import he from "he";options[optionArr[i]] = he.decode(String(answers[i]));"question": he.decode(String(oItem.question)),

計(jì)算用戶得分，記錄錯(cuò)題

修改test.js

Page({ data: { bIsReady: false, // 頁(yè)面是否準(zhǔn)備就緒 index: 0, // 題目序列 chooseValue: [], // 選擇的答案序列 totalScore: 100, // 總分 wrong: 0, // 錯(cuò)誤的題目數(shù)量 wrongListSort: [], // 錯(cuò)誤的題目集合 },

/* * 下一題/提交 按鈕 */ nextSubmit: function () { // 如果沒有選擇 if (this.data.chooseValue[this.data.index] == undefined) { wx.showToast({ title: '請(qǐng)選擇至少一個(gè)答案!', icon: 'none', duration: 2000, success: function () { return; } }) return; } // 判斷答案是否正確 this.chooseError(); // 判斷是不是最后一題 if (this.data.index < this.data.shuffleIndex.length - 1) { // 渲染下一題 this.setData({ index: this.data.index 1 }) } else { let wrongListSort = JSON.stringify(this.data.wrongListSort); let chooseValue = JSON.stringify(this.data.chooseValue); let shuffleIndex = JSON.stringify(this.data.shuffleIndex); console.log('wrongListSort:' wrongListSort) wx.navigateTo({ url: '../results/results?totalScore=' this.data.totalScore '&shuffleIndex=' shuffleIndex '&chooseValue=' chooseValue '&wrongListSort=' wrongListSort '&testId=' this.data.testId }) // 設(shè)置緩存 var logs = wx.getStorageSync('logs') || [] let logsList = { "date": Date.now(), "testId": app.globalData.quizCategory[this.data.testId], "score": this.data.totalScore } logs.unshift(logsList); wx.setStorageSync('logs', logs); } }, /** 錯(cuò)題處理*/ chooseError: function () { var trueValue = this.data.questionList[this.data.shuffleIndex[this.data.index]]['true']; var chooseVal = this.data.chooseValue[this.data.index]; console.log('選擇了' chooseVal '答案是' trueValue); if (chooseVal.toString() != trueValue.toString()) { console.log('錯(cuò)了'); this.data.wrong ; this.data.wrongListSort.push(this.data.index); this.setData({ totalScore: this.data.totalScore - this.data.questionList[this.data.shuffleIndex[this.data.index]]['scores'] // 扣分操作 }) } },

實(shí)現(xiàn)結(jié)果展示頁(yè)面

pages目錄下新增page—results

results.js

// pages/results/results.jsvar app = getApp();Page({ data: { totalScore: null, // 分?jǐn)?shù) shuffleIndex: [], // 錯(cuò)誤的題數(shù)-亂序 wrongListSort: [], // 錯(cuò)誤的題數(shù)-正序 chooseValue: [], // 選擇的答案 remark: ["好極了！你很棒棒哦", "哎喲不錯(cuò)哦", "別灰心，繼續(xù)努力哦！"], // 評(píng)語(yǔ) modalShow: false }, onLoad: function (options) { console.log(options); wx.setNavigationBarTitle({ title: app.globalData.quizCategory[options.testId] }) // 動(dòng)態(tài)設(shè)置導(dǎo)航條標(biāo)題 let shuffleIndex = JSON.parse(options.shuffleIndex); let wrongListSort = JSON.parse(options.wrongListSort); let chooseValue = JSON.parse(options.chooseValue); this.setData({ totalScore: options.totalScore != "" ? options.totalScore : "無", shuffleIndex: shuffleIndex, wrongListSort: wrongListSort, chooseValue: chooseValue, questionList: app.globalData.questionList[options.testId], // 拿到答題數(shù)據(jù) testId: options.testId // 課程ID }) console.log(this.data.chooseValue); }, // 查看錯(cuò)題 toView: function () { // 顯示彈窗 this.setData({ modalShow: true }) }, // 返回首頁(yè) toIndex: function () { wx.switchTab({ url: '../home/home' }) }})

results.json

{ "navigationBarTitleText": "WeChatTest", "usingComponents": { "wrong-modal":"/components/wrongModal/wrongModal" }}

results.wxml

<view class="page"> <!--標(biāo)題--> <view class='page-head'> <view class="page-title"> 答題結(jié)束！您的得分為: </view> <!--分?jǐn)?shù)--> <view class='page-score'> <text class="score-num">{{totalScore}}</text> <text class="score-text">分</text> </view> <text class="score-remark">{{totalScore==100?remark[0]:(totalScore>=80?remark[1]:remark[2])}}</text> <!-- 評(píng)價(jià) --> </view> <!--查詢錯(cuò)誤--> <view class='page-footer'> <view class="wrong-view" wx:if="{{wrongListSort.length > 0}}"> <text>錯(cuò)誤的題數(shù)：</text> <text wx:for="{{wrongListSort}}">[{{item-0 1}}]</text> 題 </view> <view class="wrong-btns"> <button type="default" bindtap="toView" hover-class="other-button-hover" class="wrong-btn" wx:if="{{wrongListSort.length > 0}}"> 點(diǎn)擊查看 </button> <button type="default" bindtap="toIndex" hover-class="other-button-hover" class="wrong-btn"> 返回首頁(yè) </button> </view> </view> <wrong-modal modalShow="{{modalShow}}" shuffleIndex="{{shuffleIndex}}" wrongListSort="{{wrongListSort}}" chooseValue="{{chooseValue}}" questionList="{{questionList}}" testId="{{testId}}" ></wrong-modal></view>

results.wxss

/* pages/results/results.wxss */.page { padding: 20rpx;}.page-head { text-align: center;}.page-title {}.page-score { display: flex; justify-content: center; align-items: flex-end; padding-top:40rpx; padding-bottom:40rpx;}.score-num { font-size:100rpx;}.page-footer { margin-top:60rpx; text-align: center;}.wrong-btns { display:flex; align-items:center; justify-content:center; margin-top: 60rpx;}.wrong-btn { margin-left:20rpx; margin-right:20rpx; height:70rpx; line-height:70rpx; font-size:14px;}

實(shí)現(xiàn)錯(cuò)題查看頁(yè)面

項(xiàng)目目錄下新增components目錄。components目錄下新增wrongModal目錄，wrongModal目錄下新增page—wrongModal

wrongModal.js

// components/wrongModal/wrongModal.jsComponent({ /** * 組件的屬性列表 */ properties: { // 是否顯示 modalShow: { type: Boolean, value: false }, // 題庫(kù) questionList: { type: Array, value: [] }, // 課程ID testId: { type: String, value: '101-1' }, // 題庫(kù)亂序index shuffleIndex: { type: Array, value: [] }, // 錯(cuò)題題數(shù)-正序 wrongListSort: { type: Array, value: [] }, // 選擇的答案 chooseValue: { type: Array, value: [] } }, /** * 組件的初始數(shù)據(jù) */ data: { index: 0 // wrongList的index }, /** * 組件所在頁(yè)面的生命周期 */ pageLifetimes: { show: function () { // 頁(yè)面被展示 console.log('show') console.log(this.data.questionList) // console.log(this.data.wrongList) }, hide: function () { // 頁(yè)面被隱藏 }, resize: function (size) { // 頁(yè)面尺寸變化 } }, /** * 組件的方法列表 */ methods: { // 下一題 next: function(){ if (this.data.index < this.data.wrongListSort.length - 1){ // 渲染下一題 this.setData({ index: this.data.index 1 }) } }, // 關(guān)閉彈窗 closeModal: function(){ this.setData({ modalShow: false }) }, // 再來一次 again: function(){ wx.reLaunch({ url: '../test/test?testId=' this.data.testId }) }, // 返回首頁(yè) toIndex: function () { wx.reLaunch({ url: '../home/home' }) }, }})

wrongModal.json

{ "component": true, "usingComponents": {}}

wrongModal.wxml

<!--components/wrongModal/wrongModal.wxml--><view class="modal-page" wx:if="{{modalShow}}"> <view class="modal-mask" bindtap="closeModal"></view> <!-- 內(nèi)容 --> <view class="modal-content"> <view class="modal-title"> 題目: {{questionList[shuffleIndex[wrongListSort[index]]].question}} </view> <view class="modal-body"> <radio-group class="radio-group" bindchange="radioChange"> <label class="radio my-choosebox" wx:for="{{questionList[shuffleIndex[wrongListSort[index]]].option}}" wx:for-index="key" wx:for-item="value"> <radio disabled="{{true}}" value="{{key}}" checked="{{questionList[shuffleIndex[wrongListSort[index]]].checked}}"/>{{key}}、{{value}} </label> </radio-group> </view> <!-- 答案解析 --> <view class="modal-answer"> <text class="answer-text wrong-answer"> 您的答案為 {{chooseValue[wrongListSort[index]]}} </text> <text class="answer-text true-answer"> 正確答案為 {{questionList[shuffleIndex[wrongListSort[index]]]['true']}} </text> </view> <!-- 操作按鈕 --> <view class="modal-button"> <view wx:if="{{index == wrongListSort.length-1}}" class="modal-btns"> <button bindtap='again' class="modal-btn">再來一次</button> <button bindtap='toIndex' class="modal-btn">返回首頁(yè)</button> </view> <button bindtap='next' wx:else class="modal-btn">下一題</button> </view> </view></view>

wrongModal.wxss

/* components/wrongModal/wrongModal.wxss */.modal-mask { position:fixed; width:100%; height:100%; top:0; left:0; z-index:10; background: #000; opacity: 0.5; overflow: hidden;}.modal-page { display:flex; align-items:center; justify-content:center; width:100%; height:100%; top:0; position:absolute; left:0;}.modal-content { width: 80%; min-height: 80%; background: #fff; border-radius: 8rpx; z-index:11; padding: 20rpx;}.modal-title { font-size: 14px;}.modal-body { padding: 20rpx;}.my-choosebox { display: block; margin-bottom: 20rpx; font-size: 14px;}.modal-answer { display: flex;}.answer-text { font-size: 14px; margin-right: 20rpx;}.modal-button { display: flex; align-items:center; justify-content:center; margin-top:60rpx;}.modal-btns { display: flex; align-items:center; justify-content:center;}.modal-btn { margin-left:20rpx; margin-right:20rpx; height:70rpx; line-height:70rpx; font-size:12px;}

實(shí)現(xiàn)成績(jī)記錄頁(yè)面

修改項(xiàng)目目錄下的app.json，增加底部導(dǎo)航欄

{ "pages": [ "pages/home/home", "pages/logs/logs", "pages/test/test", "pages/results/results", "pages/index/index" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "tabBar": { "color": "#666666", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/home/home", "iconPath": "image/icon_component.png", "selectedIconPath": "image/icon_component_HL.png", "text": "答題" }, { "pagePath": "pages/logs/logs", "iconPath": "image/icon_API.png", "selectedIconPath": "image/icon_API_HL.png", "text": "記錄" } ] }, "sitemapLocation": "sitemap.json"}

項(xiàng)目目錄下新增image文件夾，并添加以下文件，具體文件請(qǐng)下載源碼獲取：

修改pages目錄下logs頁(yè)面

logs.js

//logs.jsconst util = require('../../utils/util.js')Page({ data: { logs: [], }, onShow: function() { this.setData({ logs: this.formatLogs() }) }, // 拿到緩存并格式化日期數(shù)據(jù) formatLogs: function(){ let newList = []; (wx.getStorageSync('logs') || []).forEach(log => { if(log.date){ log['date'] = util.formatTime(new Date(log.date)); newList.push(log); } }) return newList; }})

logs.json

{ "navigationBarTitleText": "查看日志", "usingComponents": {}}

logs.wxml

<!--logs.wxml--><view class="page"> <view class="table" wx:if="{{logs.length>0}}"> <view class="tr bg-w"> <view class="th first">時(shí)間</view> <view class="th">試題</view> <view class="th ">得分</view> </view> <block wx:for="{{logs}}" wx:for-item="item"> <view class="tr"> <view class="td first">{{item.date}}</view> <view class="td">{{item.testId}}</view> <view class="td">{{item.score}}</view> </view> </block> </view> <view class="no-record" wx:else> <image src="/image/wechat.png" class="no-image"></image> <text class="no-text">沒有數(shù)據(jù)哦~</text> </view></view>

logs.wxss

.table { border: 0px solid darkgray; font-size: 12px;}.tr { display: flex; width: 100%; justify-content: center; height: 2rem; align-items: center;}.td { width:40%; justify-content: center; text-align: center;}.bg-w{ background: snow;}.th { width: 40%; justify-content: center; background: #3366FF; color: #fff; display: flex; height: 2rem; align-items: center;}.first { flex:1 0 auto;}.no-record { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center;}.no-image { width: 200rpx; height: 200rpx; margin-top: 200rpx; margin-bottom: 40rpx;}.no-text { font-size: 16px; color: #ccc; display: block;}

修改test.js

/* * 下一題/提交 按鈕 */ nextSubmit: function () { // 如果沒有選擇 ..... // 設(shè)置緩存 var logs = wx.getStorageSync('logs') || [] let logsList = { "date": Date.now(), "testId": app.globalData.quizCategory[this.data.testId], "score": this.data.totalScore } logs.unshift(logsList); wx.setStorageSync('logs', logs); } },

最終項(xiàng)目結(jié)構(gòu)