微信小程序实现睡眠质量计算

微信小程序睡眠质量评估工具实现指南

先贴上一个具体的实现图片示例如下：

一、项目概述
本文将详细介绍如何实现一个微信小程序睡眠质量评估工具，通过用户输入的入睡时间、醒来时间和觉醒次数，计算睡眠时长并评估睡眠质量。这个工具可以帮助用户了解自己的睡眠状况，提供相应的健康建议。
二、实现步骤
1. 创建小程序项目
首先，使用微信开发者工具创建一个新的小程序项目，选择合适的目录和项目名称。
2. 页面结构设计
在 pages 目录下创建一个新页面，例如toolSleep，包含以下文件：

1. index.js - 页面逻辑
2. index.json - 页面配置
3. index.wxml - 页面结构
4. index.wxss - 页面样式

三、功能说明

1. 用户输入：
   通过时间选择器选择入睡时间和醒来时间
   输入夜间觉醒次数
2. 核心计算逻辑：
   计算睡眠时长，处理跨午夜情况
   根据睡眠时长和觉醒次数评分
   应用权重计算最终得分
   根据得分给出相应的评估描述
3. 结果展示：
   显示睡眠时长和评分
   通过模态框展示详细评估结果

四、扩展建议

1. 添加历史记录功能，保存用户的睡眠数据
2. 增加图表展示，直观显示睡眠质量变化趋势
3. 基于评估结果提供个性化的改善建议
4. 添加闹钟功能，帮助用户养成良好的睡眠习惯

五、总结
通过以上步骤，我们成功实现了一个简单但功能完整的睡眠质量评估工具。这个小程序可以帮助用户了解自己的睡眠状况，为改善睡眠质量提供参考。你可以根据实际需求进一步完善和扩展功能。

完整代码逻辑实现如下：
1、js代码：

Page({
  data: {
    sleepTime: '',
    wakeTime: '',
    wakeValue: '',
    sleepScore: 0,
    sleepDuration: 0
  },

  // 时间选择器事件处理
  handleTimeChange(e) {
    const {
      field
    } = e.currentTarget.dataset;
    this.setData({
      [field]: e.detail.value
    });
  },

  // 输入绑定
  onInputClick(e) {
    this.setData({
      wakeValue: e.detail.value
    });
  },

  // 计算按钮点击处理
  calculateClick() {
    // 输入验证
    if (!this.validateInputs()) return;

    // 计算睡眠指标
    const sleepDuration = this.calculateSleepDuration();
    const sleepScore = this.calculateTotalScore(sleepDuration);
    const scoreDesc = this.getScoreDescription(sleepScore);

    // 更新UI
    this.setData({
      sleepDuration,
      sleepScore
    });

    // 显示结果提示
    this.showResultToast(scoreDesc);
  },

  // 输入验证
  validateInputs() {
    const {
      sleepTime,
      wakeTime,
      wakeValue
    } = this.data;

    if (!sleepTime || !wakeTime) {
      this.showToast('请选择入睡时间和醒来时间');
      return false;
    }

    if (wakeValue === '' || isNaN(parseInt(wakeValue))) {
      this.showToast('请输入觉醒次数（数字）');
      return false;
    }

    return true;
  },

  // 计算睡眠时长（小时）
  calculateSleepDuration() {
    const [sleepH, sleepM] = this.data.sleepTime.split(':').map(Number);
    const [wakeH, wakeM] = this.data.wakeTime.split(':').map(Number);

    // 计算总分钟数，处理跨午夜情况
    const sleepTotalMinutes = sleepH * 60 + sleepM;
    const wakeTotalMinutes = (wakeH < sleepH ? wakeH + 24 : wakeH) * 60 + wakeM;

    // 确保时长在合理范围（1-24小时）
    const minutes = Math.max(60, Math.min(1440, wakeTotalMinutes - sleepTotalMinutes));
    return Number((minutes / 60).toFixed(1));
  },

  // 计算总评分
  calculateTotalScore(duration) {
    const rules = [{
        key: 'duration',
        score: this.getDurationScore(duration)
      },
      {
        key: 'wake',
        score: this.getWakeScore()
      }
    ];

    // 应用权重（时长占60%，觉醒次数占40%）
    return Math.round(
      rules[0].score * 0.6 +
      rules[1].score * 0.4
    );
  },

  // 睡眠时长评分（0-5分）
  getDurationScore(duration) {
    if (duration >= 8) return 5; // 优质时长
    if (duration >= 7) return 4; // 良好时长
    if (duration >= 6) return 3; // 中等时长
    if (duration >= 5) return 2; // 较短时长
    return 1; // 过短时长
  },

  // 觉醒次数评分（0-5分）
  getWakeScore() {
    const count = parseInt(this.data.wakeValue);
    if (count === 0) return 5; // 无觉醒
    if (count <= 1) return 4; // 1次觉醒
    if (count <= 2) return 3; // 2次觉醒
    if (count <= 3) return 2; // 3次觉醒
    return 1; // 4次及以上觉醒
  },

  // 评分结果描述
  getScoreDescription(score) {
    const descriptions = [{
        min: 9,
        text: '优秀：睡眠质量极佳，身体充分恢复'
      },
      {
        min: 7,
        text: '良好：睡眠质量较好，基本满足健康需求'
      },
      {
        min: 5,
        text: '中等：睡眠质量一般，建议调整作息'
      },
      {
        min: 0,
        text: '需改善：睡眠质量较差，需关注睡眠健康'
      }
    ];

    return descriptions.find(item => score >= item.min).text;
  },

  // 显示提示信息
  showToast(title) {
    wx.showToast({
      title,
      icon: 'none',
      duration: 2000
    });
  },

  // 显示结果提示
  showResultToast(desc) {
    let val = this.data.sleepScore;
    wx.showModal({
      title: '睡眠质量评估结果',
      content: '您的睡眠评分为' + val + '分' + desc,
      showCancel: false,
      confirmText: '了解了'
    });
  }
});

2、wxml代码：

<view class="level top-box">
  <view class="top-dot">
    <view class="dot dot-1">
      <text class="top-num">{{sleepDuration}} 小时text>
      <text class="top-text">时长text>
    view>
    <view class="dot dot-2">
      <text class="top-num">{{sleepScore}} 分text>
      <text class="top-text">得分text>
    view>
  view>
  <view class="top-tip">
    <text class="top-tip-text">注：平台仅提供参考示例，不作为其他依据text>
  view>
view>
<view class="input-section">
  <view class="input-group">
    <text class="label">觉醒次数text>
    <input class="input" type="number" bindinput="onInputClick" maxlength="2" value="{{wakeValue}}" placeholder="请输入夜间觉醒次数" />
  view>
  <view class="input-group">
    <text class="label">入睡时间text>
    <picker class="input" mode="time" data-field="sleepTime" value="{{sleepTime}}" start="09:01" end="21:01" bindchange="handleTimeChange">
      <text class="gray" wx:if="{{sleepTime==''}}">点击选择入睡时间text>
      <text wx:else>{{sleepTime}}text>
    picker>
  view>
  <view class="input-group">
    <text class="label">醒来时间text>
    <picker class="input" mode="time" data-field="wakeTime" value="{{wakeTime}}" start="19:59" end="20:00" bindchange="handleTimeChange">
      <text class="gray" wx:if="{{wakeTime==''}}">点击选择醒来时间text>
      <text wx:else>{{wakeTime}}text>
    picker>
  view>
  <button class="calculate-btn" bindtap="calculateClick">
    计算评分
  button>
view>

3、wxss代码：

page {
  font-size: 32rpx;
  background-color: #f1f1f1;
  padding-bottom: 20rpx;
}

.level {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.top-box {
  position: relative;
  padding: 40rpx 20rpx 60rpx 20rpx;
  background-color: #165DFF;
  justify-content: center;
}

.top-text {
  margin: 0 20rpx;
  font-size: 28rpx;
  color: #797979;
}

.top-num {
  padding-bottom: 10rpx;
  font-weight: bold;
  color: #165DFF;
}

.top-dot {
  display: flex;
  flex-direction: row;
  background-color: white;
  color: #000000;
  border-radius: 200rpx;
  width: 60%;
  height: 140rpx;
  box-shadow: 0 0 10rpx 10rpx #165DFF;
}

.dot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dot-1 {
  border-right: 1rpx dashed #f1f1f1;
}

.dot-2 {
  border-left: 1rpx dashed #f1f1f1;
}

.top-tip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20rpx;
  text-align: center;
}

.top-tip-text {
  background-color: #ffffff;
  padding: 15rpx 10%;
  font-size: 24rpx;
  border-radius: 50rpx;
  color: #909399;
}

.input-section {
  background-color: #fff;
  padding: 10rpx 30rpx 40rpx;
  margin-bottom: 25rpx;
  margin-top: 50rpx;
}

.input-group {
  display: flex;
  align-items: center;
}

.label {
  width: 25%;
  color: #666;
  padding: 25rpx 0;
}

.input {
  flex: 1;
  padding: 25rpx 20rpx;
  border-bottom: 1rpx solid #eee;
}

.gray {
  color: gray;
}

.calculate-btn {
  background-color: #165DFF;
  color: white;
  font-size: 32rpx;
  margin-top: 30rpx;
  border-radius: 40rpx;
  height: 88rpx;
  line-height: 88rpx;
  padding: 0;
  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
}

.calculate-btn[disabled] {
  background-color: #ccc;
  box-shadow: none;
}

.calculate-btn::after {
  box-shadow: none;
  border: none;
}

4、json代码：

{
  "usingComponents": {},
  "navigationBarTitleText": "睡眠质量计算"
}

这款睡眠质量计算示例，不仅是健康数据的量化工具，更是你口袋里的「数字化健康管家」。想深度拆解工具开发逻辑？或是获取定制化饮食方案？即刻关注 蒜鸟编程（微信小程序 / 抖音 / 小红书 / 公众号同名）—— 在这里，代码与生活的边界正被重新定义，我们用编程思维解构健康管理，让技术成为提升生活品质的实用助手。

后续将持续输出编程技术实践案例，从工具开发到场景化应用全覆盖。诚邀开发者一同探讨技术细节，也欢迎对健康数字化感兴趣的伙伴加入，让代码为生活赋能，共探技术与生活的融合可能！