uniapp アプリがフィットネス トレーニングと運動計画を可能にする仕組み

uniapp アプリケーションはフィットネス トレーニングと運動計画をどのように実現しますか。

現代人が健康的な生活を追求するためにフィットネスが注目のテーマとなっており、フィットネスを始める人が増えています。自分自身を大切にすること、健康とフィットネス。スマートフォンの普及に伴い、携帯電話アプリは人々がフィットネス情報を入手したり、運動データを記録したり、運動計画を立てたりするための重要なツールとなっています。この記事では、uniapp を使用してフィットネス トレーニングおよび運動計画アプリケーションを開発する方法を学び、具体的なコード例を示します。

まず、uniapp プロジェクトを作成する必要があります。 HBuilderX 開発環境を開き、[新しいプロジェクト] -> [uni-app] をクリックし、プロジェクト名とパスを入力し、プロジェクトに必要なテンプレートを選択します。次に、「作成」ボタンをクリックしてプロジェクトの作成を完了します。

次に、フィットネス トレーニングと運動計画の機能を実現するために必要なプラグインをインストールする必要があります。 HBuilderX のサイドバーで、プラグイン マーケットをクリックし、次のプラグインを検索してインストールします: uni-calendar (カレンダー ピッカー プラグイン)、uni-popup (ポップアップ レイヤー プラグイン)、および uni-icons (アイコン ライブラリ プラグイン)。

プロジェクトのページ フォルダーの下に、トレーニング計画ページ (training-plan.vue) と運動記録ページ (exercise-log.vue) の 2 つのページを作成します。トレーニングプランページは毎日のフィットネスプランの作成と閲覧に使用され、運動記録ページは各運動状況を記録するために使用されます。

トレーニング計画ページでは、uni-calendar プラグインを使用して日付を選択し、日付を選択した後にその日の運動計画を表示できます。まず、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>

onDateSelect メソッドでは、選択した日付に基づいてバックグラウンド データベースからその日付の運動計画を取得し、ページに更新できます。

運動記録ページでは、uni-popup プラグインを使用して運動記録記入フォームをポップアップできます。まず、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>

スポーツ記録ページでは、uni-popup コンポーネントを使用して、スポーツ記録入力フォームをポップアップする効果を実現します。 「運動記録を追加」ボタンをクリックするとフォームが表示されますので、入力完了後「保存」ボタンをクリックすると記録がバックグラウンドデータベースに保存され、ページに更新されます。

上記は、uniapp アプリケーションを通じてフィットネス トレーニングと運動計画を実装する方法のサンプル コードです。もちろん、実際の開発では、ページレイアウトやスタイルデザイン、バックエンドデータベースとの連携などの機能をさらに改善する必要があります。ただし、これらのサンプル コードを通じて、uniapp を使用してフィットネス トレーニングおよび運動計画アプリケーションを開発する方法を学ぶことができます。お役に立てれば！

以上がuniapp アプリがフィットネス トレーニングと運動計画を可能にする仕組みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。