uniapp應用如何實現健身訓練和運動計劃

健身已經成為現代人追求健康生活的一大熱門話題，越來越多的人開始重視自己的健康和身材。而隨著智能手機的普及，手機應用成為了人們獲取健身信息、記錄運動數據、制定運動計劃的重要工具。在這篇文章中，我們將學習如何利用uniapp開發一個健身訓練和運動計劃的應用，并給出具體的代碼示例。

首先，我們需要創建一個uniapp項目。打開HBuilderX開發環境，點擊新建項目->uni-app，填寫項目名稱和路徑，選擇項目所需的模板。然后，點擊創建按鈕完成項目的創建。

接下來，我們需要安裝一些必要的插件來實現健身訓練和運動計劃的功能。在HBuilderX的側邊欄中，點擊插件市場，搜索并安裝以下插件：uni-calendar（日歷選擇器插件）、uni-popup（彈出層插件）和uni-icons（圖標庫插件）。

在項目的pages文件夾下創建兩個頁面：訓練計劃頁（training-plan.vue）和運動記錄頁（exercise-log.vue）。訓練計劃頁用于制定和查看每日的健身計劃，運動記錄頁用于記錄每次的運動情況。

在訓練計劃頁中，我們可以使用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/ponents/uni-calendar.vue'export default {  ponents: {    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/ponents/uni-popup.vue'export default {  ponents: {    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組件來實現彈出運動記錄填寫表單的效果。點擊“添加運動記錄”按鈕時，會彈出表單，填寫完成后，點擊“保存”按鈕，將記錄保存到后臺數據庫，并更新到頁面中。