微信小程序项目实例——体质计算器
文章目录
项目代码见文字底部，点赞关注有惊喜
一、项目展示
体质计算器是一款简单的健康类小程序
用户可以根据自身的身高和体重
选择所测标准（中国、亚洲、国际）
生成自身BMI值和当前身体状况
并给出标准体重和相关疾病的预测
二、项目核心代码
小程序仅一个简单的页面
从上至下分别是测试结果、数据收集和BMI对照表
用户可以选择三大标准【中国、亚洲、国际】
身体状况分为【偏瘦、正常、 偏胖、肥胖、 重度肥胖、极重度肥胖】
<!--index.wxml--> <view class="container"> <view class="result"> <view class="title">BMI值</view> <view class="score">{{score}}</view> <view class="tip first-tip"> <view class="physical-condition">身体状况：<text class="">{{physicalCondition}}</text></view> <view class="weight-standard no-border">身高标准体重：<text class="">{{weightStandard}}kg</text></view> </view> <view class="tip"> <view class="physical-condition">相关疾病发病危险性: <text class="">{{danger}}</text></view> </view> </view> <view class="input-container"> <view class="item"> <text class="label">身高</text> <text class="unit">cm</text> <input type="digit" bindinput="bindKeyHightInput" maxlength="6" class="" /> </view> <view class="item"> <text class="label">体重</text> <text class="unit">kg</text> <input type="digit" bindinput="bindKeyWeightInput" maxlength="6" class="" /> </view> <view class="item no-border"> <text class="label">标准</text> <picker mode="selector" value="{{index}}" range="{{array}}" bindchange="bindPickerChange" class="type_select"> <view class="picker"> {{array[index]}} <text>></text> </view> </picker> </view> <button class="calcu_btn" bindtap="calculateBtn">开始计算</button> </view> <view class="compatable"> <text class="table-title">标准对照表</text> <!--中国标准--> <view class="table" hidden="{{index!= 0}}"> <view class="row thead"> <text class="col">BMI值</text> <text class="col">身体状况</text> </view> <view class="row"> <text class="col">{{charLt}}18.5</text> <text class="col">偏瘦</text> </view> <view class="row"> <text class="col"> 18.5～23.9</text> <text class="col">正常</text> </view> <view class="row"> <text class="col">24～27.9</text> <text class="col">偏胖</text> </view> <view class="row"> <text class="col">≥28</text> <text class="col">肥胖</text> </view> </view> <!--国际标准--> <view class="table" hidden="{{index!= 1}}"> <view class="row thead"> <text class="col">BMI值</text> <text class="col">身体状况</text> </view> <view class="row"> <text class="col">{{charLt}}18.5</text> <text class="col">偏瘦</text> </view> <view class="row"> <text class="col"> 18.5～24.9</text> <text class="col">正常</text> </view> <view class="row"> <text class="col">25～29.9</text> <text class="col">偏胖</text> </view> <view class="row"> <text class="col">30.0～34.9</text> <text class="col">肥胖</text> </view> <view class="row"> <text class="col">35.0～39.9</text> <text class="col">重度肥胖</text> </view> <view class="row"> <text class="col">≥40.0</text> <text class="col">极重度肥胖</text> </view> </view> <!--亚洲标准--> <view class="table" hidden="{{index!= 2}}"> <view class="row thead"> <text class="col">BMI值</text> <text class="col">身体状况</text> </view> <view class="row"> <text class="col">{{charLt}}18.5</text> <text class="col">偏瘦</text> </view> <view class="row"> <text class="col"> 18.5～22.9</text> <text class="col">正常</text> </view> <view class="row"> <text class="col">23～24.9</text> <text class="col">偏胖</text> </view> <view class="row"> <text class="col">25～29.9</text> <text class="col">肥胖</text> </view> <view class="row"> <text class="col">≥30</text> <text class="col">重度肥胖</text> </view> </view> </view> </view>
/**index.wxss**/ .result{ width:100%; background-color: #22afcc; } .result .title{ padding: 0 40rpx; font-size: 28rpx; padding-top:20rpx; color: #f1f1f1; font-weight:600; } .result .score{ padding: 0 40rpx; line-height: 100rpx; font-size: 60rpx; color: #fff; } .tip{ display: flex; } .first-tip{ margin-bottom: 4rpx; } .tip view{ line-height: 80rpx; color: #f1f1f1; font-size: 24rpx; background-color:#20a1bb; flex: 1; padding-left: 40rpx; } .tip view text{ color: #fff; } .physical-condition{ margin: 0 4rpx 0 0; } .input-container { padding: 0 40rpx; } .item { border-bottom: 1px solid #e2e2e2; height:56rpx; line-height: 56rpx; font-size:32rpx; padding: 20rpx 0rpx; color: #909090; } .item .label{ width: 20%; float: left; vertical-align: middle; } .item input{ margin-left: 30%; margin-right: 10%; height:40rpx; border: 1rpx solid #d9d9d9; border-radius: 6rpx; background-color: #f1f1f1; text-align: right; padding-right: 8rpx; color:#22afcc; } .item .unit{ float: right; } .item .type_select{ float: right; } .item .type_select text{ margin-left: 8rpx; } .no-border{ border-bottom: 0px; } .calcu_btn { background-color: #22afcc; color: #fff; font-weight: 400; } #result-container{ padding: 20rpx 0; } .compatable{ padding: 40rpx 40rpx 0 40rpx; font-size: 28rpx; color:#909090; } .compatable .table-title{ line-height: 50rpx; height: 50rpx; } .table{ border: 1rpx solid #e2e2e2; } .table .row{ display: flex; border-bottom: 1rpx solid #e2e2e2; line-height: 60rpx; height: 60rpx; } .table .row .col{ flex: 1; text-align: center; border-right: 1rpx solid #e2e2e2; } .table .thead{ background-color: #22afcc; color:#f1f1f1; } .table .row .col:last-child{ border-right: 0rpx; } .table .row:last-child{ border-bottom: 0rpx; }
文末
具体的介绍就到这里了
有兴趣的同学可以继续研究
代码放到下面链接里了
