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

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

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

项目功能：

• 用户授权认证
• 用户身份信息登记登录，身份信息查看，身份登记之后才能进行在线考试
• 管理员模拟考试列表：

1. 考试状态数据列表检索（待完成、评分中、已完成）

• 考试过程：

1. 选择要参加的考试类型
2. 对多种类型的题目进行包括对单选题、多选题、判断题、填空题、问答题依次作答

• 对于已完成的评分的考题进行查看：答题卡记录
• 微信服务通知：根据当前用户绑定的微信账号身份（手机号、岗位、所属公司），所在公司有新发布的考题时，推送提醒，点击进入小程序答题页面

实现效果： 

 

 

 

 

小程序在线考试

目录

实现效果： 

小程序在线考试

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页面记得加上

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();
  }
 
})

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

考试系统后台管理项目： 

• vue考试系统后台管理项目-登录、记住密码功能
• vue考试系统后台管理项目-接口封装调用
• 小程序在线考试项目开发-用户授权、身份信息获取流程

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

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

👉👉👉  欢迎来访船长在船上的博客，文章持续更新；项目功能持续迭代，项目开发测试完成会把完整代码上传码云，请及时收藏关注，方便查看。