Comment l'application uniapp permet l'entraînement physique et la planification des exercices

Comment l'application uniapp met-elle en œuvre des programmes d'entraînement physique et d'exercices

Le fitness est devenu un sujet brûlant pour les gens modernes qui souhaitent mener une vie saine, et de plus en plus de gens commencent à prêter attention à leur santé et à leur silhouette. Avec la popularité des téléphones intelligents, les applications de téléphonie mobile sont devenues un outil important permettant aux utilisateurs d'obtenir des informations sur la condition physique, d'enregistrer des données d'exercice et de formuler des programmes d'exercices. Dans cet article, nous apprendrons comment utiliser uniapp pour développer une application d'entraînement physique et de planification d'exercices et donnerons des exemples de code spécifiques.

Tout d'abord, nous devons créer un projet uniapp. Ouvrez l'environnement de développement HBuilderX, cliquez sur Nouveau projet->uni-app, renseignez le nom et le chemin du projet, puis sélectionnez le modèle requis pour le projet. Cliquez ensuite sur le bouton Créer pour terminer la création du projet.

Ensuite, nous devons installer certains plug-ins nécessaires pour mettre en œuvre les fonctions d'entraînement physique et de planification d'exercices. Dans la barre latérale de HBuilderX, cliquez sur le marché des plug-ins, recherchez et installez les plug-ins suivants : uni-calendar (plug-in de sélection de calendrier), uni-popup (plug-in de couche contextuelle) et uni-icons ( plug-in de bibliothèque d'icônes).

Créez deux pages sous le dossier pages du projet : la page du plan d'entraînement (training-plan.vue) et la page d'enregistrement des exercices (exercise-log.vue). La page du plan d'entraînement est utilisée pour formuler et afficher des plans de remise en forme quotidiens, et la page d'enregistrement des exercices est utilisée pour enregistrer chaque situation d'exercice.

Dans la page du plan d'entraînement, nous pouvons utiliser le plug-in uni-calendar pour sélectionner une date et afficher le plan d'exercices pour cette date après avoir sélectionné la date. Tout d'abord, introduisez le plug-in uni-calendar :

<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>

Dans la méthode onDateSelect, nous pouvons obtenir le plan sportif pour cette date à partir de la base de données d'arrière-plan en fonction de la date sélectionnée et le mettre à jour sur la page.

Dans la page du relevé d'exercices, nous pouvons utiliser le plug-in uni-popup pour faire apparaître le formulaire de remplissage du relevé d'exercices. Tout d'abord, introduisez le plug-in uni-popup :

<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>

Dans la page des records sportifs, nous utilisons le composant uni-popup pour obtenir l'effet de faire apparaître le formulaire de remplissage du record sportif. Lorsque vous cliquez sur le bouton « Ajouter un enregistrement d'exercice », un formulaire apparaîtra. Après avoir terminé le remplissage, cliquez sur le bouton « Enregistrer » pour enregistrer l'enregistrement dans la base de données en arrière-plan et le mettre à jour sur la page.

Ci-dessus sont quelques exemples de codes sur la façon de mettre en œuvre des programmes d'entraînement physique et d'exercices via les applications Uniapp. Bien entendu, dans le développement réel, des fonctions telles que la mise en page, la conception du style et l'interaction avec la base de données principale doivent être encore améliorées. Mais grâce à ces exemples de codes, nous pouvons apprendre à utiliser uniapp pour développer une application d’entraînement physique et de planification d’exercices. J'espère que cela aide!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!