Cara apl uniapp mendayakan latihan kecergasan dan perancangan senaman

Bagaimana aplikasi uniapp merealisasikan latihan kecergasan dan pelan senaman

Kecergasan telah menjadi topik hangat bagi orang moden untuk meneruskan kehidupan yang sihat, dan ia semakin popular Semakin ramai yang mula mementingkan kesihatan dan bentuk badan. Dengan populariti telefon pintar, aplikasi telefon mudah alih telah menjadi alat penting untuk orang ramai mendapatkan maklumat kecergasan, merekod data senaman dan merumuskan rancangan senaman. Dalam artikel ini, kita akan belajar cara menggunakan uniapp untuk membangunkan aplikasi perancangan latihan kecergasan dan senaman serta memberikan contoh kod khusus.

Pertama, kita perlu membuat projek uniapp. Buka persekitaran pembangunan HBuilderX, klik Projek Baharu->uni-app, isikan nama dan laluan projek, dan pilih templat yang diperlukan untuk projek itu. Kemudian, klik butang Cipta untuk melengkapkan penciptaan projek.

Seterusnya, kita perlu memasang beberapa pemalam yang diperlukan untuk merealisasikan fungsi latihan kecergasan dan perancangan senaman. Dalam bar sisi HBuilderX, klik pasaran pemalam, cari dan pasang pemalam berikut: uni-kalendar (pemalam pemilih kalendar), uni-popup (pemalam lapisan pop timbul) dan ikon uni (pemalam perpustakaan ikon).

Buat dua halaman di bawah folder halaman projek: halaman pelan latihan (training-plan.vue) dan halaman rekod latihan (exercise-log.vue). Halaman rancangan latihan digunakan untuk merumus dan melihat rancangan kecergasan harian, dan halaman rekod latihan digunakan untuk merekod setiap situasi senaman.

Dalam halaman rancangan latihan, kami boleh menggunakan pemalam uni-kalendar untuk memilih tarikh dan memaparkan pelan latihan untuk tarikh tersebut selepas memilih tarikh. Mula-mula, perkenalkan pemalam uni-kalendar:

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

Dalam kaedah onDateSelect, kita boleh mendapatkan rancangan sukan untuk tarikh tersebut daripada pangkalan data latar belakang berdasarkan tarikh yang dipilih dan mengemas kininya ke halaman.

Dalam halaman rekod sukan, kita boleh menggunakan pemalam uni-popup untuk memaparkan borang pengisian rekod sukan. Mula-mula, perkenalkan pemalam 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>

Dalam halaman rekod sukan, kami menggunakan komponen uni-popup untuk mencapai kesan munculan borang pengisian rekod sukan. Apabila anda mengklik butang "Tambah Rekod Latihan", borang akan muncul Selepas melengkapkan pengisian, klik butang "Simpan" untuk menyimpan rekod ke pangkalan data latar belakang dan mengemas kininya ke halaman.

Di atas ialah beberapa contoh kod untuk cara melaksanakan latihan kecergasan dan rancangan senaman melalui aplikasi uniapp. Sudah tentu, dalam pembangunan sebenar, fungsi seperti susun atur halaman, reka bentuk gaya, dan interaksi dengan pangkalan data bahagian belakang perlu dipertingkatkan lagi. Tetapi melalui kod sampel ini, kita boleh belajar cara menggunakan uniapp untuk membangunkan aplikasi perancangan latihan dan latihan kecergasan. Harap ini membantu!

Atas ialah kandungan terperinci Cara apl uniapp mendayakan latihan kecergasan dan perancangan senaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!