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

分手后的思念是犯贱 2022-05-10 08:44 269阅读 0赞

继上篇博文，这篇完成最后一个模块，即我的模块。

# 一、页面效果 #

这个模块是和用户类型相关的，因此老师账号和学生账号能看的功能不一样，老师端效果如下：

![70][]

点击头像到达个人信息如下：

![70 1][]

点击后可以做相应的修改。学生端的界面如下：

![70 2][]

修改密码的页面如下：

![70 3][]

其他页面就不一一列出，下面用一个表来说明功能。

<table> 
 <tbody> 
 <tr> 
 <td style="width:61px;">序号</td> 
 <td style="width:248px;">描述</td> 
 <td style="width:445px;">功能</td> 
 </tr> 
 <tr> 
 <td style="width:61px;">1</td> 
 <td style="width:248px;">课堂提问</td> 
 <td style="width:445px;">点击后跳转到课堂提问页面</td> 
 </tr> 
 <tr> 
 <td style="width:61px;">2</td> 
 <td style="width:248px;">结束签到</td> 
 <td style="width:445px;"> 由老师账号结束签到，点击弹出一个模态弹窗，确定后更新最新签到表signComplete为true，本次签到学生再也不能签到 </td> 
 </tr> 
 <tr> 
 <td style="width:61px;">3</td> 
 <td style="width:248px;">课堂测试收卷</td> 
 <td style="width:445px;"> 由老师账号收卷，点击弹出一个模态弹窗，确定后老师提交最新课堂测试到submit_record表，本次课堂测试学生再也不能提交 </td> 
 </tr> 
 <tr> 
 <td style="width:61px;">4</td> 
 <td style="width:248px;">模拟测试收卷</td> 
 <td style="width:445px;">由老师账号收卷，点击弹出一个模态弹窗，确定后老师提交最新模拟测试到submit_record表，本次模拟测试学生再也不能提交</td> 
 </tr> 
 <tr> 
 <td style="width:61px;">5</td> 
 <td style="width:248px;">错题练习</td> 
 <td style="width:445px;">点击后跳转到错题练习页面，这些错题是在练习页面做题时的错题，然后可以答题，重新提交</td> 
 </tr> 
 <tr> 
 <td style="width:61px;">6</td> 
 <td style="width:248px;">测试记录</td> 
 <td style="width:445px;">点击后跳转到测试记录页面，有两个顶部tabBar，一个是课堂测试另一个模拟测试，然后以列表显示提交的课堂测试的日期及老师在后台给的成绩</td> 
 </tr> 
 <tr> 
 <td style="width:61px;">7</td> 
 <td style="width:248px;">问答记录</td> 
 <td style="width:445px;">跳转到问答记录页面</td> 
 </tr> 
 <tr> 
 <td style="width:61px;">8</td> 
 <td style="width:248px;">通知中心</td> 
 <td style="width:445px;">跳转到通知页面（简单的聊天页面），只有老师才能发起通知</td> 
 </tr> 
 <tr> 
 <td style="width:61px;">9</td> 
 <td style="width:248px;">关于我们</td> 
 <td style="width:445px;">跳转到关于我们界面，用户可以提交反馈</td> 
 </tr> 
 </tbody> 
</table>

# 二、页面代码 #

## 1、我的页面 ##

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;view class="section"&gt; &lt;navigator url='../mine/info/info' class="user-info-container" hover-class='weui-cell_active'&gt; &lt;view class="user-img-wrap"&gt; &lt;image class="user-img" mode="scaleToFill" src="{ {weChatUserInfo.avatarUrl}}" style="background-size: 100% 100%; background-position: 0% 0%; background-repeat: no-repeat; " /&gt; &lt;/view&gt; &lt;view class="user-info-wrap"&gt; &lt;text class="c-block user-info-name"&gt;{ {weChatUserInfo.nickName}}&lt;/text&gt; &lt;text class="c-block user-info-follower"&gt;学号: { {bmobUserInfo.username}}&lt;/text&gt; &lt;/view&gt; &lt;view class="user-info-arrow-wrap"&gt; &lt;view class="user-info-arrow" /&gt; &lt;/view&gt; &lt;/navigator&gt; &lt;view hidden='{ {bmobUserInfo.userType==1}}'&gt; &lt;view class="boundary" /&gt; &lt;view class="user-bbs-info-container"&gt; &lt;navigator class="user-post-wrap" hover-class='btn_active' url='{ {errorInfo.errorPath}}'&gt; &lt;view class="user-post-icon" /&gt; &lt;view class="user-post-text-wrap"&gt; &lt;text class="user-text"&gt;错题练习&lt;/text&gt; &lt;/view&gt; &lt;view class="user-list-container"&gt; &lt;view class="post-list-num"&gt;{ {errorInfo.errorCount}}&lt;/view&gt; &lt;/view&gt; &lt;view class="user-arrow-wrap"&gt; &lt;view class="user-info-arrow" /&gt; &lt;/view&gt; &lt;/navigator&gt; &lt;navigator url='{ {testRecordInfo.testRecordPath}}' class="user-post-wrap" hover-class='btn_active'&gt; &lt;view class="user-join-icon" /&gt; &lt;view class="user-post-text-wrap"&gt; &lt;text class="user-text"&gt;测试记录&lt;/text&gt; &lt;/view&gt; &lt;view class="user-list-container"&gt; &lt;view class="post-list-num"&gt;{ {testRecordInfo.testRecordCount}}&lt;/view&gt; &lt;/view&gt; &lt;view class="user-arrow-wrap"&gt; &lt;view class="user-info-arrow" /&gt; &lt;/view&gt; &lt;/navigator&gt; &lt;navigator url='' class="user-post-wrap" hover-class='btn_active'&gt; &lt;view class="user-mine-answer" /&gt; &lt;view class="c-minheight wx-view_yg2I9A"&gt; &lt;text class="user-text"&gt;问答记录&lt;/text&gt; &lt;/view&gt; &lt;view class="user-list-container"&gt; &lt;view class="post-list-num"&gt;2&lt;/view&gt; &lt;/view&gt; &lt;view class="user-arrow-wrap"&gt; &lt;view class="user-info-arrow" /&gt; &lt;/view&gt; &lt;/navigator&gt; &lt;/view&gt; &lt;/view&gt; &lt;view hidden='{ {bmobUserInfo.userType==0}}'&gt; &lt;view class="boundary" /&gt; &lt;view class="user-bbs-info-container"&gt; &lt;view class="user-bbs-info-container"&gt; &lt;view class="user-post-wrap" hover-class='btn_active' bindtap='classQuestion'&gt; &lt;view class="user-post-question" /&gt; &lt;view class="user-post-text-wrap"&gt; &lt;text class="user-text"&gt;课堂提问&lt;/text&gt; &lt;/view&gt; &lt;view class="user-arrow-wrap"&gt; &lt;view class="user-info-arrow" /&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="user-post-wrap" hover-class='btn_active' bindtap='endSign'&gt; &lt;view class="user-mine-answer" /&gt; &lt;view class="user-post-text-wrap"&gt; &lt;text class="user-text"&gt;结束签到&lt;/text&gt; &lt;/view&gt; &lt;view class="user-arrow-wrap"&gt; &lt;view class="user-info-arrow" /&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="user-post-wrap" hover-class='btn_active' bindtap='classTestEnd'&gt; &lt;view class="user-join-icon" /&gt; &lt;view class="user-post-text-wrap"&gt; &lt;text class="user-text"&gt;课堂测试收卷&lt;/text&gt; &lt;/view&gt; &lt;view class="user-arrow-wrap"&gt; &lt;view class="user-info-arrow" /&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="user-post-wrap" hover-class='btn_active' bindtap='modelTestEnd'&gt; &lt;view class="user-post-icon" /&gt; &lt;view class="user-post-text-wrap"&gt; &lt;text class="user-text"&gt;模拟测试收卷&lt;/text&gt; &lt;/view&gt; &lt;view class="user-arrow-wrap"&gt; &lt;view class="user-info-arrow" /&gt; &lt;/view&gt; &lt;/view&gt; &nbsp; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="boundary" /&gt; &lt;view class="user-bbs-info-container"&gt; &lt;view class="user-bbs-info-container"&gt; &lt;navigator url='{ {chatInfo.path}}' class="user-post-wrap" hover-class='btn_active'&gt; &lt;view class="user-post-chat" /&gt; &lt;view class="user-post-text-wrap"&gt; &lt;text class="user-text"&gt;通知中心&lt;/text&gt; &lt;/view&gt; &lt;view class="user-list-container"&gt; &lt;view class="post-list-num"&gt;{ {chatInfo.newMessageCount}}&lt;/view&gt; &lt;/view&gt; &lt;view class="user-arrow-wrap"&gt; &lt;view class="user-info-arrow" /&gt; &lt;/view&gt; &lt;/navigator&gt; &lt;navigator url='./aboutUs/aboutUs' class="user-post-wrap" hover-class='btn_active'&gt; &lt;view class="user-post-aboutus" /&gt; &lt;view class="user-post-text-wrap"&gt; &lt;text class="user-text"&gt;关于我们&lt;/text&gt; &lt;/view&gt; &lt;view class="user-arrow-wrap"&gt; &lt;view class="user-info-arrow" /&gt; &lt;/view&gt; &lt;/navigator&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; </td> 
 </tr> 
 </tbody> 
</table>

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> @import "../../utils/weui.wxss"; &nbsp; .user-info-container { padding: 10px 15px; width: 100%; display: flex; border-width: 10px; border-bottom-style: none; border-bottom-color: rgb(245, 245, 245); position: relative; } &nbsp; .user-info-wrap { height: 60px; width: 60%; margin-left: 10px; margin-right: 10px; } &nbsp; .user-img-wrap { height: 60px; width: 60px; border-radius: 5px; } &nbsp; .user-edit-wrap { height: 60px; width: 63px; display: flex; position: absolute; right: 10px; } &nbsp; .wx-image_bkrIYH { width: 100%; height: 100%; position: relative; } &nbsp; /* 用户头像 */ .user-img { position: relative; width: 100%; height: 100%; border-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; border-top-left-radius: 5px; } &nbsp; .wx-text_qUYxY6 { position: relative; } &nbsp; .user-info-name { position: relative; height: 60%; width: 100%; font-size: 1rem; text-indent: 0px; text-align: left; line-height: 200%; overflow: hidden; } &nbsp; .user-info-follower { height: 40%; width: 100%; position: relative; font-size: 1rem; color: rgb(133, 133, 133); line-height: 120%; } &nbsp; .user-update { color: rgb(136, 136, 136); font-size: 1rem; padding-top: 20px; position: relative; height: 100%; width: 56px; } /* 箭头 */ .user-info-arrow { width: 7px; height: 7px; border-width: 1px; border-color: rgb(136, 136, 136); border-style: none solid solid none; transform: rotate(315deg) scale(1) translate(0%, 0%); transition: All 0s ease; -ms-transform: rotate(315deg) scale(1) translate(0%, 0%); -o-transform: rotate(315deg) scale(1) translate(0%, 0%); -moz-transform: rotate(315deg) scale(1) translate(0%, 0%); -webkit-transform: rotate(315deg) scale(1) translate(0%, 0%); -ms-transition: All 0s ease; -o-transition: All 0s ease; -moz-transition: All 0s ease; -webkit-transition: All 0s ease; } &nbsp; .user-info-arrow-wrap { position: absolute; right: 15px; height: 100%; margin-left: 0px; padding-top: 26px; width: 7px; } &nbsp; .boundary { height: 10px; width: 100%; background-color: rgba(245, 245, 245, 1); } &nbsp; .user-bbs-info-container { width: 100%; background-color: rgba(255, 255, 255, 1); } &nbsp; .user-post-wrap { width: auto; height: 49px; padding: 12px 15px 12px 0px; display: flex; /* margin-left: 15px; */ border-width: 1px; border-bottom-style: solid; border-bottom-color: rgba(245, 245, 245, 1); } &nbsp; .user-post-text-wrap { display: inline-block; height: 25px; position: static; padding-top: 2px; padding-bottom: 2px; } &nbsp; .user-text { position: static; font-size: 1rem; line-height: 100%; margin-left: 5px; } &nbsp; .user-list-container { height: 25px; position: absolute; right: 10px; /* width: 37px; */ display: flex; } /* 提示数字 */ .post-list-num { position: relative; height: 100%; font-size: 14px; font-style: normal; /* font-family: "Microsoft YaHei", Arial; */ line-height: 25px; text-align: right; margin-right: 20px; } .user-arrow-wrap { height: 100%; width: 7px; padding: 9px 5px 9px 0px; text-align: right; position: absolute; right: 15px; } /* 我的错题icon */ .user-post-icon { width: 25px; height: 25px; background: url("http://i.pengxun.cn/static/vzan/web/post-big-pic-09.png") 0px 0px / 100% no-repeat; vertical-align: middle; margin-left: 15px; margin-right: 5px; display: inline-block; } /* 我的测试icon */ .user-join-icon { width: 25px; height: 25px; background: url(http://i.pengxun.cn/static/vzan/web/post-big-pic-09.png) no-repeat 0 -25px; vertical-align: middle; margin-right: 5px; margin-left: 15px; display: inline-block; background-size: 100%; } /* 我的回答icon */ .user-mine-answer { width: 25px; height: 25px; background: url("http://i.pengxun.cn/static/vzan/web/post-big-pic-09.png") 0px -350px / 100% no-repeat; vertical-align: middle; margin-right: 5px; margin-left: 15px; display: inline-block; } /* 我的聊天icon */ .user-mine-chat { width: 25px; height: 25px; background: url("http://i.pengxun.cn/static/vzan/web/post-big-pic-09.png") 0px -75px / 100% no-repeat; vertical-align: middle; margin-right: 5px; margin-left: 15px; display: inline-block; } /* 消息中心 */ .user-post-chat { width: 25px; height: 25px; background: url("http://i.pengxun.cn/static/vzan/web/post-big-pic-09.png") 0px -100px / 100% no-repeat; vertical-align: middle; margin-right: 5px; margin-left: 15px; display: inline-block; } /* 关于我们icon */ .user-post-aboutus { width: 25px; height: 25px; background: url("http://i.pengxun.cn/static/vzan/web/post-big-pic-09.png") 0px -200px / 100% no-repeat; vertical-align: middle; margin-right: 5px; margin-left: 15px; display: inline-block; } /* 课堂提问icon */ .user-post-question { width: 25px; height: 25px; background: url("http://i.pengxun.cn/static/vzan/web/post-big-pic-09.png") 0px -250px / 100% no-repeat; vertical-align: middle; margin-right: 5px; margin-left: 15px; display: inline-block; } </td> 
 </tr> 
 </tbody> 
</table>

## 2、个人信息页面 ##

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;!--pages/mine/info.wxml--&gt; &lt;view class="boundary" /&gt; &lt;view class="user-bbs-info-container"&gt; &lt;view bindtap="powerDrawer" id='school' data-statu="open" class="user-post-wrap" hover-class='btn_active'&gt; &lt;view class="user-post-text-wrap"&gt; &lt;text class="user-text"&gt;学校&lt;/text&gt; &lt;/view&gt; &lt;view class="user-list-container"&gt; &lt;view class="post-list-num"&gt;{ {bmobUserInfo.school}}&lt;/view&gt; &lt;/view&gt; &lt;view class="user-arrow-wrap"&gt; &lt;view class="user-info-arrow" /&gt; &lt;/view&gt; &lt;/view&gt; &lt;view bindtap="powerDrawer" class="user-post-wrap" id='college' hover-class='btn_active' data-statu="open"&gt; &lt;view class="user-post-text-wrap"&gt; &lt;text class="user-text"&gt;学院&lt;/text&gt; &lt;/view&gt; &lt;view class="user-list-container"&gt; &lt;view class="post-list-num"&gt;{ {bmobUserInfo.college}}&lt;/view&gt; &lt;/view&gt; &lt;view class="user-arrow-wrap"&gt; &lt;view class="user-info-arrow" /&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="user-post-wrap"&gt; &nbsp; &lt;view class="c-minheight wx-view_yg2I9A"&gt; &lt;text class="user-text"&gt;学号&lt;/text&gt; &lt;/view&gt; &lt;view class="user-list-container"&gt; &lt;view class="post-list-num"&gt;{ {bmobUserInfo.username}}&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view bindtap="powerDrawer" class="user-post-wrap" id='name' hover-class='btn_active' data-statu="open"&gt; &lt;view class="c-minheight wx-view_yg2I9A"&gt; &lt;text class="user-text"&gt;姓名&lt;/text&gt; &lt;/view&gt; &lt;view class="user-list-container"&gt; &lt;view class="post-list-num"&gt;{ {bmobUserInfo.name}}&lt;/view&gt; &lt;/view&gt; &lt;view class="user-arrow-wrap"&gt; &lt;view class="user-info-arrow" /&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="boundary" /&gt; &lt;view class="user-bbs-info-container"&gt; &lt;view bindtap="powerDrawer" class="user-post-wrap" id='major' hover-class='btn_active' data-statu="open"&gt; &lt;view class="user-post-text-wrap"&gt; &lt;text class="user-text"&gt;专业&lt;/text&gt; &lt;/view&gt; &lt;view class="user-list-container"&gt; &lt;view class="post-list-num"&gt;{ {bmobUserInfo.major}}&lt;/view&gt; &lt;/view&gt; &lt;view class="user-arrow-wrap"&gt; &lt;view class="user-info-arrow" /&gt; &lt;/view&gt; &lt;/view&gt; &lt;view bindtap="powerDrawer" class="user-post-wrap" id='class' hover-class='btn_active' data-statu="open"&gt; &lt;view class="user-post-text-wrap"&gt; &lt;text class="user-text"&gt;班级&lt;/text&gt; &lt;/view&gt; &lt;view class="user-list-container"&gt; &lt;view class="post-list-num"&gt;{ {bmobUserInfo.class}}&lt;/view&gt; &lt;/view&gt; &lt;view class="user-arrow-wrap"&gt; &lt;view class="user-info-arrow" /&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="user-post-wrap"&gt; &lt;view class="c-minheight wx-view_yg2I9A"&gt; &lt;text class="user-text"&gt;性别&lt;/text&gt; &lt;/view&gt; &lt;view class="user-list-container"&gt; &lt;!-- &lt;picker range="{ {sexArray}}" value="{ {sexIndex}}" bindchange="bindSexChange" class="post-list-num"&gt; { {sexArray[sexIndex]}}&lt;/picker&gt; --&gt; &lt;view class="post-list-num" wx:if='{ {weChatUserInfo.gender==1}}'&gt;男&lt;/view&gt; &lt;view class="post-list-num" wx:else&gt;女&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="user-post-wrap" hover-class='btn_active'&gt; &lt;view class="c-minheight wx-view_yg2I9A"&gt; &lt;text class="user-text"&gt;出生日期&lt;/text&gt; &lt;/view&gt; &lt;view class="user-list-container"&gt; &lt;picker mode="date" start="1970-1-1" end="2017-12-31" value="{ {bmobUserInfo.birthday}}" fields="day" bindchange="bindDateChange" class="post-list-num"&gt; &lt;view wx:if='{ {bmobUserInfo.birthday==null}}'&gt;{ {date}}&lt;/view&gt; &lt;view wx:else&gt;{ {bmobUserInfo.birthday}}&lt;/view&gt; &lt;/picker&gt; &lt;/view&gt; &lt;view class="user-arrow-wrap"&gt; &lt;view class="user-info-arrow" /&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="boundary" /&gt; &lt;view class="user-bbs-info-container"&gt; &lt;view class="user-post-wrap" id='area'&gt; &lt;view class="user-post-text-wrap"&gt; &lt;text class="user-text"&gt;地区&lt;/text&gt; &lt;/view&gt; &lt;view class="user-list-container"&gt; &lt;view class="post-list-num"&gt;{ {weChatUserInfo.province}} { {weChatUserInfo.city}}&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view bindtap="powerDrawer" class="user-post-wrap" id='mobilePhoneNumber' hover-class='btn_active' data-statu="open"&gt; &lt;view class="c-minheight wx-view_yg2I9A"&gt; &lt;text class="user-text"&gt;手机号&lt;/text&gt; &lt;/view&gt; &lt;view class="user-list-container"&gt; &lt;view class="post-list-num"&gt;{ {bmobUserInfo.mobilePhoneNumber}}&lt;/view&gt; &lt;/view&gt; &lt;view class="user-arrow-wrap"&gt; &lt;view class="user-info-arrow" /&gt; &lt;/view&gt; &lt;/view&gt; &lt;view bindtap="powerDrawer" class="user-post-wrap" id='email' hover-class='btn_active' data-statu="open"&gt; &lt;view class="c-minheight wx-view_yg2I9A"&gt; &lt;text class="user-text"&gt;邮箱&lt;/text&gt; &lt;/view&gt; &lt;view class="user-list-container"&gt; &lt;view class="post-list-num"&gt;{ {bmobUserInfo.email}}&lt;/view&gt; &lt;/view&gt; &lt;view class="user-arrow-wrap"&gt; &lt;view class="user-info-arrow" /&gt; &lt;/view&gt; &lt;/view&gt; &nbsp; &lt;navigator url='./updatepas/updatepas' class="user-post-wrap" hover-class='btn_active'&gt; &lt;view class="c-minheight wx-view_yg2I9A"&gt; &lt;text class="user-text"&gt;修改密码&lt;/text&gt; &lt;/view&gt; &lt;view class="user-arrow-wrap"&gt; &lt;view class="user-info-arrow" /&gt; &lt;/view&gt; &lt;/navigator&gt; &lt;/view&gt; &lt;!--mask--&gt; &lt;view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{ {showModalStatus}}"&gt;&lt;/view&gt; &lt;!--使用animation属性指定需要执行的动画--&gt; &lt;view animation="{ {animationData}}" class="drawer_box" wx:if="{ {showModalStatus}}"&gt; &lt;!--drawer content--&gt; &lt;view class="drawer_title" id='title'&gt;更新{ {desc}}&lt;/view&gt; &lt;form bindsubmit='powerDrawer' class="drawer_content"&gt; &lt;view class="top grid"&gt; &lt;label class="title col-0"&gt;{ {desc}}&lt;/label&gt; &lt;input class="input_base input_h30 col-1" name='inputText' placeholder='您的{ {desc}}...'&gt;&lt;/input&gt; &lt;/view&gt; &lt;button form-type='submit' class="btn_ok" bindtap="powerDrawer" data-statu="close"&gt;修改&lt;/button&gt; &lt;/form&gt; &lt;/view&gt; </td> 
 </tr> 
 </tbody> 
</table>

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> /* pages/mine/info.wxss */ @import "../mine.wxss"; &nbsp; .user-text { position: static; font-size: 1rem; line-height: 100%; margin-left: 15px; } &nbsp; /*mask*/ &nbsp; .drawer_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background: #000; opacity: 0.5; overflow: hidden; } &nbsp; /*content*/ &nbsp; .drawer_box { width: 650rpx; overflow: hidden; position: fixed; top: 50%; left: 0; z-index: 1001; background: #fafafa; margin: -150px 50rpx 0 50rpx; border-radius: 3px; } &nbsp; .drawer_title { padding: 15px; font: 22px; text-align: center; color: royalblue; } &nbsp; .drawer_content { height: 90px; overflow-y: scroll; /*超出父盒子高度可滚动*/ } &nbsp; .btn_ok { margin: 35px; text-align: center; border-top: 1px solid #e8e8ea; color: #3cc51f; font-size: 18px; border-radius: 5%; } &nbsp; .top { padding-top: 8px; } &nbsp; .bottom { padding-bottom: 8px; } &nbsp; .title { height: 40px; line-height: 40px; width: 160rpx; text-align: center; display: inline-block; font: 300 28rpx/30px; } &nbsp; .input_base { border: 2rpx solid #ccc; padding-left: 10rpx; margin-right: 50rpx; } &nbsp; .input_h30 { height: 40px; line-height: 40px; } &nbsp; .input_h60 { height: 60px; } &nbsp; .input_view { font: 16px; background: #fff; color: #000; line-height: 40px; } &nbsp; input { font: 16px; background: #fff; color: #000; } &nbsp; radio { margin-right: 20px; } &nbsp; .grid { display: -webkit-box; display: box; } &nbsp; .col-0 { -webkit-box-flex: 0; box-flex: 0; } &nbsp; .col-1 { -webkit-box-flex: 1; box-flex: 1; } &nbsp; .fl { float: left; } &nbsp; .fr { float: right; } &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

## 3、错题练习页面 ##

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;!-- pages/mine/errorTest/errorTest.wxml--&gt; &nbsp; &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="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; &nbsp; &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/mine/errorTest/errorTest.wxss */ @import '../.././test/test.wxss'; </td> 
 </tr> 
 </tbody> 
</table>

![70 4][]

## 4、测试记录页面 ##

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;view class="swiper-tab"&gt; &lt;view class="swiper-tab-list { {currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav"&gt;课堂测试&lt;/view&gt; &lt;view class="swiper-tab-list { {currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav"&gt;模拟测试&lt;/view&gt; &lt;/view&gt; &lt;swiper current="{ {currentTab}}" class="swiper-box" duration="300" style="height:{ {winHeight - 31}}px" bindchange="bindChange"&gt; &lt;swiper-item&gt; &lt;view class='test-record-item'&gt; &lt;view class='test-record-item-date'&gt;测试日期&lt;/view&gt; &lt;view class='test-record-item-series'&gt;测试次别&lt;/view&gt; &lt;view class='test-record-item-commit'&gt; &lt;text&gt;提交状态&lt;/text&gt; &lt;/view&gt; &lt;view class='test-record-item-score'&gt;成绩&lt;/view&gt; &lt;/view&gt; &lt;block wx:for="{ {testRecordInfo}}" wx:key="unique"&gt; &lt;view wx:if="{ {item.types =='课堂测试'}}" class='test-record-item'&gt; &lt;view class='test-record-item-date'&gt;{ {item.date}}&lt;/view&gt; &lt;view class='test-record-item-series'&gt;{ {item.series}}&lt;/view&gt; &lt;view class='test-record-item-commit'&gt; &lt;icon type='success' class='test-record-item-commit-icon'&gt;&lt;/icon&gt; &lt;text class='test-record-item-commit-text'&gt;已签到&lt;/text&gt; &lt;/view&gt; &lt;view class='test-record-item-score'&gt;{ {item.score}}&lt;/view&gt; &lt;/view&gt; &lt;/block&gt; &lt;/swiper-item&gt; &lt;swiper-item&gt; &lt;view class='test-record-item'&gt; &lt;view class='test-record-item-date'&gt;测试日期&lt;/view&gt; &lt;view class='test-record-item-series'&gt;测试次别&lt;/view&gt; &lt;view class='test-record-item-commit'&gt; &lt;text&gt;提交状态&lt;/text&gt; &lt;/view&gt; &lt;view class='test-record-item-score'&gt;成绩&lt;/view&gt; &lt;/view&gt; &lt;block wx:for="{ {testRecordInfo}}" wx:key="unique"&gt; &lt;view wx:if="{ {item.types =='模拟测试'}}" class='test-record-item'&gt; &lt;view class='test-record-item-date'&gt;{ {item.date}}&lt;/view&gt; &lt;view class='test-record-item-series'&gt;{ {item.series}}&lt;/view&gt; &lt;view class='test-record-item-commit'&gt; &lt;icon type='success' class='test-record-item-commit-icon'&gt;&lt;/icon&gt; &lt;text class='test-record-item-commit-text'&gt;已签到&lt;/text&gt; &lt;/view&gt; &lt;view class='test-record-item-score'&gt;{ {item.score}}&lt;/view&gt; &lt;/view&gt; &lt;/block&gt; &lt;/swiper-item&gt; &lt;/swiper&gt; </td> 
 </tr> 
 </tbody> 
</table>

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> /* pages/mine/testRecord/testRecord.wxss */ &nbsp; .swiper-tab { width: 100%; border-bottom: 2rpx solid #777; text-align: center; line-height: 80rpx; } &nbsp; .swiper-tab-list { font-size: 30rpx; display: inline-block; width: 50%; color: #777; } &nbsp; .on { color: #118fff; border-bottom: 5rpx solid #118fff; font-size: 35rpx; } &nbsp; .swiper-box { display: block; height: 100%; width: 100%; overflow: hidden; } &nbsp; .swiper-box view { text-align: center; } &nbsp; .test-record-item{ display: flex; flex-direction: row; line-height: 80rpx; border-bottom: 1rpx solid #777; } .test-record-item-date{ height: 100%; width: 25%; font-size: 28rpx; line-height: 80rpx; } .test-record-item-series{ height: 100%; width: 40%; font-size: 28rpx; line-height: 80rpx; } .test-record-item-commit{ height: 100%; width: 20%; font-size: 28rpx; line-height: 80rpx; } .test-record-item-score{ height: 100%; width: 15%; font-size: 28rpx; line-height: 80rpx; color: red; } &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

![70 5][]

## 5、通知页面 ##

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;!--pages/mine/chat/chat.wxml--&gt; &lt;!-- &lt;template name="temp"&gt; &lt;block wx:for="{ {message}}" wx:key="unique"&gt; &lt;view&gt;{ {item.userId.objectId}} { {bmobUserInfo.objectId}}&lt;/view&gt; &lt;block wx:if="{ {item.userId.objectId != bmobUserInfo.objectId}}"&gt; &lt;view class="reply"&gt; &lt;view class="pic"&gt; &lt;image src="{ {weChatUserInfo.avatarUrl}}"&gt;&lt;/image&gt; &lt;/view&gt; &lt;view class='msg-info'&gt; &lt;view class='user-nickname' style='text-align: left;'&gt; &lt;text&gt;{ {bmobUserInfo.name}}&lt;/text&gt; &lt;/view&gt; &lt;view class='user-nickname' style='text-align: left; font-size:12px'&gt; &lt;text&gt;{ {item.updatedAt}}&lt;/text&gt; &lt;/view&gt; &lt;view class="content"&gt; &lt;view class="text"&gt; { {item.message}} &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;/block&gt; &lt;block wx:elif="{ {item.userId.objectId == bmobUserInfo.objectId}}"&gt; &lt;view class="send"&gt; &lt;view class='msg-info'&gt; &lt;view class='user-nickname'&gt; &lt;text&gt;{ {bmobUserInfo.name}}&lt;/text&gt; &lt;/view&gt; &lt;view class='user-nickname' style=' font-size:12px'&gt; &lt;text&gt;{ {item.updatedAt}}&lt;/text&gt; &lt;/view&gt; &lt;view class="content"&gt; &lt;view class="text"&gt; { {item.message}} &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="pic"&gt; &lt;image src="{ {weChatUserInfo.avatarUrl}}"&gt;&lt;/image&gt; &lt;/view&gt; &lt;/view&gt; &lt;/block&gt; &lt;/block&gt; &lt;/template&gt; --&gt; &nbsp; &lt;scroll-view scroll-y="true" scroll-top="{ {scrollTop}}"&gt; &lt;!-- &lt;template is="temp" data="{ {message}}"&gt;&lt;/template&gt; --&gt; &lt;block wx:for="{ {message}}" wx:key="unique"&gt; &lt;block wx:if="{ {item.userId.objectId != bmobUserInfo.objectId}}"&gt; &lt;view class="reply"&gt; &lt;view class="pic"&gt; &lt;image src="{ {bmobUserInfo.avatarUrl}}"&gt;&lt;/image&gt; &lt;/view&gt; &lt;view class='msg-info'&gt; &lt;view class='user-nickname' style='text-align: left;'&gt; &lt;text&gt;{ {item.userId.name}}&lt;/text&gt; &lt;/view&gt; &lt;view class='user-nickname' style='text-align: left; font-size:12px'&gt; &lt;text&gt;{ {item.updatedAt}}&lt;/text&gt; &lt;/view&gt; &lt;view class="content"&gt; &lt;view class="text"&gt; { {item.message}} &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;/block&gt; &lt;block wx:elif="{ {item.userId.objectId == bmobUserInfo.objectId}}"&gt; &lt;view class="send"&gt; &lt;view class='msg-info'&gt; &lt;view class='user-nickname'&gt; &lt;text&gt;{ {bmobUserInfo.name}}&lt;/text&gt; &lt;/view&gt; &lt;view class='user-nickname' style=' font-size:12px'&gt; &lt;text&gt;{ {item.updatedAt}}&lt;/text&gt; &lt;/view&gt; &lt;view class="content"&gt; &lt;view class="text"&gt; { {item.message}} &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="pic"&gt; &lt;image src="{ {avatarUrl.avatarUrl}}"&gt;&lt;/image&gt; &lt;/view&gt; &lt;/view&gt; &lt;/block&gt; &lt;/block&gt; &lt;/scroll-view&gt; &lt;form bindsubmit="sendMessage" hidden='{ {bmobUserInfo.userType ==0}}'&gt; &lt;view class="sendMessage"&gt; &lt;textarea auto-height="true" name="input" class="inputMsg" value="{ {inputMsg}}" /&gt; &lt;button form-type="submit" class="send"&gt;发送&lt;/button&gt; &lt;/view&gt; &lt;/form&gt; </td> 
 </tr> 
 </tbody> 
</table>

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> page{ background-color:#ececec; } scroll-view{ height:1150rpx; padding-bottom:50px; } .reply .pic, .send .pic{ padding:10px; } .reply, .send{ display: flex; } .reply .pic image, .send .pic image{ width:80rpx; height:80rpx; border-radius: 5%; } .send{ justify-content:flex-end; } .reply .content{ padding:10px 10px 10px 0; max-width:480rpx; } .send .content{ padding:10px 0 10px 10px; max-width:480rpx; } .reply .content .text, .send .content .text{ background-color: #fff; border-radius: 5px; padding:10px; font-size:16px; word-break: keep-all; word-wrap: break-word; } .send .content .text{ background-color: #78fd75; } .sendMessage{ display: flex; position: fixed; bottom:0; left:0; right: 0; padding:10px; background-color: #ececec; } .inputMsg{ flex: 2; background-color:#fff; height: 30px; font-size: 16px; padding:5px 10px; } .sendMessage .send{ background-color:#64b162; color:#fff; height: 30px; line-height: 30px; margin-left: 10px; align-self: flex-end; } .msg-info{ display: flex; flex-direction: column; padding: 5px; } .user-nickname{ text-align: right; font-size: 14px; color: royalblue; } </td> 
 </tr> 
 </tbody> 
</table>

![70 6][]

## 6、关于我们界面 ##

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;!--pages/mine/aboutUs/aboutUs.wxml--&gt; &lt;text class='title'&gt;反馈&lt;/text&gt; &lt;form bindsubmit='feedback' class='feedback-form'&gt; &lt;textarea name='content' class='content' placeholder='你的反馈...'&gt;&lt;/textarea&gt; &lt;button class='btn-submit' form-type='submit'&gt;提交反馈&lt;/button&gt; &lt;/form&gt; &lt;view class='info'&gt; &lt;text&gt;本软件作为计算机网络课程信息化辅助使用，当前版本为v1.0,如果您在使用过程中有任何问题，请给我们提交您宝贵的意见，也可以发送到邮箱：soleilluo@163.com。&lt;/text&gt; &lt;/view&gt; </td> 
 </tr> 
 </tbody> 
</table>

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> /* pages/mine/aboutUs/aboutUs.wxss */ &nbsp; .title { padding: 4%; margin-top: 5%; color: #118fff; } &nbsp; .feedback-form { display: flex; flex-direction: column; justify-content: center; } &nbsp; .content { height: 150px; width: 92%; margin: 2%; padding: 2%; white-space: pre-wrap; background: whitesmoke; color: #118fff; border-radius: 3%; border: 1px solid rgb(214, 214, 214); } &nbsp; .btn-submit { width: 96%; margin: 2%; background: #118fff; color: white; border-radius: 3%; } .info{ width: 96%; margin-left: 2%; margin-top: 20%; padding: 2%; color: #118fff; font-size: 32rpx; } &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

![70 7][]

# 三、页面对应的代码 #

由于点名功能需要实时推送，这个功能是收费的，所以现在这个功能作为最后的开发完成收尾，下面是所有已经完成的功能的代码逻辑。

我的mine.js

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> var Bmob = require("../../utils/Bmob-1.6.3.min.js"); var Util = require("../../utils/util.js"); var that; var app = getApp(); Page({ data: { weChatUserInfo: null, bmobUserInfo: null, // 错题信息 errorInfo: {}, // 测试记录 testRecordInfo: {}, // 课堂问答记录 answerRecordInfo: {}, // 通知信息 chatInfo: { newMessageCount: 0, path: null } }, // 课堂提问 classQuestion: function() { // 弹出从底部弹出菜单 &nbsp; }, // 结束签到 endSign: function() { // 确定结束最新一次签到吗？点击确定即结束 wx.showModal({ title: '结束签到提示', content: '您确定要结束本次签到吗', success: function (resModal) { if(resModal.confirm){ wx.showToast({ title: '结束签到中...', icon:'loading', duration:10000 }) let query = Bmob.Query('sign_record'); let userIdPointer = Bmob.Pointer('_User'); let pointerUserId = userIdPointer.set(that.data.bmobUserInfo.objectId); query.equalTo('userId','==',pointerUserId); query.order('-numberNo'); query.limit(3);//只查询最新的三条记录 query.find().then(res=&gt;{ query.get(res[0].objectId).then(res1=&gt;{ wx.hideToast(); if(res1.signComplete == false){ res1.set('signComplete',true); res1.save(); wx.showToast({ title: '已结束本次签到', duration:3000 }) } else{ wx.showToast({ title: '本次签到已结束', duration: 3000 }) } }); }); } } }) }, // 课堂测试收卷 classTestEnd: function() { // 确定结束本次课堂测试吗？点击确定即结束 // 查询主观表最新测试是否有老师，如果有,提示已经收卷，没有则写入 wx.showModal({ title: '课堂测试收卷提示', content: '您确定要收卷吗', success: function (resModal) { if (resModal.confirm) { wx.showToast({ title: '收卷中...', icon: 'loading', duration: 10000 }) let queryNumberNo = Bmob.Query('subjective_item'); queryNumberNo.equalTo('type','==','课堂测试'); queryNumberNo.order('-numberNo'); queryNumberNo.limit(3); queryNumberNo.find().then(resNumberNo=&gt;{ if (resNumberNo.length==0){ wx.hideToast(); wx.showToast({ title: '还没有发布课堂测试噢', duration:2500 }) return; } // 得到最新的第几次测试 let numberNo = resNumberNo[0].numberNo; // 去查询submit_record表是是否有这次测试的记录 let querySubmitRecord = Bmob.Query('submit_record'); querySubmitRecord.equalTo('type', '==', '课堂测试'); querySubmitRecord.equalTo('numberNo','==',numberNo); let userIdPointer = Bmob.Pointer('_User'); let pointerUserId = userIdPointer.set(that.data.bmobUserInfo.objectId); querySubmitRecord.equalTo('userId', '==', pointerUserId); querySubmitRecord.find().then(resSubmitRecord=&gt;{ // 如果找到说明已经完成收卷 if(resSubmitRecord.length&gt;0){ wx.hideToast() wx.showToast({ title: '您已经收卷过了...', duration:2500 }) } else{ // 没有找到说明要提交个新的记录已经完成收卷 let newQuerySubmitRecord = Bmob.Query('submit_record'); newQuerySubmitRecord.set('numberNo',numberNo); newQuerySubmitRecord.set('type','课堂测试'); newQuerySubmitRecord.save().then(resNewQuerySubmitRecord=&gt;{ newQuerySubmitRecord.get(resNewQuerySubmitRecord.objectId).then(resGetNewQuerySubmitRecord=&gt;{ resGetNewQuerySubmitRecord.set('userId', pointerUserId); resGetNewQuerySubmitRecord.save(); wx.hideToast() }); }); } }); }); } } }) }, // 模拟测试收卷 modelTestEnd: function() { // 确定结束本次模拟测试吗？点击确定即结束 // 确定结束本次课堂测试吗？点击确定即结束 // 查询主观表最新测试是否有老师，如果有,提示已经收卷，没有则写入 wx.showModal({ title: '课堂测试收卷提示', content: '您确定要收卷吗', success: function (resModal) { if (resModal.confirm) { wx.showToast({ title: '收卷中...', icon: 'loading', duration: 10000 }) let queryNumberNo = Bmob.Query('subjective_item'); queryNumberNo.equalTo('type', '==', '模拟测试'); queryNumberNo.order('-numberNo'); queryNumberNo.limit(3); queryNumberNo.find().then(resNumberNo =&gt; { if (resNumberNo.length == 0) { wx.hideToast(); wx.showToast({ title: '还没有发布模拟测试噢', duration: 2500 }) return; } // 得到最新的第几次测试 let numberNo = resNumberNo[0].numberNo; // 去查询submit_record表是是否有这次测试的记录 let querySubmitRecord = Bmob.Query('submit_record'); querySubmitRecord.equalTo('type', '==', '模拟测试'); querySubmitRecord.equalTo('numberNo', '==', numberNo); let userIdPointer = Bmob.Pointer('_User'); let pointerUserId = userIdPointer.set(that.data.bmobUserInfo.objectId); querySubmitRecord.equalTo('userId', '==', pointerUserId); querySubmitRecord.find().then(resSubmitRecord =&gt; { // 如果找到说明已经完成收卷 if (resSubmitRecord.length &gt; 0) { wx.hideToast() wx.showToast({ title: '您已经收卷过了...', duration: 2500 }) } else { // 没有找到说明要提交个新的记录已经完成收卷 let newQuerySubmitRecord = Bmob.Query('submit_record'); newQuerySubmitRecord.set('numberNo', numberNo); newQuerySubmitRecord.set('type', '模拟测试'); newQuerySubmitRecord.save().then(resNewQuerySubmitRecord =&gt; { newQuerySubmitRecord.get(resNewQuerySubmitRecord.objectId).then(resGetNewQuerySubmitRecord =&gt; { resGetNewQuerySubmitRecord.set('userId', pointerUserId); resGetNewQuerySubmitRecord.save(); wx.hideToast() }); }); } }); }); } } }) }, &nbsp; // 获得通知信息，只有老师端才能发通知，学生端只能查看 getChatInfo: function() { wx.showToast({ title: '正在加载...', icon: 'loading', duration: 10000 }) // 只有老师账号才能发起通知 // 查找表的最新一条数据 let queryNewMessageCount = Bmob.Query('chat'); let message = wx.getStorageSync('lastMessage'); // 有缓存消息 if (message != null || message != undefined) { queryNewMessageCount.equalTo('createdAt', '&gt;', message.updatedAt); } //queryNewMessageCount.order('-createdAt'); queryNewMessageCount.count().then(resNewMessageCount =&gt; { let queryNewMessage = Bmob.Query('chat'); queryNewMessage.include('userId', '_User'); queryNewMessage.order('createdAt'); queryNewMessage.find().then(resNewMessage =&gt; { wx.hideToast(); that.setData({ chatInfo: { newMessageCount: resNewMessageCount, path: './chat/chat?chatInfo=' + JSON.stringify(resNewMessage) } }); }).catch(); }).catch(); // let queryMyMessages = Bmob.Query('chat'); // // queryMyMessages.include('userId', '_User'); // // 设置用户关联对象 // let userIdPointer = Bmob.Pointer('_User'); // let pointerUserId = userIdPointer.set(that.data.bmobUserInfo.objectId); // queryMyMessages.equalTo('userId', '==', pointerUserId); // queryMyMessages.order('-createdAt'); // queryMyMessages.find().then(resMyMessages =&gt; { // let newMessageCount = 0; // //console.log(resMyMessages); // // 如果自己发过消息 // if (resMyMessages.length &gt; 0) { // // 找到最后一条消息的时间 // // 查找列表中是否有比自己最后一条消息更新的消息 // let queryNewMessage = Bmob.Query('chat'); // queryNewMessage.equalTo('createdAt', '&gt;', resMyMessages[0].updatedAt); // queryNewMessage.order('-createdAt'); // queryNewMessage.find().then(resNewMessage =&gt; { // //console.log(resNewMessage); // newMessageCount = resNewMessage.length; // // 查找表中所有消息 // let queryAllMessage = Bmob.Query('chat'); // queryAllMessage.find().then(resAllMessage =&gt; { // wx.hideToast(); // that.setData({ // chatInfo: { // newMessageCount: newMessageCount, // path: './chat/chat?chatInfo=' + JSON.stringify(resAllMessage) // } // }); // }).catch(); &nbsp; // }).catch(); // } // // 如果自己打开过通知窗口，记录上次最后一条消息 // else { // // 查看聊天缓存是否有消息 // let message = wx.getStorageSync('lastMessage'); // // 有缓存消息 // if (messages.length &gt; 0) { // // 找到最后一条消息的时间 // // 查找列表中是否有比最后一条消息更新的消息 // let queryNewMessage = Bmob.Query('chat'); // queryNewMessage.equalTo('createdAt', '&gt;', message.updatedAt); // queryNewMessage.order('-createdAt'); // queryNewMessage.find().then(resNewMessage =&gt; { // newMessageCount = resNewMessage.length; // // 查找表中所有消息 // let queryAllMessage = Bmob.Query('chat'); // queryAllMessage.find().then(resAllMessage =&gt; { // wx.hideToast(); // that.setData({ // chatInfo: { // newMessageCount: newMessageCount, // path: './chat/chat?chatInfo=' + JSON.stringify(resAllMessage) // } // }); // }).catch(); // }).catch(); // } // // 没有缓存消息 // else { // // 直接查找所有消息 // let queryAllMessage = Bmob.Query('chat'); // queryAllMessage.find().then(resAllMessage =&gt; { // wx.hideToast(); // that.setData({ // chatInfo: { // newMessageCount: resAllMessage.length, // path: './chat/chat?chatInfo=' + JSON.stringify(resAllMessage) // } // }); // }).catch(); // } // } // }).catch(); }, // 获得错题列表 getErrorCount: function() { wx.showToast({ title: '正在加载...', icon: 'loading', duration: 10000 }) let query = Bmob.Query('test_error_item'); query.include('choose_item_id', 'choose_item'); query.find().then(res =&gt; { let errorArray = []; let errorCount = 0; res.forEach((item, index) =&gt; { if (item.userId.objectId == that.data.bmobUserInfo.objectId) { if (!item.result) { errorCount += 1; errorArray.unshift(item); } } }); wx.hideToast(); that.setData({ errorInfo: { errorPath: './errorTest/errorTest?error=' + JSON.stringify(errorArray), errorCount: errorCount } }); }).catch(); }, // 获得测试记录 getTestRecord: function() { wx.showToast({ title: '正在加载...', icon: 'loading', duration: 10000 }); let query = Bmob.Query('submit_record'); let userIdPointer = Bmob.Pointer('_User'); let pointerUserId = userIdPointer.set(that.data.bmobUserInfo.objectId); query.equalTo('userId', '==', pointerUserId); query.find().then(res =&gt; { wx.hideToast(); that.setData({ testRecordInfo: { testRecordCount: res.length, testRecordPath: './testRecord/testRecord?testRecordInfo=' + JSON.stringify(res) } }); }).catch(); }, onLoad: function(options) { // 页面初始化 options为页面跳转所带来的参数 that = this; //that.getErrorCount(); that.setData({ bmobUserInfo: wx.getStorageSync('bmobUserInfo'), weChatUserInfo: wx.getStorageSync('weChatUserInfo') }); }, onReady: function() { // // 页面渲染完成 &nbsp; }, onShow: function() { // 页面显示 that.getChatInfo(); // 当前用户是学生 if (that.data.bmobUserInfo.userType == 0) { that.getErrorCount(); that.getTestRecord(); } }, onHide: function() { // 页面隐藏 &nbsp; }, onUnload: function() { // 页面关闭 } }) </td> 
 </tr> 
 </tbody> 
</table>

测试记录testRecord.js

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> // pages/mine/testRecord/testRecord.js &nbsp; var that; Page({ &nbsp; /** * Page initial data */ data: { //页面配置 winWidth: 0, winHeight: 0, // tab切换 currentTab: 0, // 测试记录信息 testRecordInfo:[] }, // 滑动切换tab bindChange: function (e) { var that = this; that.setData({ currentTab: e.detail.current }); }, //点击tab切换 swichNav: function (e) { var that = this; if (this.data.currentTab === e.target.dataset.current) { return false; } else { that.setData({ currentTab: e.target.dataset.current }) } }, /** * Lifecycle function--Called when page load */ onLoad: function (options) { that = this; let data = JSON.parse(options.testRecordInfo); data.forEach((item)=&gt;{ let i = { date:item.createdAt.split(' ')[0], series:item.series, types:item.type, score:item.score } that.data.testRecordInfo.push(i); }); that.setData({ testRecordInfo: that.data.testRecordInfo }); // 获取系统信息 wx.getSystemInfo({ success: function (res) { that.setData({ winWidth: res.windowWidth, winHeight: res.windowHeight }); } }); }, &nbsp; /** * Lifecycle function--Called when page is initially rendered */ onReady: function () { &nbsp; }, &nbsp; /** * Lifecycle function--Called when page show */ onShow: function () { &nbsp; }, &nbsp; /** * Lifecycle function--Called when page hide */ onHide: function () { &nbsp; }, &nbsp; /** * Lifecycle function--Called when page unload */ onUnload: function () { &nbsp; }, &nbsp; /** * Page event handler function--Called when user drop down */ onPullDownRefresh: function () { &nbsp; }, &nbsp; /** * Called when page reach bottom */ onReachBottom: function () { &nbsp; }, &nbsp; /** * Called when user click on the top right corner to share */ onShareAppMessage: function () { &nbsp; } }) </td> 
 </tr> 
 </tbody> 
</table>

个人信息info.js

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> // pages/mine/info.js var Bmob = require("../../../utils/Bmob-1.6.3.min.js"); var Util = require("../../../utils/util.js"); var that; var app = getApp(); Page({ &nbsp; data: { // 是否显示弹窗 showModalStatus: false, // 弹窗描述 desc: null, descList: { 'school': '学校', 'college': '学院', 'name': '姓名', 'major': '专业', 'class': '班级', 'mobilePhoneNumber': '手机号', 'email': '邮箱' }, weChatUserInfo: null, bmobUserInfo: null, date: '1988-08-08', }, onLoad:function(){ that = this; that.setData({ weChatUserInfo:wx.getStorageSync('weChatUserInfo'), bmobUserInfo: wx.getStorageSync('bmobUserInfo') }); }, bindDateChange: function (e) { wx.showToast({ title: '更新中...', icon: 'loading', duration: 10000 }); var query = Bmob.Query('_User'); query.get(that.data.bmobUserInfo.objectId).then(res =&gt; { res.set('birthday', e.detail.value); res.save(); wx.hideToast(); //更新bombuser缓存 that.data.bmobUserInfo['birthday'] = e.detail.value; that.setData({ bmobUserInfo: that.data.bmobUserInfo }); // 把bmob用户信息缓存到本地 wx.setStorageSync('bmobUserInfo', that.data.bmobUserInfo); app.setGlobalData({ currentUser: wx.getStorageSync('bmobUserInfo') }); }).catch(err =&gt; { console.log(err) }) }, powerDrawer: function(e) { // 弹窗效果 if (e.type == 'tap') { // 更新title for (var key in this.data.descList) { if (key == e.currentTarget.id) { this.setData({ desc: this.data.descList[key] }); break; } } // 显示弹窗 var currentStatu = e.currentTarget.dataset.statu; this.util(currentStatu); } // 如果是提交上来的更改信息 if (e.type == 'submit') { // 做数据更改操作 var value = e.detail.value.inputText; // 验证手机号的合法性 if (that.data.desc =='手机号'){ if (!Util.checkMobile(value)){ wx.showToast({ title: '手机号格式错误~', duration:2500 }); return; } } // 验证手机号的合法性 if (that.data.desc == '邮箱') { if (!Util.checkEmail(value)) { wx.showToast({ title: '邮箱格式错误~', duration: 2500 }); return; } } // 上传value值 for (var key in this.data.descList) { if (that.data.descList[key] == that.data.desc) { wx.showToast({ title: '更新中...', icon: 'loading', duration: 10000 }); var query = Bmob.Query('_User'); //query.set('objectId',) //需要修改的objectId query.get(that.data.bmobUserInfo.objectId).then(res =&gt; { res.set(key, value); res.save(); wx.hideToast(); //更新bombuser缓存 that.data.bmobUserInfo[key] = value; that.setData({bmobUserInfo: that.data.bmobUserInfo}); // 把bmob用户信息缓存到本地 wx.setStorageSync('bmobUserInfo', that.data.bmobUserInfo); app.setGlobalData({currentUser: wx.getStorageSync('bmobUserInfo') }); }).catch(err =&gt; { console.log(err) }) break; } } } }, util: function(currentStatu) { /* 动画部分 */ // 第1步：创建动画实例 var animation = wx.createAnimation({ duration: 200, //动画时长 timingFunction: "linear", //线性 delay: 0 //0则不延迟 }); // 第2步：这个动画实例赋给当前的动画实例 this.animation = animation; // 第3步：执行第一组动画 animation.opacity(0).rotateX(-100).step(); // 第4步：导出动画对象赋给数据对象储存 this.setData({ animationData: animation.export() }) // 第5步：设置定时器到指定时候后，执行第二组动画 setTimeout(function() { // 执行第二组动画 animation.opacity(1).rotateX(0).step(); // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象 this.setData({ animationData: animation }) //关闭 if (currentStatu == "close") { this.setData({ showModalStatus: false }); } }.bind(this), 200) // 显示 if (currentStatu == "open") { this.setData({ showModalStatus: true }); } } }) </td> 
 </tr> 
 </tbody> 
</table>

密码修改updatepas.js

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> // pages/mine/info/updatepas/updatepas.js var Bmob = require("../../../../utils/Bmob-1.6.3.min.js"); var Util = require("../../../../utils/util.js"); var md5 = require("../../../../utils/md5.js"); import WxValidate from '../../../../utils/WxValidate.js'; var wxValidate = ""; var that; var app = getApp(); Page({ &nbsp; /** * 页面的初始数据 */ data: { bmobUserInfo: null }, updatePasswordSubmit:function(e){ //验证form表单格式是否合法 var rules = { oldPassword: { required: true, }, newPassword: { required: true, minlength: 8, }, newPasswordAgain: { required: true, minlength: 8, } }; var message = { oldPassword: { required: '旧密码不能为空', }, newPassword: { required: '新密码不能为空', minlength: '新密码长度8-16位', }, newPasswordAgain: { required: '确认密码不能为空', minlength: '确认密码长度8-16位', } }; // 获得验证实例 wxValidate = new WxValidate(rules, message); if (!wxValidate.checkForm(e)) { var error = wxValidate.errorList[0] //提示信息 console.log(error); wx.showToast({ title: error.msg, icon: 'success', duration: 3000 }); return false; } // 再次验证密码 var oldPassword = e.detail.value.oldPassword; var newPassword = e.detail.value.newPassword; var newPasswordAgain = e.detail.value.newPasswordAgain; if (!Util.checkPassword(newPassword)){ wx.showToast({ title: '密码为字母数字组合', icon: 'success', duration: 3000 }); return; } if (!Util.checkPassword(newPasswordAgain)) { wx.showToast({ title: '密码为字母数字组合', icon: 'success', duration: 3000 }); return; } if (newPassword != newPasswordAgain){ wx.showToast({ title: '再次密码不一致', icon: 'success', duration: 3000 }); return; } // 验证数据完成更新密码 let objectId = that.data.bmobUserInfo.objectId; let data = { oldPassword: md5.hexMD5(oldPassword), newPassword: md5.hexMD5(newPassword) } wx.showToast({ title: '正在更新...', icon:'loading', duration:10000 }) Bmob.updateUserPassword(objectId, data).then(res =&gt; { if(res.msg == 'ok'){ wx.hideToast(); wx.showToast({ title: '密码修改成功', icon: 'loading', duration: 2500 }); // 结束当前页面返回上一页面 wx.navigateBack({ delta: 1 }) } }).catch(err =&gt; { console.log(err) }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { that = this; that.setData({ bmobUserInfo:wx.getStorageSync('bmobUserInfo') }); }, &nbsp; /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { &nbsp; }, &nbsp; /** * 生命周期函数--监听页面显示 */ onShow: function () { &nbsp; }, &nbsp; /** * 生命周期函数--监听页面隐藏 */ onHide: function () { &nbsp; }, &nbsp; /** * 生命周期函数--监听页面卸载 */ onUnload: function () { &nbsp; }, &nbsp; /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { &nbsp; }, &nbsp; /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { &nbsp; }, &nbsp; /** * 用户点击右上角分享 */ onShareAppMessage: function () { &nbsp; } }) </td> 
 </tr> 
 </tbody> 
</table>

错题练习errorTest.js

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> // pages/mine/errorTest/errorTest.js var Bmob = require("../../../utils/Bmob-1.6.3.min.js"); var Util = require("../../../utils/util.js"); var that; var app = getApp(); Page({ &nbsp; /** * 页面的初始数据 */ data: { grids: [{ name: '概述', path: "../../test/detail/detail", chapter: "第一章", num: 0 }, { name: '物理层', path: "../../test/detail/detail", chapter: "第二章", num: 0 }, { name: '数据链路层', path: "../../test/detail/detail", chapter: "第三章", num: 0 }, { name: '网络层', path: "../../test/detail/detail", chapter: "第四章", num: 0 }, { name: '运输层', path: "../../test/detail/detail", chapter: "第五章", num: 0 }, { name: '应用层', path: "../../test/detail/detail", chapter: "第六章", num: 0 }, { name: '网络安全', path: "../../test/detail/detail", chapter: "第七章", num: 0 }, { name: '音视频服务', path: "../../test/detail/detail", chapter: "第八章", num: 0 }, { name: '无线移动网络', path: "../../test/detail/detail", chapter: "第九章", num: 0 }, { name: '下一代因特网', path: "../../test/detail/detail", chapter: "第十章", num: 0 } ], weChatUserInfo: null, bmobUserInfo: null, error: null, errorChooseItems: [], answerInfo: {} }, getErrorTestChooseItems: function() { let res = that.data.error; // 解析 for (var i = 0; i &lt; that.data.grids.length; i++) { let chapterChooseItems = [] for (var j = 0; j &lt; res.length; j++) { if (that.data.grids[i].chapter == res[j].choose_item_id.series) { chapterChooseItems.unshift(res[j].choose_item_id); } } that.data.errorChooseItems[that.data.grids[i].chapter] = chapterChooseItems; that.data.grids[i].num = chapterChooseItems.length; that.data.grids[i].path += '?ChooseItems=' + JSON.stringify(chapterChooseItems); } that.setData({ grids: that.data.grids, errorChooseItems: that.data.errorChooseItems }); &nbsp; }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { that = this; that.setData({ error: JSON.parse(options.error), weChatUserInfo: wx.getStorageSync('weChatUserInfo'), bmobUserInfo: wx.getStorageSync('bmobUserInfo') }); that.getErrorTestChooseItems(); }, &nbsp; /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { &nbsp; }, &nbsp; /** * 生命周期函数--监听页面显示 */ onShow: function() { &nbsp; }, &nbsp; /** * 生命周期函数--监听页面隐藏 */ onHide: function() { &nbsp; }, &nbsp; /** * 生命周期函数--监听页面卸载 */ onUnload: function() { &nbsp; }, &nbsp; /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { &nbsp; }, &nbsp; /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { &nbsp; }, &nbsp; /** * 用户点击右上角分享 */ onShareAppMessage: function() { &nbsp; } }) </td> 
 </tr> 
 </tbody> 
</table>

通知chat.js

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> var Bmob = require("../../../utils/Bmob-1.6.3.min.js"); var Util = require("../../../utils/util.js"); var that; var app = getApp(); Page({ data: { message: [], inputMsg: "", scrollTop: 0, weChatUserInfo: null, bmobUserInfo: null, newMessageUpdatedTime: null }, onLoad: function(options) { that = this; that.setData({ bmobUserInfo: wx.getStorageSync('bmobUserInfo'), weChatUserInfo: wx.getStorageSync('weChatUserInfo') }); //console.log(that.data.bmobUserInfo); //console.log(that.data.weChatUserInfo); let chatInfo = JSON.parse(options.chatInfo); //console.log(chatInfo); //let message = wx.getStorageSync('message'); let top = chatInfo.length * 100; that.setData({ message: chatInfo, scrollTop: top }); // that.setData({ // newMessageUpdatedTime: that.data.message[that.data.message.length - 1].updatedAt || null // }) &nbsp; }, onReady: function() { // 页面渲染完成 }, onShow: function() { // 页面显示 // 监听消息，一秒刷新一次 // if (that.data.newMessageUpdatedTime != null) // setInterval(function() { // that.reflashMessage(); // }, 1000); }, onUnload: function() { if (that.data.message.length &gt; 0) wx.setStorageSync('lastMessage', that.data.message[that.data.message.length - 1]); }, &nbsp; inputMsg: function(e) { that.setData({ inputMsg: e.detail.value }) }, sendMessage: function(e) { that.setData({ inputMsg: e.detail.value.input }) // let that = that; if (that.data.inputMsg != "") { // 把消息上传到服务器 let query = Bmob.Query('chat'); query.set('message', that.data.inputMsg); query.save().then(res =&gt; { query.get(res.objectId).then(res1 =&gt; { // 设置用户关联对象 let userIdPointer = Bmob.Pointer('_User'); let pointerUserId = userIdPointer.set(that.data.bmobUserInfo.objectId); res1.set('userId', pointerUserId); res1.save().then(res2 =&gt; { query.get(res.objectId).then(res2 =&gt; { // 发送信息 that.setMessage(res2); that.setData({ scrollTop: that.data.scrollTop + 300 }) }).catch(); }); &nbsp; }).catch(); }).catch(); } }, setMessage: function(msg) { let msgList = that.data.message; msgList.push(msg); that.setData({ message: msgList, inputMsg: "", }) }, // 定时1秒刷新，看是否有新的通知 reflashMessage: function() { let queryNewMessage = Bmob.Query('chat'); queryNewMessage.equalTo('createdAt', '&gt;', that.data.newMessageUpdatedTime); queryNewMessage.order('-createdAt'); queryNewMessage.find().then(resNewMessages =&gt; { if (resNewMessages.length &gt; 0) { resNewMessages.forEach(item =&gt; { that.data.message.push(item); }); that.setData({ message: that.data.message }); } }).catch(); } }) </td> 
 </tr> 
 </tbody> 
</table>

关于我们aboutUs.js

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> // pages/mine/aboutUs/aboutUs.js var Bmob = require("../../../utils/Bmob-1.6.3.min.js"); var that; Page({ &nbsp; /** * Page initial data */ data: { bmobUserInfo: null }, // 处理反馈的表单信息 feedback: function(e) { let content = e.detail.value.content; if (content == '' || content == null) return; let query = Bmob.Query('feed_back'); query.set('content', content); query.save().then(res =&gt; { let userIdPointer = Bmob.Pointer('_User'); let pointerUserId = userIdPointer.set(that.data.bmobUserInfo.objectId); query.get(res.objectId).then(res1 =&gt; { res1.set('userId', pointerUserId); res1.save(); // 返回上个页面 wx.navigateBack({ delta: 1 }) }); }).catch(); }, /** * Lifecycle function--Called when page load */ onLoad: function(options) { that = this; that.setData({ bmobUserInfo: wx.getStorageSync('bmobUserInfo') }); }, &nbsp; /** * Lifecycle function--Called when page is initially rendered */ onReady: function() { &nbsp; }, &nbsp; /** * Lifecycle function--Called when page show */ onShow: function() { &nbsp; }, &nbsp; /** * Lifecycle function--Called when page hide */ onHide: function() { &nbsp; }, &nbsp; /** * Lifecycle function--Called when page unload */ onUnload: function() { &nbsp; }, &nbsp; /** * Page event handler function--Called when user drop down */ onPullDownRefresh: function() { &nbsp; }, &nbsp; /** * Called when page reach bottom */ onReachBottom: function() { &nbsp; }, &nbsp; /** * Called when user click on the top right corner to share */ onShareAppMessage: function() { &nbsp; } }) </td> 
 </tr> 
 </tbody> 
</table>

这次更新的内容比较多，基本我的模块就差点名了，如果导师给经费开实时推送功能，那下次就更新，否则总结整个项目过程，可能提交审核，并上传github，感兴趣的可以下载来看看，有什么建议可以给我留言。

[70]: /images/20220510/8f16b564686b44639e69e19938112e32.png
[70 1]: /images/20220510/dafcf1811a13429c89f1977ceac1d271.png
[70 2]: /images/20220510/c8bff7a69f714a6a8a155293a7d6fcfd.png
[70 3]: /images/20220510/73b3cc0b31ad404ab18bb8d9690be0bd.png
[70 4]: /images/20220510/1df7a19b4d5d4f8dbbc06e85d6012e3b.png
[70 5]: /images/20220510/4ef43adc0f664242a7674feb8aac7589.png
[70 6]: /images/20220510/bee3735b99994033bc25bb19e9ae788b.png
[70 7]: /images/20220510/e0e868bb231347608dd8cc2738be3748.png