Wie die uniapp-App Fitnesstraining und Trainingsplanung ermöglicht

Wie implementiert die Uniapp-Anwendung Fitnesstraining und Übungspläne?

Fitness ist für moderne Menschen zu einem heißen Thema geworden, um ein gesundes Leben zu führen, und immer mehr Menschen beginnen, auf ihre Gesundheit und Figur zu achten. Mit der Beliebtheit von Smartphones sind Mobiltelefonanwendungen zu einem wichtigen Werkzeug für Menschen geworden, um Fitnessinformationen zu erhalten, Trainingsdaten aufzuzeichnen und Trainingspläne zu formulieren. In diesem Artikel erfahren Sie, wie Sie mit uniapp eine Anwendung für Fitnesstraining und Übungsplanung entwickeln und geben konkrete Codebeispiele.

Zuerst müssen wir ein Uniapp-Projekt erstellen. Öffnen Sie die HBuilderX-Entwicklungsumgebung, klicken Sie auf Neues Projekt->uni-app, geben Sie den Projektnamen und -pfad ein und wählen Sie die für das Projekt erforderliche Vorlage aus. Klicken Sie dann auf die Schaltfläche „Erstellen“, um die Erstellung des Projekts abzuschließen.

Als nächstes müssen wir einige notwendige Plug-Ins installieren, um Fitnesstraining und Trainingsplanungsfunktionen zu implementieren. Klicken Sie in der Seitenleiste von HBuilderX auf den Plug-in-Markt, suchen und installieren Sie die folgenden Plug-ins: Uni-Calendar (Kalenderauswahl-Plug-In), Uni-Popup (Popup-Layer-Plug-In) und Uni-Icons ( Symbolbibliothek-Plugin).

Erstellen Sie zwei Seiten im Seitenordner des Projekts: Trainingsplanseite (training-plan.vue) und Übungsaufzeichnungsseite (exercise-log.vue). Die Trainingsplanseite wird zum Formulieren und Anzeigen täglicher Fitnesspläne verwendet, und die Übungsaufzeichnungsseite dient zum Aufzeichnen jeder Trainingssituation.

Auf der Trainingsplanseite können wir mit dem Uni-Kalender-Plugin ein Datum auswählen und nach Auswahl des Datums den Trainingsplan für dieses Datum anzeigen. Stellen Sie zunächst das Uni-Kalender-Plugin vor:

<template>
  <view class="container">
    <view class="calendar">
      <uni-calendar @select="onDateSelect"></uni-calendar>
    </view>
    <view class="plan">
      <view v-for="(plan, index) in plans" :key="index" class="plan-item">
        <view class="time">{{ plan.time }}</view>
        <view class="content">{{ plan.content }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import uniCalendar from '@/uni_modules/uni-calendar/components/uni-calendar.vue'

export default {
  components: {
    uniCalendar
  },
  data() {
    return {
      plans: [
        { time: '09:00-10:00', content: '有氧运动' },
        { time: '15:00-16:00', content: '重量训练' },
        { time: '19:00-20:00', content: '拉伸运动' }
      ]
    }
  },
  methods: {
    onDateSelect(date) {
      // 根据选择的日期加载相应的运动计划
    }
  }
}
</script>

Mit der onDateSelect-Methode können wir den Sportplan für dieses Datum basierend auf dem ausgewählten Datum aus der Hintergrunddatenbank abrufen und auf der Seite aktualisieren.

Auf der Übungsaufzeichnungsseite können wir das Uni-Popup-Plug-in verwenden, um das Formular zum Ausfüllen der Übungsaufzeichnungen anzuzeigen. Stellen Sie zunächst das Uni-Popup-Plug-In vor:

<template>
  <view class="container">
    <view class="record">
      <view class="button" @click="showForm">添加运动记录</view>
      <view v-for="(record, index) in records" :key="index" class="record-item">
        <view class="time">{{ record.time }}</view>
        <view class="content">{{ record.content }}</view>
      </view>
    </view>
    <uni-popup v-model="showPopup" position="bottom" @close="onClosePopup">
      <view class="form">
        <input type="text" v-model="form.time" placeholder="时间">
        <textarea v-model="form.content" placeholder="运动内容"></textarea>
      </view>
      <view class="button" @click="saveRecord">保存</view>
    </uni-popup>
  </view>
</template>

<script>
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup.vue'

export default {
  components: {
    uniPopup
  },
  data() {
    return {
      records: [
        { time: '2021-01-01 09:00', content: '有氧运动30分钟' },
        { time: '2021-01-01 15:00', content: '重量训练1小时' }
      ],
      form: {
        time: '',
        content: ''
      },
      showPopup: false
    }
  },
  methods: {
    showForm() {
      this.showPopup = true
    },
    onClosePopup() {
      this.showPopup = false
    },
    saveRecord() {
      this.records.push({
        time: this.form.time,
        content: this.form.content
      })
      this.showPopup = false
      // 保存记录到后台数据库
    }
  }
}
</script>

Auf der Sportaufzeichnungsseite verwenden wir die Uni-Popup-Komponente, um den Effekt zu erzielen, dass das Formular zum Ausfüllen von Sportaufzeichnungen angezeigt wird. Wenn Sie auf die Schaltfläche „Übungsdatensatz hinzufügen“ klicken, wird ein Formular angezeigt. Klicken Sie nach Abschluss des Ausfüllens auf die Schaltfläche „Speichern“, um den Datensatz in der Hintergrunddatenbank zu speichern und auf der Seite zu aktualisieren.

Oben finden Sie einige Beispielcodes zur Implementierung von Fitnesstrainings- und Übungsplänen über Uniapp-Anwendungen. Natürlich müssen in der tatsächlichen Entwicklung Funktionen wie Seitenlayout, Stildesign und Interaktion mit der Backend-Datenbank weiter verbessert werden. Aber anhand dieser Beispielcodes können wir lernen, wie man mit uniapp eine Anwendung für Fitnesstraining und Übungsplanung entwickelt. Hoffe das hilft!

Das obige ist der detaillierte Inhalt vonWie die uniapp-App Fitnesstraining und Trainingsplanung ermöglicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!