让 Deepseek 写一个尺码计算器

下面是一个简单的尺码计算器微信小程序的代码实现,包含页面布局、逻辑处理和样式。

1. 项目结构

size-calculator/

├── pages/

│ ├── index/

│ │ ├── index.js

│ │ ├── index.json

│ │ ├── index.wxml

│ │ └── index.wxss

├── app.js

├── app.json

├── app.wxss

2. 代码实现

app.json (全局配置)

javascript 复制代码
{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "尺码计算器",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages/index/index.wxml (页面结构)

html 复制代码
<view class="container">
  <view class="title">尺码计算器</view>
  
  <view class="input-group">
    <text>身高(cm):</text>
    <input type="number" placeholder="请输入身高" bindinput="inputHeight" value="{{height}}"/>
  </view>
  
  <view class="input-group">
    <text>体重(kg):</text>
    <input type="number" placeholder="请输入体重" bindinput="inputWeight" value="{{weight}}"/>
  </view>
  
  <button bindtap="calculateSize" class="calculate-btn">计算尺码</button>
  
  <view class="result" wx:if="{{size}}">
    <text>推荐尺码: </text>
    <text class="size">{{size}}</text>
  </view>
  
  <view class="size-table">
    <text class="table-title">尺码对照表</text>
    <view class="table-row header">
      <text>尺码</text>
      <text>身高(cm)</text>
      <text>体重(kg)</text>
    </view>
    <view class="table-row">
      <text>S</text>
      <text>155-165</text>
      <text>45-55</text>
    </view>
    <view class="table-row">
      <text>M</text>
      <text>165-175</text>
      <text>55-65</text>
    </view>
    <view class="table-row">
      <text>L</text>
      <text>175-185</text>
      <text>65-75</text>
    </view>
    <view class="table-row">
      <text>XL</text>
      <text>185-195</text>
      <text>75-85</text>
    </view>
    <view class="table-row">
      <text>XXL</text>
      <text>195-205</text>
      <text>85-95</text>
    </view>
  </view>
</view>

pages/index/index.wxss (页面样式)

css 复制代码
.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  width: 80%;
}

.input-group text {
  width: 80px;
}

.input-group input {
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 5px;
  flex: 1;
}

.calculate-btn {
  background-color: #07C160;
  color: white;
  width: 80%;
  margin-top: 20px;
  margin-bottom: 30px;
}

.result {
  font-size: 18px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}

.size {
  font-size: 24px;
  font-weight: bold;
  color: #07C160;
  margin-left: 10px;
}

.size-table {
  width: 90%;
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 10px;
  margin-top: 20px;
}

.table-title {
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

.table-row {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.table-row text {
  flex: 1;
  text-align: center;
}

.header {
  font-weight: bold;
  background-color: #f5f5f5;
}

pages/index/index.js (页面逻辑)

javascript 复制代码
Page({
  data: {
    height: '',
    weight: '',
    size: ''
  },
  
  // 输入身高
  inputHeight: function(e) {
    this.setData({
      height: e.detail.value
    });
  },
  
  // 输入体重
  inputWeight: function(e) {
    this.setData({
      weight: e.detail.value
    });
  },
  
  // 计算尺码
  calculateSize: function() {
    const height = parseFloat(this.data.height);
    const weight = parseFloat(this.data.weight);
    
    if (!height || !weight) {
      wx.showToast({
        title: '请输入完整信息',
        icon: 'none'
      });
      return;
    }
    
    let size = '';
    
    if (height < 155 || weight < 45) {
      size = 'XS';
    } else if (height <= 165 && weight <= 55) {
      size = 'S';
    } else if (height <= 175 && weight <= 65) {
      size = 'M';
    } else if (height <= 185 && weight <= 75) {
      size = 'L';
    } else if (height <= 195 && weight <= 85) {
      size = 'XL';
    } else if (height <= 205 && weight <= 95) {
      size = 'XXL';
    } else {
      size = 'XXXL';
    }
    
    this.setData({
      size: size
    });
  }
});

3. 功能说明

  1. 输入功能

    • 用户可以输入身高(厘米)和体重(公斤)
  2. 计算功能

    • 点击"计算尺码"按钮后,根据身高和体重计算推荐尺码

    • 基本的尺码计算逻辑:

      • XS: 身高<155cm 或 体重<45kg

      • S: 155-165cm & 45-55kg

      • M: 165-175cm & 55-65kg

      • L: 175-185cm & 65-75kg

      • XL: 185-195cm & 75-85kg

      • XXL: 195-205cm & 85-95kg

      • XXXL: 超过以上范围

  3. 显示结果

    • 显示计算出的推荐尺码

    • 提供尺码对照表供用户参考

4. 扩展建议

  1. 可以根据不同性别设置不同的尺码标准

  2. 可以添加不同服装类型(上衣、裤子等)的尺码计算

  3. 可以增加国际尺码(如US、UK、EU等)的转换

  4. 可以保存用户的历史记录

  5. 可以根据不同品牌调整尺码标准(不同品牌的尺码可能有差异)

这个简单的尺码计算器可以作为基础版本,您可以根据实际需求进一步扩展和完善功能。

相关推荐
流***陌9 小时前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序
亮子AI12 小时前
【小程序】微信小程序点击效果(view、button、navigator)
微信小程序·小程序
Q_Q51100828512 小时前
python+uniapp基于微信小程序团购系统
spring boot·python·微信小程序·django·uni-app·node.js·php
future_studio13 小时前
聊聊 Unity(小白专享、C# 小程序 之 加密存储)
开发语言·小程序·c#
炒毛豆13 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
從南走到北13 小时前
洗车小程序系统
微信小程序·小程序
namehu15 小时前
前端性能优化之:图片缩放 🚀
前端·性能优化·微信小程序
dazhong201215 小时前
微信小程序开发实战指南(三)-- Webview访问总结
微信小程序·小程序
计算机毕业设计小帅15 小时前
【2026计算机毕业设计】基于Springboot的校园失物招领小程序
spring boot·小程序·课程设计
盛夏绽放18 小时前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app