使用微信小程序开发制作一个简易的健身计划应用

以下是一个简单的健身计划微信小程序的代码案例。这个应用包含了计算BMI指数、制定计划和记录每天的健身活动等功能。

首先，我们需要创建一个新的微信小程序项目。在开发者工具中，选择新建项目，填写相应的项目信息，并选择小程序的目录。然后，我们就可以开始编写代码了。

1. 在 app.json 文件中设置小程序的基本信息和页面路径：

{
  "pages": [
    "pages/index/index",
    "pages/plan/plan",
    "pages/record/record",
    "pages/profile/profile"
  ],
  "window": {
    "navigationBarTitleText": "健身计划小程序",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/home.png",
        "selectedIconPath": "assets/home_selected.png"
      },
      {
        "pagePath": "pages/plan/plan",
        "text": "计划",
        "iconPath": "assets/plan.png",
        "selectedIconPath": "assets/plan_selected.png"
      },
      {
        "pagePath": "pages/record/record",
        "text": "记录",
        "iconPath": "assets/record.png",
        "selectedIconPath": "assets/record_selected.png"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "个人",
        "iconPath": "assets/profile.png",
        "selectedIconPath": "assets/profile_selected.png"
      }
    ]
  },
  "requiredBackgroundModes": ["audio"],
  "networkTimeout": {
    "request": 5000
  }
}

1. 创建首页页面，在 pages/index 目录下创建 index.json、index.js 和 index.wxml 文件：

index.json：

{
  "navigationBarTitleText": "首页"
}

index.js：

Page({
  data: {
    bmi: 0,
    height: 0,
    weight: 0
  },
  calculateBMI: function() {
    const bmi = this.data.weight / (this.data.height * this.data.height);
    this.setData({
      bmi: bmi.toFixed(1)
    });
  },
  updateHeight: function(e) {
    this.setData({
      height: Number(e.detail.value)
    });
  },
  updateWeight: function(e) {
    this.setData({
      weight: Number(e.detail.value)
    });
  }
});

index.wxml：

<view class="container">
  <view class="form-item">
    <text>身高：</text>
    <input type="digit" bindinput="updateHeight" placeholder="请输入身高（米）" />
  </view>
  <view class="form-item">
    <text>体重：</text>
    <input type="digit" bindinput="updateWeight" placeholder="请输入体重（千克）" />
  </view>
  <view class="form-item">
    <button bindtap="calculateBMI">计算BMI</button>
  </view>
  <view class="result" wx:if="{{ bmi > 0 }}">
    <text>BMI指数：</text>
    <text>{{ bmi }}</text>
  </view>
</view>

1. 创建计划页面，在 pages/plan 目录下创建 plan.json、plan.js 和 plan.wxml 文件：

plan.json：

{
  "navigationBarTitleText": "制定计划"
}

plan.js：

Page({
  data: {
    plan: {
      monday: "",
      tuesday: "",
      wednesday: "",
      thursday: "",
      friday: "",
      saturday: "",
      sunday: ""
    }
  },
  updatePlan: function(e) {
    const day = e.currentTarget.dataset.day;
    const value = e.detail.value;
    this.setData({
      [`plan.${day}`]: value
    });
  },
  savePlan: function() {
    const plan = this.data.plan;
    // 将计划保存到本地存储中
    wx.setStorageSync("plan", plan);
    wx.showToast({
      title: "计划已保存"
    });
  }
});

plan.wxml：

<view class="container">
  <view class="form-item">
    <text>周一：</text>
    <input bindinput="updatePlan" data-day="monday" placeholder="请输入计划" />
  </view>
  <view class="form-item">
    <text>周二：</text>
    <input bindinput="updatePlan" data-day="tuesday" placeholder="请输入计划" />
  </view>
  <view class="form-item">
    <text>周三：</text>
    <input bindinput="updatePlan" data-day="wednesday" placeholder="请输入计划" />
  </view>
  <view class="form-item">
    <text>周四：</text>
    <input bindinput="updatePlan" data-day="thursday" placeholder="请输入计划" />
  </view>
  <view class="form-item">
    <text>周五：</text>
    <input bindinput="updatePlan" data-day="friday" placeholder="请输入计划" />
  </view>
  <view class="form-item">
    <text>周六：</text>
    <input bindinput="updatePlan" data-day="saturday" placeholder="请输入计划" />
  </view>
  <view class="form-item">
    <text>周日：</text>
    <input bindinput="updatePlan" data-day="sunday" placeholder="请输入计划" />
  </view>
  <view class="form-item">
    <button bindtap="savePlan">保存</button>
  </view>
</view>

1. 创建记录页面，在 pages/record 目录下创建 record.json、record.js 和 record.wxml 文件：

record.json：

{
  "navigationBarTitleText": "记录"
}

record.js：

Page({
  data: {
    records: []
  },
  onShow: function() {
    const records = wx.getStorageSync("records") || [];
    this.setData({
      records: records
    });
  },
  addRecord: function() {
    const date = new Date().toLocaleDateString();
    wx.navigateTo({
      url: `/pages/record/detail?date=${date}`
    });
  }
});

record.wxml：

<view class="container">
  <view class="record-list" wx:for="{{ records }}" wx:key="{{ index }}">
    <text>{{ item.date }}</text>
    <text>活动：{{ item.activity }}</text>
  </view>
  <view class="add-button">
    <button bindtap="addRecord">添加记录</button>
  </view>
</view>

1. 创建记录详情页面，在 pages/record 目录下创建 detail 目录，并在该目录下创建 detail.json、detail.js 和 detail.wxml 文件：

detail.json：

{
  "navigationBarTitleText": "记录详情"
}

detail.js：

Page({
  data: {
    date: "",
    activity: ""
  },
  onLoad: function(options) {
    const date = options.date;
    const records = wx.getStorageSync("records") || [];
    const record = records.find(item => item.date === date) || {};
    this.setData({
      date: date,
      activity: record.activity || ""
    });
  },
  updateActivity: function(e) {
    this.setData({
      activity: e.detail.value
    });
  },
  saveRecord: function() {
    const records = wx.getStorageSync("records") || [];
    const recordIndex = records.findIndex(item => item.date === this.data.date);
    if (recordIndex !== -1) {
      records[recordIndex].activity = this.data.activity;
    } else {
      records.push({
        date: this.data.date,
        activity: this.data.activity
      });
    }
    wx.setStorageSync("records", records);
    wx.navigateBack();
  }
});

detail.wxml：

<view class="container">
  <view class="form-item">
    <text>{{ date }}</text>
  </view>
  <view class="form-item">
    <text>活动：</text>
    <input bindinput="updateActivity" placeholder="请输入活动" value="{{ activity }}" />
  </view>
  <view class="form-item">
    <button bindtap="saveRecord">保存</button>
  </view>
</view>

1. 创建个人页面，在 pages/profile 目录下创建 profile.json、profile.js 和 profile.wxml 文件：

profile.json：

{
  "navigationBarTitleText": "个人"
}

profile.js：

Page({
  data: {
    name: "",
    age: 0
  },
  onLoad: function() {
    const profile = wx.getStorageSync("profile") || {};
    this.setData({
      name: profile.name || "",
      age: profile.age || 0
    });
  },
  updateName: function(e) {
    this.setData({
      name: e.detail.value