微信小程序在线考试项目开发-用户信息注册登录功能

news/2024/5/3 20:43:46/文章来源:https://blog.csdn.net/SmartJunTao/article/details/126809683

⭐️⭐️⭐️ 作者：船长在船上
🚩🚩🚩 主页：来访地址船长在船上的博客
🔨🔨🔨 简介：CSDN前端领域优质创作者，资深前端开发工程师，专注前端开发，在CSDN总结工作中遇到的问题或者问题解决方法以及对新技术的分享，欢迎咨询交流，共同学习。

🔔🔔🔔 感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主。如有疑问可以留言、评论，看到后会及时回复。

本项目会耗时一周到两周来完成，最近要又要辛苦加班了，项目给的时间不多，程序员太不容易了，做完项目调休好好休息一下！

此时此刻，记录一下项目实现。

小程序在线考试项目介绍：

技术选型：轻量、可靠的小程序 UI 组件库Vant2：Vant Weapp

项目功能：

用户授权认证
用户身份信息登记登录，身份信息查看，身份登记之后才能进行在线考试
管理员模拟考试列表：
考试状态数据列表检索（待完成、评分中、已完成）
考试过程：
选择要参加的考试类型
对多种类型的题目进行包括对单选题、多选题、判断题、填空题、问答题依次作答
对于已完成的评分的考题进行查看：答题卡记录
微信服务通知：根据当前用户绑定的微信账号身份（手机号、岗位、所属公司），所在公司有新发布的考题时，推送提醒，点击进入小程序答题页面

实现效果：

小程序在线考试

实现效果：

小程序在线考试

1.安装Vant Weapp

通过npm 安装

2.个人中心页面实现

1.安装Vant Weapp

通过npm 安装
npm i @vant/weapp -S --production
通过 yarn 安装
yarn add @vant/weapp --production
安装 0.x 版本
npm i vant-weapp -S --production 

使用vant组件：

{"usingComponents": {"van-field": "@vant/weapp/field/index","van-icon": "@vant/weapp/icon/index","van-popup": "@vant/weapp/popup/index","van-button": "@vant/weapp/button/index","van-toast": "@vant/weapp/toast/index"},"navigationBarTitleText":"考试系统"
}

2.个人中心页面实现

myCenter.wxml

<view class="mycenter"><view class="textCenter">{{isDisabled==false?'您当前账号的身份信息':'请先登记您的身份信息'}}</view><view class="centerbox"><form bindsubmit="saveData"><view class="userName"><text class="nameText">员工姓名</text><van-field class="fieldName" value="{{ name }}" placeholder="请输入您的真实姓名" border="{{ false }}" bind:blur ="userNameInput" readonly="{{isDisabled==false?true:false}}"/></view><view class="userName"><text class="nameText" style="padding-left:36rpx">手机号</text><van-field class="fieldName" value="{{ phone }}" placeholder="请输入您的手机号" border="{{ false }}" bind:blur ="userPhoneInput" readonly="{{isDisabled==false?true:false}}"/></view><view class="userName"><text class="nameText">所属公司</text><van-field wx:if="{{isDisabled==false}}" class="fieldName" value="{{ company }}" placeholder="请选择您所属的公司" readonly border="{{ false }}"></van-field><van-field wx:else class="fieldName" value="{{ company }}" placeholder="请选择您所属的公司" readonly border="{{ false }}" right-icon="arrow-down" bind:click-input="handleDown"></van-field></view><van-button class="loginBtn" type="info" round block formType="submit" wx:if="{{isDisabled}}">确 定</van-button></form></view><van-popup show="{{ showPopup }}" custom-style="height: 40%" round position="bottom" closeable bind:close="closePopup"><view class="popuoContent"><view class="popup-li" wx:for="{{companyList}}" wx:key="id" data-item="{{item}}" bindtap="handleCompany">{{item.name}}</view></view></van-popup><van-toast id="van-toast" />
</view>

myCenter.js重要代码

引入Toast组件：

页面一定再次引入引入，不引入会不生效
myCenter.wxml页面记得加上<van-toast id="van-toast" />

import Toast from '@vant/weapp/toast/toast';

注意事项：

点击确定按钮调用saveData（）方法；
选择公司列表利用van-popup弹窗实现；
用户授权后检索是否登记过信息，如果登记过则跳转到考试列表页进行答题考试，显示tabbar；如果没有登记过则不显示tabbar，需要就进行用户信息登记，登记之后跳转考试列表页进行答题考试；
当切换tabbar时候，进入该页面获取用户信息进行信息回显；确定按钮不显示，用户信息也不能在修改；

var app = getApp();
import Toast from '@vant/weapp/toast/toast';
import { getCompanySelectListOfApp ,//获取公司下拉列表examLogin,//考试身份登记信息examUserInfo,//检索登记getWxUserDetail
} from "../api/index";
Page({/*** 页面的初始数据*/data: {isShow:false,showPopup:false,name:'',phone:'',company:'',// companyValue:'',companyList:[],//公司列表companyId:"",isDisabled:true,//是否登记},handleDown(){this.setData({showPopup:true})},onConfirm(){this.setData({showPopup:false})},closePopup(){this.setData({showPopup:false})},handleCompany(e){const {id,name} = e.currentTarget.dataset.item;this.setData({company:name,companyId:id,showPopup:false})},userNameInput(e){this.setData({name:e.detail.value})},userPhoneInput(e){this.setData({phone:e.detail.value})},saveData(){if(this.data.name==""){Toast("请输入员工姓名");return;}else if(this.data.phone==""){Toast("请输入手机号");return;}else if(this.data.company==""){Toast("请选择所属公司");return;}let params ={openId:wx.getStorageSync('openId'),realName:this.data.name,phone:this.data.phone,companyId:this.data.companyId}console.log(params,"params")examLogin(params).then(res=>{if(res.code == 200){wx.showToast({ title: '登录成功', icon: 'success', duration: 2000,success:function(){wx.showTabBar({fail: function() {setTimeout(function() {wx.showTabBar()}, 500)}});setTimeout(()=>{wx.switchTab({url: "/pages/examList/index",});}, 500)}})}})},// 获取公司下拉列表getCompanySelectList(){getCompanySelectListOfApp().then(res=>{console.log(res)if(res.code == 200){this.setData({companyList:res.data,})}})},//检索是否登记handleExamUserInfo(){examUserInfo({openId:wx.getStorageSync('openId')}).then(res=>{// 如果登记了跳转考试页if(res.code==200){this.setData({isDisabled:false})wx.switchTab({url: '/pages/examList/index',})wx.showTabBar({fail: function() {setTimeout(function() {wx.showTabBar()}, 500)}});}else{this.setData({isDisabled:true})wx.hideTabBar({fail: function() {setTimeout(function() {wx.hideTabBar()}, 500)}});}}).catch(()=>{this.setData({isDisabled:true})wx.hideTabBar({fail: function() {setTimeout(function() {wx.hideTabBar()}, 500)}});})},// 获取用户信息getUserDetail(){getWxUserDetail({openId:wx.getStorageSync('openId')}).then(res=>{if(res.code==200){this.setData({name:res.data.userName,phone:res.data.phone,company:res.data.companyName,companyId:res.data.companyId,isDisabled:false})wx.showTabBar({fail: function() {setTimeout(function() {wx.showTabBar()}, 500)}});}else{this.setData({isDisabled:true})wx.hideTabBar({fail: function() {setTimeout(function() {wx.hideTabBar()}, 500)}});}}).catch(()=>{this.setData({isDisabled:true})wx.hideTabBar({fail: function() {setTimeout(function() {wx.hideTabBar()}, 500)}});})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.getCompanySelectList();//公司列表},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {let that = this;that.getUserDetail();}})

未完待续.........