使用微信小程序开发制作一个简单的在线问答应用

下面是一个简单的在线问答小程序的代码案例，包括前端和后端的相关代码。

前端代码：

<!-- index.wxml -->
<view class="container">
  <view class="question">
    <text class="question-text">{{ question }}</text>
  </view>
  <view class="answers">
    <block wx:for="{{ answers }}" wx:key="{{ index }}">
      <view class="answer" bindtap="selectAnswer" data-index="{{ index }}">
        <text class="answer-text">{{ item }}</text>
      </view>
    </block>
  </view>
</view>

/* index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.question {
  margin-bottom: 20px;
}

.question-text {
  font-size: 20px;
  font-weight: bold;
}

.answer {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

.answer-text {
  font-size: 16px;
}

.answer.selected {
  background-color: #ccc;
}

// index.js
Page({
  data: {
    question: '',
    answers: [],
    selectedAnswerIndex: null
  },
  onLoad: function () {
    this.fetchQuestion();
  },
  fetchQuestion: function () {
    // 发送请求获取问题和答案选项
    wx.request({
      url: 'https://api.example.com/question',
      success: (res) => {
        this.setData({
          question: res.data.question,
          answers: res.data.answers,
          selectedAnswerIndex: null
        });
      },
      fail: (err) => {
        console.error(err);
      }
    });
  },
  selectAnswer: function (e) {
    const index = e.currentTarget.dataset.index;
    this.setData({
      selectedAnswerIndex: index
    });
  },
  submitAnswer: function () {
    const index = this.data.selectedAnswerIndex;
    if (index === null) {
      wx.showToast({
        title: '请选择一个答案',
        icon: 'none'
      });
      return;
    }

    // 提交答案到服务器
    const selectedAnswer = this.data.answers[index];
    wx.request({
      url: 'https://api.example.com/answer',
      data: {
        answer: selectedAnswer
      },
      method: 'POST',
      success: (res) => {
        if (res.data.correct) {
          wx.showToast({
            title: '回答正确',
            icon: 'success'
          });
        } else {
          wx.showToast({
            title: '回答错误',
            icon: 'none'
          });
        }
      },
      fail: (err) => {
        console.error(err);
      }
    });

    // 获取下一个问题
    this.fetchQuestion();
  }
});

后端代码：

// app.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());

const questions = [
  {
    id: 1,
    question: '2 + 2 = ?',
    answers: ['3', '4', '5', '6'],
    correctAnswerIndex: 1
  },
  {
    id: 2,
    question: 'What is the capital city of France?',
    answers: ['Berlin', 'Paris', 'London', 'Madrid'],
    correctAnswerIndex: 1
  }
];

let currentQuestionIndex = 0;

app.get('/question', (req, res) => {
  const question = questions[currentQuestionIndex];
  res.json({
    question: question.question,
    answers: question.answers
  });
});

app.post('/answer', (req, res) => {
  const selectedAnswer = req.body.answer;
  const question = questions[currentQuestionIndex];

  if (selectedAnswer === question.answers[question.correctAnswerIndex]) {
    res.json({ correct: true });
  } else {
    res.json({ correct: false });
  }

  currentQuestionIndex = (currentQuestionIndex + 1) % questions.length;
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

以上代码示例中，前端使用了微信小程序的框架，通过发送请求获取问题和答案选项，并且可以选择一个答案进行提交。提交答案后，前端会发送请求将答案提交到后端服务器进行判断，返回结果并提示用户答案是否正确。后端使用了Node.js和Express框架，提供了获取问题和处理答案提交的API接口。

你可以根据需要修改问题和答案选项，以及自定义后端的问题列表。同时，你也可以扩展这个应用，添加更多的问题和功能。以上代码只是一个简单的示例，希望能够帮助你开始开发一个在线问答小程序。