往期文章推荐:
一. 前言
为了帮助广大的软考和 PMP 考试的朋友们,我使用 uni-app 开发了一个小程序刷题工具,目的是希望给大家在进行软考考试的道路上助力成功,小程序一经发布后也得到了广大考试者的认可,很庆幸我能够帮助到他们。
既然有不少的人在使用它,那么我就会一直去迭代这个小工具,近期我也对它进行了一些功能优化和迭代更新,希望大家能够擅用它,也希望大家能够给我提意见和建议,让它有一个更好的发展,帮助更多的人,实现它应有的价值。
二. 有题记小程序
1. 简介
有题记小程序是我个人独立开发的一款 PMP 和软考做题小程序,目前已经涵盖以下题库资源:
-
软考高级
- 信息系统项目管理师:2018 年~ 2024 年综合、案例、论文真题,已更新最新题库
- 系统架构设计师:2018 年~ 2022 年综合、案例、论文真题
-
软考中级
- 网络工程师:2018 年~ 2022 年综合、案例真题
- 软件设计师:2018 年~ 2023 年综合、案例真题
-
PMP 题库
- 第六版 PMBOK 指南教材练习题,好多有意思的项目管理知识题目,可以试一下!
题库会一直更新,如果你的需求比较迫切,可以联系我进行优先添加!当前仅是添加了一些热门的软考项目考试,后续会不断更新。
2. 功能合集
已完成的功能如下所示:
- 考试项目管理
- 历年试题练习
- 收藏试题回顾
- 知识总结学习
- 考试日历规划
三. 新增功能
其实是完成了一个近期的迭代功能,主要包括了新首页,考试日历,收藏试题等的功能迭代
1. 新首页
本次首页更新规划了一个新首页,通过这个新的首页设计,我希望可以聚合功能入口,方便用户快速找到自己想要的功能或题库。新首页的设计主要添加了以下元素:
-
广告轮播位
- 平台为用户推荐的内容
-
试题入口
- 历年试题
- 收藏试题
-
考试日历
- 考试倒计时
- 内嵌日历
2. 考试日历
考试日历对于考试者来说,应该是一个比较关注的功能,你可以设置考试节点,来显示距离考试的具体天数。通过考试日期倒计时,是否可以给你一些紧迫感?
点击设置考试日期,选择具体日期后,页面即可出现考试倒计时的文案:距考试xx天
通过 dayjs 这个库,我们可以很方便的获取两个日期的差值,差异(Diff)可以返回指定单位下两个日期时间之间的差异。比如:
距今多少天,使用 dayjs 实现:
dayjs().diff('2024-11-23', 'day')
关于更多 Day.js 的使用,你可以参考以下文档: Day.js 中文文档
3. 收藏试题
我认为收藏试题是一个非常重要的功能,因为它可以帮助用户快速找到自己想要的题目,同时也可以帮助用户快速找到自己想要的答案。通过反复练习收藏题目,用户可以快速提升自己的学习能力,提高自己的做题效率。
其实,本次更新的重头戏在于收藏功能,因为在很早之前的初版,我是做过收藏功能的,而当时收藏功能是通过数据库实现的,但是现在,我将收藏功能通过微信小程序的本地存储实现了,简化了交互流程,为什么要通过本地存储实现呢?
很简单,因为之前,刷题是需要用户注册登录的,所以根据实际登录用户将数据存储到远端数据库中,可以很方便的关联登录用户来实现收藏功能,但是现在,取消了用户注册登录流程,所以将收藏功能通过微信小程序的本地存储实现,这种方法简单快捷。
接下来我们看一下收藏的整体流程是如何做的。
首先我们需要定义一个 json 数据格式,用于存储收藏的试题 id,以如下的形式存储:
json 格式如下:
{
paperId: '202221' // 试卷ID
paperName: '2022年下半年' // 试卷名称
paperLikes: [202201, 202202, 202203, 202204] // 收藏的试题id数组
projectId: 'xxxtxmgls' // 项目id
projectName: '信息系统项目管理师' // 项目名称
}
收藏单个试题:使用了 Promise
来处理异步操作,我们将一个值添加到一个名为 likes
的存储中,这个存储为一个对象,其中每个键对应一个包含 paperLikes
数组的对象。
function add(key, value) {
return new Promise((resolve, reject) => {
try {
const storage = new Store().get('likes')
let data = storage[key] || value
// 来合并两个 paperLikes 数组,并去除重复项。
data.paperLikes = [...new Set([...data.paperLikes, ...value.paperLikes])]
storage[key] = data
new Store().set('likes', storage, 'app')
resolve(storage)
} catch (e) {
reject(e)
}
})
}
注意:收藏试题时,应注意判断该试卷下是有其他收藏试题,我们应该注意是合并两个 paperLikes 数组,并去除重复项。
取消收藏单个试题:同样的,使用了 Promise
来处理异步操作,这个函数的目的是从一个名为 likes
的存储中移除指定的值。
// 取消收藏单个试题
function remove(key, value) {
return new Promise((resolve, reject) => {
try {
const storage = new Store().get('likes')
let data = storage[key]
data.paperLikes = data.paperLikes.filter(item => item !== value)
// 如果无收藏试题,则删除对应储存的对象
if (data.paperLikes.length === 0) {
delete storage[key]
} else {
storage[key] = data
}
new Store().set('likes', storage, 'app')
resolve(storage)
} catch (e) {
reject(e)
}
})
}
注意:取消收藏试题时,需要判断该试卷下是否还有其他收藏试题,如果没有,则删除对应试卷即可。
删除所有收藏的试题:以试卷为维度,删除整套试卷,自然而然的也就删除了本套试卷中所有的收藏试题,以下代码表示:以 Promise
来处理异步操作,从存储中移除指定键及其对应的值。
function removePaper(key) {
return new Promise((resolve, reject) => {
try {
const storage = new Store().get('likes')
delete storage[key]
new Store().set('likes', storage, 'app')
resolve(storage)
} catch (e) {
reject(e)
}
})
}
为什么使用 Promise?那是因为 Promise 提供了一个更为现代和简洁的方式来处理异步编程,能够更加标准化和统一性,更好的控制流和错误处理。
有了以上的方法,我们在添加收藏、取消收藏、删除所有收藏时是这么使用的:
// 添加收藏
function addLike() {
let value = {
projectId: 'projectId',
projectName: 'projectName',
paperId: 'paperId',
paperName: 'paperName',
paperLikes: ['questionId']
}
this.$api.like
.add(this.paperKey, value)
.then(res => {
this.$tips.toast('收藏成功', 'success')
})
.catch(() => {
this.$tips.toast('收藏失败', 'fail')
})
}
// 取消收藏
function removeLike() {
this.$api.like
.remove(this.paperKey, this.question.id)
.then(res => {
this.$tips.toast('取消收藏成功', 'success')
})
.catch(() => {
this.$tips.toast('取消收藏失败', 'fail')
})
}
// 删除试卷,移除该试卷下所有收藏试题
function removePaper() {
this.$tips.loading()
this.$api.like
.removePaper(this.paperId)
.then(res => {
setTimeout(() => {
this.$tips.loaded()
this.getLikeList()
this.$tips.toast('删除成功', 'success')
}, 1500)
})
.catch(() => {
setTimeout(() => {
this.$tips.loaded()
this.$tips.toast('删除失败', 'fail')
}, 1500)
})
}
四. 开发工具合集
有题记小程序是基于 uni-app 的 Vue.js 2.x 语言进行开发的,我在开发过程中主要使用了以下工具库:
1. UI 库:uView UI
uView 1.x 是基于 Vue.js 2.x 语言开发的 UI 框架,当然现在随着 uni-app 和 Vue.js 3.x 的流行,新项目 1.x 的版本已经很少人在使用了。
而现在基于 Vue 3.x 语言的 UI 框架也有不少,所以目前的选择性非常多。
2. UI 快速开发库:anyup uni-app
它是基于 uni-app 的一个组件库,同时基于项目开发最佳实践,不断优化迭代,使用该工具库可以方便、迅速的多平台开发 App、H5、微信小程序等。
因为该库是基于 Vue.js 2.x 的 uni-app,因此目前已经停止维护了,新版本正在紧急开发中。
3. Request 请求库:uni-http
uni-http 是基于 uni.request 实现一款小而美的请求工具,通过大约 100 行代码的实现,为 uni-app 项目打造一个简洁高效的请求库,提供统一的 Promise API。
相关文章:100 行代码打造小而美的 uni-app 请求库
官方文档:uni-http 官方文档
基于 uni.request,同时兼容 Vue.js 2 和 Vue.js 3
4. 网络请求流程构建库:FlyHttp
FlyHttp 是一个自动生成前端 service 层的工具类!目的是要在构建网络请求流程时,自动生成某些重复性的代码,可降低代码量 99%!
相关文章:前端小工具!加速构建你的 API 网络请求流程,全端通用!
官方文档:uni-http 官方文档
这是一个通用的 TypeScript 包,适用于任何在前端开发中,原则上你可以在任何能运行 JavaScript 的地方使用,与前端框架无关,可全端通用!
以上就是我在开发有题记小程序时,使用的第三方工具合集,大多数都是我在众多项目开中的经验总结,然后将其一步步进行了整合和优化,最终提取出来!
五. 获取方式
小程序名称:有题记
由于小程序未进行微信认证,当前在小程序市场搜索不到,同时在掘金又不方便放二维码,所以通过以下方式获取。 点击查看沸点获取 !
六. 说明
关于有题记小程序,如果你有更迫切的需求或更好的想法,欢迎评论区留言讨论,也可以通过以上沸点联系我!
如果文章对您有帮助,麻烦动动小手点点赞!关注我也有更多精彩的分享。