【实战】使用 uniapp 开发一个面试刷题小程序

2022年5月29日 485点热度 0人点赞 0条评论

前言

Hello，大家好，我是小马，受疫情影响，2022 年，我觉得是互联网最难的一年，直至 5 月也依然是互联网寒冬，大厂裁员的消息在微信群漫天飞舞，而招聘网站上的 HC 也越来越少，因此不少小厂也开始纷纷内卷，压低员工绩效，本应该晋级加薪的时间，也变成了杳无音信。难道我们就束手无策了吗？有句话说的好，“机会永远是留给有准备的人”，话虽不错，但有的人会说，“每天上班忙的要死，能完成任务就不错了，哪有时间准备面试刷题呢？”，因此我决定开发一个面试刷题小程序，让我们可以充分利用一些空闲时间提高自己，比如上班挤地铁的时候，排队做核酸的时候，都可以。

项目体验

面试狗，交易担保，放心买，面试刷题小程序小程序

为什么取名“面试狗”呢？取名模仿自鱼皮大佬的"面试鸭"网站，鸭是谐音，但狗却是“狗头保命”。

功能结构

面试刷题

选择题
简答题

文章

面试技巧
面试经验

视频

视频解析
模拟面试

因为视频都会有版权，个人也不能上架视频类小程序，所以放弃。

技术架构图

技术栈选择

关于跨端开发或者多端开发，一般会使用 Taro 或者 Uniapp

如果是 React 技术栈一般会选择 Taro
如果是 Vue 技术栈一般会选择 Uniapp

我个人本来爱好 react 技术栈，但由于 Uniapp 开发可以有免费的云开发环境（阿里云 50 个，腾讯云 1 个），果断选择 Uniapp。

初始化项目

在开始之前请先

注册一个微信小程序
下载微信小程序开发工具
注册一个 dcloud 账号
下载 hbuilderX

hbuilderX 是 dcloud 开发的代码编辑器，集成了便捷的云开发环境，可以方便我们调试。如果喜欢使用 vscode 的同学可以参考下面这篇文章。

使用 VSCode 开发 uni-app 教程[1]

新建一个空白项目，选择开启 unicloud，选择阿里云。

然后关联云服务空间，至此项目初始化完成。

表结构设计

uniCloud 提供了一个 JSON 格式的文档型数据库。顾名思义，数据库中的每条记录都是一个 JSON 格式的文档。所以只需要保存 JSON 格式的数据就会自动往数据库里面插入一条记录。既然是文档形数据数据库，那么我们为什么要设计数据结构呢，别着急，这个在后面有大用处，我们先按关系形数据库设计表结构。

打开云数据库控制台，新建一张表，取名为 fe-question, 在表结构中输入以下 json，

{
  "bsonType": "object",
  "required": [],
  "permission": {
    "read": true,
    "create": true,
    "update": true,
    "delete": true
  },
  "properties": {
    "_id": {
      "description": "ID，系统自动生成"
    },
    "title": {
      "bsonType": "string",
      "title": "标题",
      "description": "标题",
      "label": "标题",
      "trim": "both"
    },
    "desc": {
      "bsonType": "string",
      "title": "描述",
      "description": "描述",
      "label": "描述",
      "trim": "both"
    },
    "explanation": {
      "bsonType": "string",
      "title": "解析",
      "description": "解析",
      "label": "解析",
      "trim": "both"
    },
    "tagId": {
      "bsonType": "number",
      "title": "tag",
      "description": "标签",
      "label": "标签",
      "trim": "both"
    }
  }
}

这里我就罗列了几个重要字段。表结构创建完成了，接下来我们需要收集下面试题。

数据收集

题目来源

大厂面试题每日一题[2]
每日一题[3]
前端面试[4]
牛客网 - 互联网求职神器和备考学习平台[5]
赛码网 - IT 笔试面试加分利器[6]
掘金面试标签[7]

建完表后我们要往表中添加一些数据，这里可以大家可以自行整理，当然也可以使用 node 爬虫，
这里就列几个可能用到的 JS 库

axios 用于爬取网页内容
cheerio[8] 是服务端的 jquery api，用于获取 dom 节点数据
turndown[9] 将 html 转化为 markdown

比如牛客网只需要直接爬接口就可以了

const axios = require("axios");
const fs = require("fs");
const _ = require("lodash");

function sleep(time) {
  return new Promise((reslove) => setTimeout(reslove, time));
}

const headers = {
  "content-type": "application/json; charset=utf-8",
  "user-agent":
    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36",
};
const listUrl =
  "https://www.nowcoder.com/api/questiontraining/interview/jobQuestionList";

const detailUrl =
  "https://www.nowcoder.com/api/questiontraining/interview/jobQuestionDetail";

let result = [];

const fetchList = async (page = 1) => {
  console.log("请求第" + page + "页");
  const res = await axios
    .get(listUrl, {
      params: {
        questionJobId: 156,
        questionClassifyId: 0,
        size: 50,
        page,
        _: new Date().getTime(),
      },
      headers,
    })
    .then((res) => {
      return res.data;
    });
  if (res.data.subjectList.length > 0) {
    await fetchDetail(res.data.subjectList);
    await fetchList(page + 1);
  } else {
    console.log("爬完了");
    fs.writeFileSync("fe-question.json", JSON.stringify(result));
  }
};

const fetchDetail = async (data) => {
  for (let index = 0; index < data.length; index++) {
    const item = data[index];
    //await sleep(1000);
    const res = await axios
      .get(detailUrl, {
        params: {
          questionId: item.questionId,
          questionJobId: item.questionJobId,
          questionClassifyId: 0,
          _: new Date().getTime(),
        },
        headers,
      })
      .then((res) => {
        return res.data;
      });
    if (res && res.data) {
      console.log("正在保存：" + res.data.title);

      result.push({
        explanation: res.data.referenceAnswer,
        title: res.data.title,
        desc: res.data.content,
        tag: _.get(res.data.questionTags, "[0].name"),
      });
    }
  }
};
fetchList();

上面代码，可以用于很多类似网站，先爬列表再爬详情这样的接口数据， sleep函数可以自行控制，这样可以防止服务端阻止爬虫，如有些网站需要登录，可以将cookie复制出来，保存在headers 中

云函数获取数据

有了数据，接下来我们就需要实现后端逻辑，也就是接口部分。新建云函数

在 hbuilderX 中选择 cloudFunctions，右键新建云函数，输入函数名称 question-detail新建完成后，会在 index.js 中生成最简单的云函数代码。

'use strict';
exports.main = async (event, context) => {
	//event为客户端上传的参数
	console.log('event : ', event)

	//返回数据给客户端
	return event
};

event 为客户端上传的参数，return 返回数据给客户端，我们修改成如下代码

'use strict';
exports.main = async (event, context) => {
	const db = uniCloud.database();
	const res = await db.collection('fe-question').doc(event.id).get()
	//返回数据给客户端
	return res.data[0]
};

这样就可以根据 id 查询面试题详情了。那么要如何调试呢，hbuilderX 可以直接配置请求参数，输入请求参数为 JSON 格式

然后点击运行本地云函数，这样就可以直接运行云函数，拿到返回的 JSON 数据。

数据请求

前端页面遵循 vue 语法，只不过数据请求我们必须用 uniCloud 帮我封装好的函数请求数据，

假设我们现在要调用下刚才的面试题详情的云函数，那么前端可以通过如下方式调用这个云函数。

// promise方式
uniCloud.callFunction({
    name: 'fe-question',
    data: { id: 1 }
  })
  .then(res => {
    this.detail=res.result
  });

// callback方式
uniCloud.callFunction({
	name: 'fe-question',
	data: { id: 1 },
	success(){},
	fail(){},
	complete(){}
});

云函数执行结果会存在 result 中，一般会在 onLoad 生命周期中请求数据。

到此，我们的面试小程序前后端可以联调啦。

Markdown 解析

Towxml 是一个可将 HTML、Markdown 转为微信小程序 WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中 Markdown、HTML 不能直接渲染的问题。并且在有详情的文档，如何在 uniapp 中使用？可以参考这份文档[10]，这里我不过多赘述。大家若有相关需求，可以参考文档进行开发。