微信小程序版電費計算器
以下是一個去掉"電器名稱"后的微信小程序電費計算器代碼，包含所有必要文件：
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});}
});6. pages/index/index.json (頁面配置)
{"usingComponents": {}
}功能說明
這個小程序電費計算器包含以下功能：
-
輸入電器功率（瓦）
-
輸入每天使用時間（小時）
-
輸入每月使用天數（默認30天）
-
輸入電價（默認0.6元/度）
-
點擊計算按鈕后顯示：
-
每月用電量（度）
-
每月電費（元）
-
使用說明
-
將以上代碼分別放入對應文件中
-
在微信開發者工具中創建新項目
-
將這些文件放入相應目錄
-
編譯運行即可
這個小程序界面簡潔，操作直觀，適合快速計算家電的電費消耗。你可以根據需要進一步調整樣式或添加更多功能。
)
)