uniapp 앱으로 피트니스 훈련과 운동 계획을 구현하는 방법

유니앱 애플리케이션은 피트니스 트레이닝과 운동 계획을 어떻게 구현하나요?

피트니스는 현대인들이 건강한 삶을 추구하기 위한 화두가 되었고, 점점 더 많은 사람들이 건강과 몸매에 관심을 갖기 시작했습니다. 스마트폰의 대중화로 인해 휴대폰 애플리케이션은 사람들이 피트니스 정보를 얻고, 운동 데이터를 기록하고, 운동 계획을 수립하는 데 중요한 도구가 되었습니다. 이 기사에서는 uniapp을 사용하여 피트니스 트레이닝 및 운동 계획 애플리케이션을 개발하는 방법을 알아보고 구체적인 코드 예제를 제공합니다.

우선 유니앱 프로젝트를 생성해야 합니다. HBuilderX 개발 환경을 열고 New Project->uni-app을 클릭한 후 프로젝트 이름과 경로를 입력하고 프로젝트에 필요한 템플릿을 선택합니다. 그런 다음 Create 버튼을 클릭하면 프로젝트 생성이 완료됩니다.

다음으로 피트니스 훈련 및 운동 계획 기능을 구현하는 데 필요한 몇 가지 플러그인을 설치해야 합니다. HBuilderX의 사이드바에서 플러그인 마켓을 클릭하고 다음 플러그인을 검색하여 설치하세요: uni-calendar(캘린더 선택기 플러그인), uni-popup(팝업 레이어 플러그인) 및 uni-icons( 아이콘 라이브러리 플러그인).

프로젝트의 페이지 폴더 아래에 훈련 계획 페이지(training-plan.vue)와 운동 기록 페이지(exercise-log.vue)라는 두 개의 페이지를 만듭니다. 훈련 계획 페이지는 일일 피트니스 계획을 수립하고 보는 데 사용되며, 운동 기록 페이지는 각 운동 상황을 기록하는 데 사용됩니다.

훈련 계획 페이지에서 유니캘린더 플러그인을 사용하여 날짜를 선택하고 날짜를 선택한 후 해당 날짜의 운동 계획을 표시할 수 있습니다. 먼저 유니 캘린더 플러그인을 소개합니다.

<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 플러그인을 소개합니다:

<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 앱으로 피트니스 훈련과 운동 계획을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!