How the uniapp app enables fitness training and exercise planning

How does uniapp application realize fitness training and exercise plan

Fitness has become a hot topic for modern people to pursue a healthy life, and more and more people are beginning to value themselves. health and fitness. With the popularity of smart phones, mobile phone applications have become an important tool for people to obtain fitness information, record exercise data, and formulate exercise plans. In this article, we will learn how to use uniapp to develop a fitness training and exercise planning application and give specific code examples.

First, we need to create a uniapp project. Open the HBuilderX development environment, click New Project->uni-app, fill in the project name and path, and select the template required for the project. Then, click the Create button to complete the creation of the project.

Next, we need to install some necessary plug-ins to realize the functions of fitness training and exercise planning. In the sidebar of HBuilderX, click the plug-in market, search and install the following plug-ins: uni-calendar (calendar picker plug-in), uni-popup (pop-up layer plug-in) and uni-icons (icon library plug-in).

Create two pages under the pages folder of the project: training plan page (training-plan.vue) and exercise record page (exercise-log.vue). The training plan page is used to formulate and view daily fitness plans, and the exercise record page is used to record each exercise situation.

In the training plan page, we can use the uni-calendar plug-in to select a date and display the exercise plan for that date after selecting the date. First, introduce the uni-calendar plug-in:

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

In the onDateSelect method, we can obtain the exercise plan for that date from the background database based on the selected date and update it to the page.

In the exercise record page, we can use the uni-popup plug-in to pop up the exercise record filling form. First, introduce the uni-popup plug-in:

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

In the sports record page, we use the uni-popup component to achieve the effect of popping up the sports record filling form. When you click the "Add Exercise Record" button, a form will pop up. After completing the filling, click the "Save" button to save the record to the background database and update it to the page.

The above are some sample codes for how to implement fitness training and exercise plans through uniapp applications. Of course, in actual development, functions such as page layout, style design, and interaction with the backend database need to be further improved. But through these sample codes, we can learn how to use uniapp to develop a fitness training and exercise planning application. Hope this helps!

The above is the detailed content of How the uniapp app enables fitness training and exercise planning. For more information, please follow other related articles on the PHP Chinese website!