零基础学习如何在Uni-App构建答题类小程序

前端

2022-12-19 08:15:26

创建 Uni-App 小程序：打造你的答题类小程序

一、创建 Uni-App 小程序

安装 Uni-App CLI： 在终端中运行 npm install -g @uni-app/cli。
创建新项目： 运行 uni-app init my-project，选择小程序模板。
填写项目信息： 包括项目名称、、开发者等。
打开项目： 在终端中导航到项目目录，然后运行 npm run dev。

二、开发答题类小程序

1. 创建页面

在 src 目录下创建一个 pages 目录。
在 pages 目录下创建一个 index.vue 文件。

2. 编写 Vue 组件代码

在 index.vue 文件中添加以下代码：

<template>
  <view class="container">
    <view class="question">
      {{ question }}
    </view>
    <view class="answers">
      <view class="answer" v-for="answer in answers" :key="answer" @click="selectAnswer(answer)">
        {{ answer }}
      </view>
    </view>
    <view class="status">
      {{ status }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      question: '',
      answers: [],
      status: ''
    }
  },
  methods: {
    selectAnswer(answer) {
      if (answer === this.correctAnswer) {
        this.status = '正确'
      } else {
        this.status = '错误'
      }
    }
  },
  created() {
    this.getQuestion()
  },
  methods: {
    getQuestion() {
      // 从服务器获取题目
      this.question = '1 + 1 = ?'
      this.answers = ['2', '3', '4']
      this.correctAnswer = '2'
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}
.question {
  font-size: 24px;
  margin-bottom: 20px;
}
.answers {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.answer {
  padding: 10px;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}
.status {
  font-size: 16px;
  margin-top: 20px;
}
</style>