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

一、练习模块test页面

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

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

<view class="page">

<view class='title'>

<image class='header-img' src="{{weChatUserInfo.avatarUrl}}"/>

<view class='info'>

<text class='nick-name'>{{weChatUserInfo.nickName}}</text>

<view class='school-info'>

<image class='school-img'/>

<text class='school-name'>{{bmobUserInfo.school}}</text>

</view>

</view>

</view>

<view class='test-info'>

<label class='test-info-item'>

<text class='test-info-item-num'>{{ answerInfo.correctCount}}</text>

<text class='test-info-item-desc'>答对题</text>

</label>

<label class='test-info-item'>

<text class='test-info-item-num'>{{ answerInfo.itemCount}}</text>

<text class='test-info-item-desc'>总题数</text>

</label>

<label class='test-info-item'>

<text class='test-info-item-num'>{{ 100*answerInfo.correctE}}%</text>

<text class='test-info-item-desc'>正确率</text>

</label>

</view>

<view class="page__bd">

<view class="weui-grids">

<block wx:for="{{grids}}" wx:key="unique">

<navigator url="{{item.path}}" class="weui-grid" hover-class="weui-grid_active">

<view class="weui-grid__label" style='font-size: 18px;color:royalblue;'>{{item.chapter}}</view>

<view class="weui-grid__label" style='color:#495056;'>{{item.name}}</view>

<view class="weui-grid__label" style='font-size: 12px;color:rebeccapurple;'>({{item.num}})</view>

</navigator>

</block>

</view>

</view>

</view>

/* 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%;

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;

}

二、答题detail页面

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

代码如下：

<!--pages/test/detail/detail.wxml-->

<form bindsubmit="formSubmit">

<view class='section item-block' style='text-align: center;font-size=20px;'>{{chooseSeries}} {{chooseType}}</view>

<view class='section item-block' wx:for="{{chooseItemArray}}" wx:for-item="i" wx:key="unique">

<view class='choose-item-title'>{{i.number_id}}、{{i.title}}</view>

<radio-group class="radio-group" name="choose-radio-group{{i.number_id}}">

<label class="radio" wx:for="{{i.chooseItems}}" wx:key="unique">

<radio value="{{item.name}}" /> {{item.value}}

</label>

</radio-group>

</view>

<view class='section item-block'>

<button formType="submit" class='btn-commit'>提交</button>

</view>

</form>

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

三、答卷answer页面

直接看效果：

代码如下：

<!--pages/test/answer/answer.wxml-->

<view class='section item-block' style='text-align: center;font-size=20px;'>{{mAnswers.chooseSeries}} {{mAnswers.chooseType}} (答卷)</view>

<view class='section item-block' wx:for="{{mAnswers.chooseItemArray}}" wx:for-item="i" wx:for-index="indexChoose" wx:key="unique">

<view class='choose-item-title'>{{i.number_id}}、{{i.title}}</view>

<radio-group class="radio-group" name="choose-radio-group{{i.number_id}}">

<label class="radio" wx:for="{{i.chooseItems}}" wx:key="unique">

<radio value="{{item.name}}" disabled="true" checked='{{item.name==i.answer}}' /> {{item.value}}

</label>

</radio-group>

<view class='choose-item-title ' style='color:green;' wx:if='{{mAnswers.answers[indexChoose].result}}'>你的答案：{{mAnswers.answers[indexChoose].answer}} 正确答案：{{i.answer}}</view>

<view class='choose-item-title ' style='color:red;' wx:else>你的答案：{{mAnswers.answers[indexChoose].answer}} 正确答案：{{i.answer}}</view>

<view class='choose-item-title ' style='color:green;'>解析：{{i.complain}}</view>

</view>

<view class='section item-block' style='text-align: center;font-size=20px;color:red;'>答题共{{mAnswers.answers.length}}题，你答对{{correctAnswerCount}}题，得分{{correctAnswerCount*(100/mAnswers.answers.length)}}，请继续努力O(∩_∩)O</view>

样式也是main.wxss

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

  1. 微信小程序（看文档写实例三）微信小程序课堂宝APP实现整体界面框架及首页布局

    一.首页布局简单思路 回顾上一篇博文,首页的内容主要有轮播图,横向滑动菜单以及菜单对应的view,横向滑动菜单有签到.课堂测试.模拟测试.课堂提问.答问记录五个选项,当点击选项时更新显示view.由于 ...

  2. 微信小程序（看文档写实例二）微信小程序课堂宝APP

    全程记录APP的开发过程,项目完结公上传Github. 一.需求 由于老板让做一个课堂信息化APP,想想在移动端开发,小程序不分Android和IOS,所以就选择了微信小程序,软件的需求不多,但整体内 ...

  3. 微信小程序（看文档写实例十）微信小程序课堂宝APP实现我的模块相关界面及逻辑

    继上篇博文,这篇完成最后一个模块,即我的模块. 一.页面效果 这个模块是和用户类型相关的,因此老师账号和学生账号能看的功能不一样,老师端效果如下: 点击头像到达个人信息如下: 点击后可以做相应的修改. ...

  4. 微信小程序（看文档写实例十一）微信小程序课堂宝APP完结总结及github地址

    一.总结 国庆假期偷懒了几天,从接到任务到分析到实现总共花了20天左右,终于完成了,点名功能由于要实时监听需要收费,所以没有给出代码,需要完成的可以自己动手实现.用一张导图来结束: 二.源码地址 所有 ...

  5. 微信小程序（看文档写实例六）微信小程序课堂宝APP实现签到逻辑

    继上篇博文,这篇写下签到实现的逻辑. 一.实现逻辑 发起签到 1.先上传当前自己的定位经纬度 2.学生查询老师的最后一次签到记录,如果发现签到记录signComplete为false说明有新的签到 3 ...

  6. 微信小程序（看文档写实例四）微信小程序课堂宝APP实现签到子页面布局及课程视频播放页面

    一.签到子页面布局 子页面主要是一个签到按钮,然后下方是签到记录列表. 1.签到按钮 布局代码: <button class='sign-button' bindtap='sign'>签到 ...

  7. 微信小程序（看文档写实例五）微信小程序课堂宝APP实现获取签到列表

    根据上篇博文,这篇主要实现获取签到列表逻辑. 获得签到列表主要有以下步骤: (1)查询老师的ID (2)查询老师的签到记录 (3)如果当前用户是老师,直接显示所有记录,因为签到记录都是老师发起的,肯定 ...

  8. 微信小程序（看文档写实例九）微信小程序课堂宝APP实现练习模块逻辑代码

    接上篇博文,这篇主要描述练习模块的代码逻辑,其中包括test页面,答题detail页面以及提交答题后答卷answer页面. 一.test页面 test页面其实就是从服务器获得章节练习题的内容,然后统计 ...

  9. python使用微信设置-微信 python 接口 -- itchat 文档

    itchat 一. 安装 $ pip install itchat 特殊的字典使用方式 通过打印 itchat 的用户以及注册消息的参数, 可以发现这些值都是字典. 但实际上 itchat 精心构造了 ...

最新文章

  1. c语言链表拆分,C语言拆分链表程序
  2. openstack queens 版本 linux bridge起不来的解决办法
  3. python语言程序设计教程-Python语言程序设计（视频教程）
  4. linux图形界面 革命,Windows 95带来的革命
  5. c++图片背景替换为白色_4种方法，3秒快速更换证件照背景！你还要去照相馆花冤枉钱吗？...
  6. oracle按天创建分区,oracle 10g按天分区
  7. 第七章——ICell的常用属性与方法
  8. codeforces 1728E
  9. [转载]Html 特殊符号 让版权符号更美观_几何途行_新浪博客
  10. 关于阿里云windows服务器上ping不通公网 ip 的解决思路
  11. 什么是前端开发工程师？
  12. 韦达圆周率c语言,韦达对圆周率的表达式 – 手机爱问
  13. form表单内子元素组件按钮button事件冲突 - Vue
  14. ktv系统服务器,ktv服务器主机系统
  15. 解决Failed to load module canberra-gtk-module错误
  16. GIS原理与技术-平时作业
  17. 计算机主机核心通常包括,2017年计算机一级复习试题及答案解析
  18. 试题 算法训练 24点 蓝桥杯 Java
  19. 数据传输完整性_基于IBIS模型的FPGA信号完整性仿真验证方法
  20. 【九九归一|算法强化】HOT 算法①

热门文章

  1. 深度神经网络加速库cuDNN简介
  2. 如何在Python中获取图片分辨率？——Python实现获取图片分辨率的代码及详解。
  3. java你画我猜（一）
  4. 百度与谷歌的一些高级搜索命令
  5. 百度首席运营官叶朋离职，王湛、沈皓瑜升职
  6. 360安全，3Q大战一夜爆红
  7. 计算机小论文创新点怎么来,如何获得论文写作创新点？
  8. 汽车一键启动开关发动机启动按钮点火开关图解
  9. 从Excel 到微服务
  10. Web控制SG90 9g舵机(180度版)-MicroPython-NodeMcu-Esp8266开发板