当前位置：网站首页>uniapp开发微信小程序-软考刷题小程序

uniapp开发微信小程序-软考刷题小程序

2022-07-30 23:11:00 【Hel1x】

记录一次基于uniapp的微信小程序开发

前言

计算机科学与技术辅修学士的毕业设计
最终决定做微信小程序(比较简单)
刷题小程序方向
软考内容

开发语言

前端uniapp开发
后端django开发

springboot目前不太会,django上手比较快,后端能用就行（）

数据库MySQL

框架设计

题库

题库直接从网上爬取
传送门: 记录一次爬虫题库

数据库结构

这个要写可以写好几页，先带过

前端

参考了软考通

功能实现

刷题部分

刷题模式选择

分段器

<view class="practice-title">
		<u-subsection :list="list" mode="subsection" :current="current" @change="sectionChange"></u-subsection>
</view>

data

list:['答题模式','背题模式'],

在这里插入图片描述

题目滑动显示

使用swpier组件遍历questionList即可实现题目显示
在这里插入图片描述

<swiper class="swipe-box" @change="dexChange" :current="currentIndex">
	<swiper-item skip-hidden-item-layout="true" class="swipe-item" v-for="(item,index) in question" :key="index">
		<view class="stem">{
    {
    item.stem}}</view>
	</swiper-item>
</swiper>

题号跟随

参考了这篇文章
父子组件传参
swpier组件传值给父组件
父组件传值给导航栏组件
swiper部分，滑动时会调用dexChange函数传值给父组件

<swiper class="swipe-box" @change="dexChange" :current="currentIndex">
	<swiper-item skip-hidden-item-layout="true" class="swipe-item" v-for="(item,index) in question" :key="index">
		<view class="stem">{
    {
    item.stem}}</view>
	</swiper-item>
</swiper>

父组件监听后传值给导航栏组件即可实现

选项显示

父组件把每个question传给选项子组件

<view v-for="(option,itemindex) in options" class="ball">
		<view class="option-item" :class="{isright:(isRight(option,itemindex)),iserror:(isError(option,itemindex))}" @click="chooseOption(itemindex)" :key="index">
		{
    {
    option.option}}.{
    {
    option.content}}
		</view>
</view>
<view v-if="show" class="analysis">
	{
    {
    item.analysis}}
</view>

刷题导航栏

在这里插入图片描述
创建BottomBar组件

<template>
	<view class="bomBar-box">
		<view class="bomBar">
			<view class="left">
				<slot name="left"></slot>
			</view>
			<view class="center">
				<slot name="center"></slot>
			</view>
			<view class="right">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default{
    
		name:"BottomBar",
		data(){
    
			return{
    
				
			}
		},

	}
</script>

<style scoped lang="scss">
	.bomBar-box{
    
		display: flex;
		justify-content: space-around;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-shadow: 0 0 6rpx #9E9E9E;
		z-index: 9;
		background-color: white;
	}
	.bomBar{
    
		width: 90vw;
		display: flex;
		height: 8vh;   
		 // padding-bottom: 20rpx;
		font-size: $uni-font-size-sm;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		align-items: center;
		box-sizing: border-box;
	}
	.left,.right{
    
		height: 8vh;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 30vw;
	}
	
	.center{
    
		height: 8vh;
		flex:1;
		display: flex;
		justify-content:space-around;
		align-items: center;
	}
	
	.page-dark{
    
		 -webkit-filter:brightness(20%);
		 // color: $uni-dark-font;
	}
</style>

主页面调用组件

<BottomBar>
	<template v-slot:left>
		<view v-if="favCompu" class="bom-left" @click="favClick">
			<u-icon name="star" size="40rpx" color="#7f7f7f"></u-icon>
			<view>
				收藏
			</view>
		</view>
		<view v-else class="bom-left" @click="favClick">
			<u-icon name="star-fill" size="40rpx" color="#ffea47"></u-icon>
			<view>
				已收藏
			</view>
		</view>
	</template>
	<template v-slot:center>
		<view @click="openCard" class="bom-center">
			<u-icon name="list" size="42rpx" color="#7f7f7f"></u-icon>
			<view class="">
				{
    {
    currentIndex}}/{
    {
    questionList.length}}
			</view>

		</view>
	</template>
	<template v-slot:right>
		<view @click="openSet" class="bom-right">
			<u-icon name="setting" size="46rpx" color="#7f7f7f"></u-icon>
		</view>
	</template>
</BottomBar>

目前的UI
在这里插入图片描述

错题分析

刷题导航栏功能

使用 uni-popup 组件
安装过程可见本人另外一文
传送门: uni-ui安装

设置

<uni-popup ref="set">
	<view class="set-box">
		<view class="set" @longpress="copyID">
			长按复制该题ID
		</view>
		<view class="set">
			开启自动切换
			<u-switch v-model="isLoop"></u-switch>
		</view>
		<view class="set">
			暗色模式
			<u-switch v-model="isDark"></u-switch>
		</view>
	</view>
</uni-popup>