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

Posted 2022-11-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实战使用 uniapp 开发一个面试刷题小程序相关的知识，希望对你有一定的参考价值。

前言

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

项目体验

微信小程序搜索面试狗或扫码体验。

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

功能结构

面试刷题

选择题
简答题

文章

面试技巧
面试经验

视频

~~视频解析~~
~~模拟面试~~

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

技术架构图

【实战】使用

技术栈选择

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

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

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

初始化项目

在开始之前请先

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

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

使用 VSCode 开发 uni-app 教程

【实战】使用

新建一个空白项目，选择开启 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"

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

数据收集

题目来源

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

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

axios 用于爬取网页内容
cheerio 是服务端的 jquery api，用于获取 dom 节点数据
turndown 将 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 中使用？可以参考这份文档，这里我不过多赘述。大家若有相关需求，可以参考文档进行开发。