下面是一个简单的尺码计算器微信小程序的代码实现,包含页面布局、逻辑处理和样式。
1. 项目结构
size-calculator/
├── pages/
│ ├── index/
│ │ ├── index.js
│ │ ├── index.json
│ │ ├── index.wxml
│ │ └── index.wxss
├── app.js
├── app.json
├── app.wxss
2. 代码实现
app.json (全局配置)
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarTitleText": "尺码计算器",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
pages/index/index.wxml (页面结构)
<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 (页面样式)
.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 (页面逻辑)
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. 功能说明
输入功能:
用户可以输入身高(厘米)和体重(公斤)
计算功能:
点击"计算尺码"按钮后,根据身高和体重计算推荐尺码
基本的尺码计算逻辑:
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: 超过以上范围
显示结果:
显示计算出的推荐尺码
提供尺码对照表供用户参考
4. 扩展建议
可以根据不同性别设置不同的尺码标准
可以添加不同服装类型(上衣、裤子等)的尺码计算
可以增加国际尺码(如US、UK、EU等)的转换
可以保存用户的历史记录
可以根据不同品牌调整尺码标准(不同品牌的尺码可能有差异)
这个简单的尺码计算器可以作为基础版本,您可以根据实际需求进一步扩展和完善功能。