微信小程序（看文档写实例八）微信小程序课堂宝APP实现练习模块前台

超、凢脫俗 2022-05-11 09:36 154阅读 0赞

接上篇博文，这篇主要描述练习模块的前台显示，其中包括test页面，答题detail页面以及提交答题后答卷answer页面。

# 一、练习模块test页面 #

练习页面主要展示的是当前用户的头像，昵称以及学校信息，另外还有答题信息，以及每个章节的练习信息，先来看看效果：

![70][]

grid用的是样式框架weui.wxss，其他也没有什么难度，代码如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;view class="page"&gt; &lt;view class='title'&gt; &lt;image class='header-img' src="{ {weChatUserInfo.avatarUrl}}"/&gt; &lt;view class='info'&gt; &lt;text class='nick-name'&gt;{ {weChatUserInfo.nickName}}&lt;/text&gt; &lt;view class='school-info'&gt; &lt;image class='school-img'/&gt; &lt;text class='school-name'&gt;{ {bmobUserInfo.school}}&lt;/text&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class='test-info'&gt; &lt;label class='test-info-item'&gt; &lt;text class='test-info-item-num'&gt;{ { answerInfo.correctCount}}&lt;/text&gt; &lt;text class='test-info-item-desc'&gt;答对题&lt;/text&gt; &lt;/label&gt; &lt;label class='test-info-item'&gt; &lt;text class='test-info-item-num'&gt;{ { answerInfo.itemCount}}&lt;/text&gt; &lt;text class='test-info-item-desc'&gt;总题数&lt;/text&gt; &lt;/label&gt; &lt;label class='test-info-item'&gt; &lt;text class='test-info-item-num'&gt;{ { 100*answerInfo.correctE}}%&lt;/text&gt; &lt;text class='test-info-item-desc'&gt;正确率&lt;/text&gt; &lt;/label&gt; &lt;/view&gt; &lt;view class="page__bd"&gt; &lt;view class="weui-grids"&gt; &lt;block wx:for="{ {grids}}" wx:key="unique"&gt; &lt;navigator url="{ {item.path}}" class="weui-grid" hover-class="weui-grid_active"&gt; &lt;view class="weui-grid__label" style='font-size: 18px;color:royalblue;'&gt;{ {item.chapter}}&lt;/view&gt; &lt;view class="weui-grid__label" style='color:#495056;'&gt;{ {item.name}}&lt;/view&gt; &lt;view class="weui-grid__label" style='font-size: 12px;color:rebeccapurple;'&gt;({ {item.num}})&lt;/view&gt; &lt;/navigator&gt; &lt;/block&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; </td> 
 </tr> 
 </tbody> 
</table>

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> /* pages/info/payment/payment.wxss */ @import "../../utils/weui.wxss"; .weui-form-preview{ margin-bottom: 25px; } page{ background-color: #F8F8F8; font-size: 16px; font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; } .page__bd { padding-bottom: 40px; } .title{ width: 100%; height: 110px; display: flex; flex-direction: row; padding-top: 20px; padding-left: 20px; padding-bottom: 10px; } .header-img{ width: 80px; height: 80px; border-radius: 50%; border-color: wheat; border-style: solid; border-width: 2px; } .info{ display: flex; flex-direction: column; padding-top: 20px; padding-left: 15px; } .nick-name{ font-size: 20px; color: #495056; } .school-info{ display: flex; flex-direction: row; } .school-img{ width: 25px; height: 25px; background: url("http://i.pengxun.cn/static/vzan/web/post-big-pic-09.png") 0px -275px / 100% no-repeat; vertical-align: middle; margin-right: 5px; display: inline-block; } .school-name{ font-size: 20px; color: #2f93eb; } .test-info{ width: 100%; &nbsp; display: flex; flex-direction: row; } .test-info-item{ width: 33%; display: flex; flex-direction: column; padding: 5px; border-top: 1rpx solid #D9D9D9; } .test-info-item-num{ text-align: center; font-size: 16px; color: royalblue; } .test-info-item-desc{ text-align: center; font-size: 12px; color: #495056; } .weui-grid__icon { display: block; width: 42px !important; height: 42px !important; margin: 0 auto; } </td> 
 </tr> 
 </tbody> 
</table>

# 二、答题detail页面 #

答题detail页面就是显示用户在test页面点击章节练习后跳转到答题详情页面，看效果：

![70 1][]

代码如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;!--pages/test/detail/detail.wxml--&gt; &lt;form bindsubmit="formSubmit"&gt; &lt;view class='section item-block' style='text-align: center;font-size=20px;'&gt;{ {chooseSeries}} { {chooseType}}&lt;/view&gt; &lt;view class='section item-block' wx:for="{ {chooseItemArray}}" wx:for-item="i" wx:key="unique"&gt; &lt;view class='choose-item-title'&gt;{ {i.number_id}}、{ {i.title}}&lt;/view&gt; &lt;radio-group class="radio-group" name="choose-radio-group{ {i.number_id}}"&gt; &lt;label class="radio" wx:for="{ {i.chooseItems}}" wx:key="unique"&gt; &lt;radio value="{ {item.name}}" /&gt; { {item.value}} &lt;/label&gt; &lt;/radio-group&gt; &lt;/view&gt; &lt;view class='section item-block'&gt; &lt;button formType="submit" class='btn-commit'&gt;提交&lt;/button&gt; &lt;/view&gt; &lt;/form&gt; </td> 
 </tr> 
 </tbody> 
</table>

wxss就是前面给的main页面的样式。

# 三、答卷answer页面 #

直接看效果：

![70 2][]

代码如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;!--pages/test/answer/answer.wxml--&gt; &lt;view class='section item-block' style='text-align: center;font-size=20px;'&gt;{ {mAnswers.chooseSeries}} { {mAnswers.chooseType}} (答卷)&lt;/view&gt; &lt;view class='section item-block' wx:for="{ {mAnswers.chooseItemArray}}" wx:for-item="i" wx:for-index="indexChoose" wx:key="unique"&gt; &lt;view class='choose-item-title'&gt;{ {i.number_id}}、{ {i.title}}&lt;/view&gt; &lt;radio-group class="radio-group" name="choose-radio-group{ {i.number_id}}"&gt; &lt;label class="radio" wx:for="{ {i.chooseItems}}" wx:key="unique"&gt; &lt;radio value="{ {item.name}}" disabled="true" checked='{ {item.name==i.answer}}' /&gt; { {item.value}} &lt;/label&gt; &lt;/radio-group&gt; &lt;view class='choose-item-title ' style='color:green;' wx:if='{ {mAnswers.answers[indexChoose].result}}'&gt;你的答案：{ {mAnswers.answers[indexChoose].answer}} 正确答案：{ {i.answer}}&lt;/view&gt; &lt;view class='choose-item-title ' style='color:red;' wx:else&gt;你的答案：{ {mAnswers.answers[indexChoose].answer}} 正确答案：{ {i.answer}}&lt;/view&gt; &lt;view class='choose-item-title ' style='color:green;'&gt;解析：{ {i.complain}}&lt;/view&gt; &lt;/view&gt; &lt;view class='section item-block' style='text-align: center;font-size=20px;color:red;'&gt;答题共{ {mAnswers.answers.length}}题，你答对{ {correctAnswerCount}}题，得分{ {correctAnswerCount*(100/mAnswers.answers.length)}}，请继续努力O(∩_∩)O&lt;/view&gt; </td> 
 </tr> 
 </tbody> 
</table>

样式也是main.wxss

[70]: /images/20220511/39ff6cb854f84fc98857e326dc3a07e2.png
[70 1]: /images/20220511/7ed6087e4dc64f55a62fb5ae030f8937.png
[70 2]: /images/20220511/5f8ac3d5877a4a20adb3e3cdab8161da.png