简介

移动端采用dcloud的uni-app框架进行开发，已实现对微信小程序的兼容。

以下内容是对程序目录结构及其基本功能的简要概述：

api

将API接口按功能分类存放于不同文件中，方便集中管理，例如user.js、login.js。

user.js

import request from '@/request/request'

export function userGet(parm) {
	return request.post('/user/get', parm);
}

user.js

import request from '@/request/request'

export function loginIn(parm) {
	return request.post('/login/in', parm);
}
export function loginOut(parm) {
	return request.post('/login/out', parm);
}

components

为了提升开发效率和界面复用性，我们将常用的界面元素抽取并封装成了组件，如倒计时、试题、列表卡片等。

xm-empty.vue

<template>
	<view class="xm-empty">
		<image src="@/static/img/list-blank.png" class="xm-empty-img"></image>
		<view class="xm-empty-txt">暂无数据</view>
	</view>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
	.xm-empty {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.xm-empty-img {
			height: 280rpx;
			width: 280rpx;
		}
		.xm-empty-txt {
			margin-top: 20rpx;
			color: #999;
		}
	}
</style>

pages

存放页面相关文件，如首页、考试等页面的实现。

request

HTTP请求封装处理，包括在请求前自动附加鉴权令牌，以及在鉴权失败时自动重定向首页等。

static

存放静态资源，如图标、图片、配置文件等。

• config.js 打包h5后，允许重新配置后端服务的ip和端口。
• config-wx.js 打包微信小程序后，允许重新配置后端服务的ip和端口。

config.js

window.server = {
	BASE_URL: 'http://127.0.0.1:8000/api'
}

config-wx.js

export const BASE_URL = 'http://127.0.0.1:8000/api';

stores

使用Pinia状态管理库，实现多页面间的状态共享，如用户登录信息。

user.js

export const useUserStore = defineStore(
	'user',
	() => {
		const user = ref({
			id: 0,
			name: '',
			type: 0,
			accessToken: '',
			sysName: ''
		});
		return { user };
	},
);

ts

存放TypeScript文件，利用静态类型检查机制，实现代码即时排错，提高代码质量，如我的考试接口在代码中的应用。

myExam.d.ts

// 我的考试接口
export interface MyExam {
	examId: number | null; // 考试ID
	userId: number | null; // 用户ID
	answerStartTime: string; //答题开始时间（yyyy-MM-dd HH:mm:ss）
	answerEndTime: string; //答题结束时间（yyyy-MM-dd HH:mm:ss）
	markStartTime: string; //阅卷开始时间（yyyy-MM-dd HH:mm:ss）
	markEndTime: string; //阅卷结束时间
	objectiveScore: number | null; //客观题分数
	totalScore: number | null; //总分数
	state: number | null; // 状态（1：未考试；2：考试中；3：已交卷；）
	markState: number | null; //阅卷状态（1：未阅卷；2：阅卷中；3：已阅卷；）
	answerState: number | null; //答题状态（1：及格；2：不及格）
	no: number | null; // 排名
}

myPaper.vue

<template>
	<xm-count-down
		:expireTime="myExam.answerEndTime"
		@end="finishAuto"
		preTxt=" 剩余"
		color="#8F939C"
		@change="percent"
		class="mypaper-head__time-count-down"
	></xm-count-down>
</template>

<script lang="ts" setup>
const myExam = reactive<MyExam>({
	examId: null, // 我的考试信息
	userId: null,
	answerStartTime: '',
	answerEndTime: '',
	markStartTime: '',
	markEndTime: '',
	objectiveScore: null,
	totalScore: null,
	state: null,
	markState: null,
	answerState: null,
	no: null
});

// 成绩预览
async function scoresView(queryCount: number = 6) {
	uni.showLoading({ title: '成绩查询中', mask: true });
	for (let i = 0; i < queryCount; i++) {
		if (i >= 5) {
			prompt(`查询失败，请稍后再次查询`);
			return;
		}

		await new Promise((res) => setTimeout(res, 1000));
		await myExamQuery();

		if (myExam.markState == 2) {
			uni.hideLoading(); // 主观题需人工阅卷，先展示客观题得分
			prompt(`客观题${myExam.objectiveScore}分，总分请于${exam.markEndTime}后查询`);
			return;
		}
		if (myExam.markState == 3) {
			uni.hideLoading();
			prompt(`客观题${myExam.objectiveScore}分，总${myExam.totalScore}分, 成绩${dictStore.getValue('ANSWER_STATE', myExam.answerState)}`);
			return;
		}
	}
}
</script>