当前位置：首页 > wzjs >正文

网站栏目标签如何调用少儿编程加盟品牌有哪些

wzjs 2025/9/13 19:16:52

网站栏目标签如何调用,少儿编程加盟品牌有哪些,手机界面app界面设计分析,代客做网站微信小程序版电费计算器以下是一个去掉"电器名称"后的微信小程序电费计算器代码，包含所有必要文件： 1. app.json (全局配置) {"pages": ["pages/index/index"],"window": {"backgroundColor": &q…

微信小程序版电费计算器

以下是一个去掉"电器名称"后的微信小程序电费计算器代码，包含所有必要文件：

1. app.json (全局配置)

{"pages": ["pages/index/index"],"window": {"backgroundColor": "#F6F6F6","backgroundTextStyle": "light","navigationBarBackgroundColor": "#2c3e50","navigationBarTitleText": "电费计算器","navigationBarTextStyle": "white"},"sitemapLocation": "sitemap.json","style": "v2"
}

2. app.wxss (全局样式)

/* 全局样式 */
page {background-color: #f5f5f5;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;padding: 20px;
}

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

<view class="container"><view class="calculator"><view class="form-group"><text class="label">电器功率 (瓦)</text><input type="number" placeholder="请输入电器功率" bindinput="inputPower" value="{{power}}"/></view><view class="form-group"><text class="label">每天使用时间 (小时)</text><input type="number" placeholder="请输入使用时间" bindinput="inputHours" value="{{hours}}"/></view><view class="form-group"><text class="label">每月使用天数</text><input type="number" placeholder="请输入使用天数" bindinput="inputDays" value="{{days}}"/></view><view class="form-group"><text class="label">电价 (元/度)</text><input type="digit" placeholder="请输入电价" bindinput="inputPrice" value="{{price}}"/></view><button bindtap="calculate">计算电费</button><view class="result" wx:if="{{showResult}}"><view class="result-title">计算结果</view><view class="result-item"><text>每月消耗:</text><text class="result-value">{{consumption}} 度</text></view><view class="result-item"><text>每月电费:</text><text class="result-value">{{cost}} 元</text></view></view></view>
</view>

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

.container {display: flex;flex-direction: column;align-items: center;
}.calculator {width: 100%;background-color: #fff;border-radius: 12px;padding: 20px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}.form-group {margin-bottom: 20px;
}.label {display: block;margin-bottom: 8px;font-weight: 500;color: #333;
}input {width: 100%;height: 40px;border: 1px solid #ddd;border-radius: 8px;padding: 0 10px;box-sizing: border-box;
}button {width: 100%;height: 48px;background-color: #2c3e50;color: white;border: none;border-radius: 8px;font-size: 16px;margin-top: 10px;
}button:active {opacity: 0.8;
}.result {margin-top: 25px;padding: 15px;background-color: #f8f9fa;border-radius: 8px;
}.result-title {font-size: 18px;font-weight: bold;margin-bottom: 15px;color: #2c3e50;
}.result-item {display: flex;justify-content: space-between;margin-bottom: 10px;font-size: 16px;
}.result-value {color: #e74c3c;font-weight: bold;
}

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

Page({data: {power: '',hours: '',days: '30',price: '0.6',consumption: 0,cost: 0,showResult: false},inputPower: function(e) {this.setData({power: e.detail.value});},inputHours: function(e) {this.setData({hours: e.detail.value});},inputDays: function(e) {this.setData({days: e.detail.value});},inputPrice: function(e) {this.setData({price: e.detail.value});},calculate: function() {const power = parseFloat(this.data.power) || 0;const hours = parseFloat(this.data.hours) || 0;const days = parseFloat(this.data.days) || 0;const price = parseFloat(this.data.price) || 0;const consumption = (power * hours * days) / 1000;const cost = consumption * price;this.setData({consumption: consumption.toFixed(2),cost: cost.toFixed(2),showResult: true});}
});