趣味答题PK小程序：完整前后端实现与源码解析

原创于 2025-11-17 08:37:11 发布 · 807 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #答题小程序 #知识竞赛 #答题pk软件

趣味答题PK小程序：完整前后端实现与源码解析

在移动互联网时代，答题类小程序因互动性强、趣味性高而广受欢迎。本文将介绍一款“趣味答题PK小程序”的完整实现方案，包含前后端源码设计思路、核心功能模块及部署流程，帮助开发者快速搭建类似应用。
在这里插入图片描述

一、项目概述

功能定位：一款支持实时匹配、好友PK、随机答题的轻量级小程序，用户通过答题比拼知识储备，可获得积分、排行榜排名等激励。
技术栈：

前端：微信小程序（原生框架，WXML + WXSS + JavaScript）
后端：Node.js（Express框架）
数据库：MongoDB（存储用户数据、题库、对战记录）
实时通信：WebSocket（用于PK过程中的实时数据同步）

在这里插入图片描述

二、前端核心模块与源码

前端主要负责用户交互、答题界面渲染、实时数据展示，核心模块包括：

1. 首页与匹配模块

用户进入首页后可选择“随机匹配”或“邀请好友”，匹配成功后跳转至答题页面。
关键代码（匹配逻辑）：

// pages/match/match.js
Page({
  data: {
    isMatching: false,
    matchTime: 0
  },
  startMatch() {
    this.setData({ isMatching: true });
    // 发起匹配请求
    wx.request({
      url: 'https://your-server.com/api/match/start',
      method: 'POST',
      data: { uid: wx.getStorageSync('uid') },
      success: (res) => {
        if (res.data.code === 0) {
          this.startCountdown(); // 开始倒计时
          this.checkMatchResult(); // 轮询匹配结果
        }
      }
    });
  },
  checkMatchResult() {
    // 轮询服务器，检查是否匹配成功
    const timer = setInterval(() => {
      wx.request({
        url: 'https://your-server.com/api/match/check',
        data: { uid: wx.getStorageSync('uid') },
        success: (res) => {
          if (res.data.code === 0 && res.data.data.matchSuccess) {
            clearInterval(timer);
            // 跳转至答题页面，携带对战ID
            wx.navigateTo({
              url: `/pages/battle/battle?battleId=${res.data.data.battleId}`
            });
          }
        }
      });
    }, 1000);
  }
});

2. 答题PK模块

实时展示题目、选项，记录答题时间和正误，通过WebSocket同步双方答题进度。
在这里插入图片描述

关键代码（WebSocket通信）：

// pages/battle/battle.js
Page({
  data: {
    question: null,
    myAnswer: null,
    opponentAnswer: null,
    isAnswered: false
  },
  onLoad(options) {
    const { battleId } = options;
    this.battleId = battleId;
    // 连接WebSocket，实时同步对战数据
    this.socket = wx.connectSocket({
      url: `wss://your-server.com/ws/battle?battleId=${battleId}&uid=${wx.getStorageSync('uid')}`
    });
    // 监听服务器推送的题目
    this.socket.onMessage((res) => {
      const data = JSON.parse(res.data);
      if (data.type === 'question') {
        this.setData({ question: data.question, isAnswered: false });
      } else if (data.type === 'opponentAnswer') {
        this.setData({ opponentAnswer: data.answer });
        this.checkResult(); // 双方都答题后判断结果
      }
    });
  },
  submitAnswer(answer) {
    if (this.data.isAnswered) return;
    this.setData({ myAnswer: answer, isAnswered: true });
    // 向服务器发送自己的答案
    this.socket.send({
      data: JSON.stringify({
        type: 'myAnswer',
        answer: answer,
        battleId: this.battleId
      })
    });
  }
});

3. 结果与排行榜模块

展示PK结果（得分、用时），并更新全局排行榜。
关键代码（结果页）：

// pages/result/result.js
Page({
  data: {
    result: null,
    rankList: []
  },
  onLoad(options) {
    const { battleId } = options;
    // 获取对战结果
    wx.request({
      url: `https://your-server.com/api/battle/result?battleId=${battleId}`,
      success: (res) => {
        this.setData({ result: res.data.data });
      }
    });
    // 获取排行榜
    wx.request({
      url: 'https://your-server.com/api/rank',
      success: (res) => {
        this.setData({ rankList: res.data.data });
      }
    });
  }
});

三、后端核心模块与源码

后端负责业务逻辑处理、数据存储、实时通信管理，核心模块包括：

1. 服务器初始化与路由

基于Express搭建服务器，配置路由和中间件。
关键代码（server.js）：

const express = require('express');
const mongoose = require('mongoose');
const WebSocket = require('ws');
const app = express();

// 连接MongoDB
mongoose.connect('mongodb://localhost:27017/quizPK', { useNewUrlParser: true });

// 中间件
app.use(express.json());
app.use('/api/user', require('./routes/user'));
app.use('/api/match', require('./routes/match'));
app.use('/api/battle', require('./routes/battle'));

// 启动HTTP服务器
const server = app.listen(3000, () => {
  console.log('Server running on port 3000');
});

// 配置WebSocket
const wss = new WebSocket.Server({ server });
require('./ws/battle')(wss); // 处理对战相关的WebSocket通信

2. 匹配系统实现

基于队列机制实现用户匹配，当队列中有2名用户时，创建对战房间。
关键代码（matchService.js）：

const MatchQueue = []; // 匹配队列
const BattleModel = require('../models/battle');

// 加入匹配队列
function joinQueue(uid) {
  if (!MatchQueue.includes(uid)) {
    MatchQueue.push(uid);
    checkAndMatch(); // 检查是否可匹配
  }
}

// 检查并匹配用户
function checkAndMatch() {
  if (MatchQueue.length >= 2) {
    const [uid1, uid2] = MatchQueue.splice(0, 2);
    // 创建对战记录
    const battle = new BattleModel({
      players: [uid1, uid2],
      status: 'ongoing',
      questions: getRandomQuestions(5) // 随机5道题
    });
    battle.save().then((battleDoc) => {
      // 通知双方匹配成功
      notifyMatchSuccess(uid1, uid2, battleDoc._id);
    });
  }
}

module.exports = { joinQueue };

3. 题库与对战数据模型

使用Mongoose定义数据模型，存储用户、题目、对战记录。
关键代码（models/question.js）：

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const QuestionSchema = new Schema({
  content: String, // 题目内容
  options: [String], // 选项（数组）
  correctAnswer: Number, // 正确选项索引（0/1/2/3）
  category: String // 题目分类
});

module.exports = mongoose.model('Question', QuestionSchema);

4. WebSocket实时对战

处理对战过程中的题目推送、答案同步、结果计算。
关键代码（ws/battle.js）：

module.exports = function(wss) {
  wss.on('connection', (ws, req) => {
    const urlParams = new URLSearchParams(req.url.split('?')[1]);
    const battleId = urlParams.get('battleId');
    const uid = urlParams.get('uid');

    // 向当前用户推送第一题
    sendFirstQuestion(ws, battleId);

    // 接收用户答案
    ws.on('message', (data) => {
      const msg = JSON.parse(data);
      if (msg.type === 'myAnswer') {
        // 记录答案，并同步给对手
        recordAnswer(battleId, uid, msg.answer);
        broadcastToOpponent(wss, battleId, uid, {
          type: 'opponentAnswer',
          answer: msg.answer
        });
      }
    });
  });
};

四、部署与扩展

本地部署：
- 启动MongoDB服务，导入题库数据；
- 后端：node server.js；
- 前端：微信开发者工具导入项目，配置后端接口地址为http://localhost:3000。
线上部署：
- 后端部署至云服务器（如阿里云、腾讯云），配置SSL证书支持HTTPS/WSS；
- 数据库使用MongoDB Atlas云数据库；
- 前端通过微信小程序开发者工具上传，提交审核发布。
功能扩展：
- 增加题目分类（如影视、历史、科学）；
- 实现道具系统（如“提示”“跳过”）；
- 加入社交分享功能，支持邀请好友PK。

五、总结

本项目通过前后端分离架构，结合WebSocket实现了实时答题PK功能，核心在于匹配机制的设计和实时数据同步。开发者可基于此源码，根据需求调整题库难度、增加交互细节，快速打造一款个性化的趣味答题小程序。完整源码可通过GitHub搜索“quiz-pk-miniprogram”获取（包含数据库初始化脚本和详细部署文档）。