在这篇微信小程序开发教程中，我们将介绍如何使用微信小程序开发计算器功能。
本文主要分为两个部分，小程序主体部分及计算器业务页面部分
一、小程序主体部分
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
1. 小程序逻辑
App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: function() { // Do something when hide. }, globalData: \'I am global data\' })
2. 小程序公共设置
{
"pages": [
"page/index/index"
],
"window": {
"navigationBarBackgroundColor": "#000",
"backgroundColor": "#000",
"navigationBarBackgroundColor": "#000"
},
"networkTimeout": {
"request": 10000,
"connectSocket": 10000,
"uploadFile": 10000,
"downloadFile": 10000
},
"debug": true
}
二、计算器页面部分
计算器页面主要由以下文件组成。
1. 计算器页面结构
页面结构分为2个主要部分：显示区和键盘区
其中键盘区又分功能键、数字键，及运算键，页面结构如下
<template name="calculator-key"> <button hover-start-time="{{5}}" hover-stay-time="{{20}}" hover-class="calculator-key-hover" data-key="{{className}}" class="calculator-key {{className}}">{{display}}</button> </template> <view class="calculator"> <view class="calculator-display"> <view class="calculator-display-text">{{displayValue}}</view> </view> <view class="calculator-keypad"> <view class="input-keys"> <view class="function-keys" catchtap="onTapFunction"> <template is="calculator-key" data="{{className: \'key-clear\', display: clearDisplay ? \'C\' : \'AC\'}}"/> <template is="calculator-key" data="{{className: \'key-sign\', display: \'±\'}}"/> <template is="calculator-key" data="{{className: \'key-percent\', display: \'%\'}}"/> </view> /*sdf*/ <view class="digit-keys" catchtap="onTapDigit"> <template is="calculator-key" data="{{className: \'key-0\', display: \'0\'}}"/> <template is="calculator-key" data="{{className: \'key-dot\', display: \'●\'}}"/> <template is="calculator-key" data="{{className: \'key-1\', display: \'1\'}}"/> <template is="calculator-key" data="{{className: \'key-2\', display: \'2\'}}"/> <template is="calculator-key" data="{{className: \'key-3\', display: \'3\'}}"/> <template is="calculator-key" data="{{className: \'key-4\', display: \'4\'}}"/> <template is="calculator-key" data="{{className: \'key-5\', display: \'5\'}}"/> <template is="calculator-key" data="{{className: \'key-6\', display: \'6\'}}"/> <template is="calculator-key" data="{{className: \'key-7\', display: \'7\'}}"/> <template is="calculator-key" data="{{className: \'key-8\', display: \'8\'}}"/> <template is="calculator-key" data="{{className: \'key-9\', display: \'9\'}}"/> </view> </view> <view class="operator-keys" catchtap="onTapOperator"> <template is="calculator-key" data="{{className: \'key-divide\', display: \'÷\'}}"/> <template is="calculator-key" data="{{className: \'key-multiply\', display: \'×\'}}"/> <template is="calculator-key" data="{{className: \'key-subtract\', display: \'−\'}}"/> <template is="calculator-key" data="{{className: \'key-add\', display: \'+\'}}"/> <template is="calculator-key" data="{{className: \'key-equals\', display: \'=\'}}"/> </view> </view> </view>
2. 计算器样式表
样式代码如下所示
@import "reset.wxss"; page { font: 100 14px \'Roboto\'; } .calculator { width: 100%; height: 100vh; background: black; position: relative; box-shadow: 0px 0px 20px 0px #aaa; display: flex; flex-direction: column; box-sizing: border-box; } .calculator-display { background: #1c191c; flex: 1; } /*TODO:解决文本垂直居中问题*/ .calculator-display-text { padding: 0 30px; font-size: 6em; color: white; text-align: right; } .calculator-keypad { display: flex; } .calculator .function-keys { display: flex; } .calculator .digit-keys { background: #e0e0e7; display: flex; flex-direction: row; flex-wrap: wrap-reverse; } .calculator-key-hover { box-shadow: inset 0px 0px 25vw 0px rgba(0,0,0,0.25); } .calculator-key { display: block; width: 25vw; height: 25vw; line-height: 25vw; border-top: 1px solid #777; border-right: 1px solid #666; text-align: center; box-sizing: border-box; } .calculator .function-keys .calculator-key { font-size: 2em; } .calculator .digit-keys .calculator-key { font-size: 2.25em; } .calculator .digit-keys .key-0 { width: 50vw; text-align: left; padding-left: 9vw; } .calculator .digit-keys .key-dot { padding-top: 1em; font-size: 0.75em; } .calculator .operator-keys .calculator-key { color: white; border-right: 0; font-size: 3em; } .calculator .function-keys { background: linear-gradient(to bottom, rgba(202,202,204,1) 0%, rgba(196,194,204,1) 100%); } .calculator .operator-keys { background: linear-gradient(to bottom, rgba(252,156,23,1) 0%, rgba(247,126,27,1) 100%); } .input-keys { width: 75%; } .operator-keys { width: 25%; }
3、 计算器页面逻辑处理
Page({ data: { value: null, // 上次计算后的结果，null表示没有上次计算的结果 displayValue: \'0\', // 显示数值 operator: null, // 上次计算符号，null表示没有未完成的计算 waitingForOperand: false // 前一按键是否为计算符号 }, onLoad: function(options) { this.calculatorOperations = { \'key-divide\': (prevValue, nextValue) => prevValue / nextValue, \'key-multiply\': (prevValue, nextValue) => prevValue * nextValue, \'key-add\': (prevValue, nextValue) => prevValue + nextValue, \'key-subtract\': (prevValue, nextValue) => prevValue - nextValue, \'key-equals\': (prevValue, nextValue) => nextValue } }, /* AC操作，一下回到解放前 */ clearAll() { this.setData({ value: null, displayValue: \'0\', operator: null, waitingForOperand: false }) }, /* 仅清空当前显示的输入值 */ clearDisplay() { this.setData({ displayValue: \'0\' }) }, onTapFunction: function(event) { const key = event.target.dataset.key; switch(key) { case \'key-clear\': if (this.data.displayValue !== \'0\') { this.clearDisplay(); } else { this.clearAll(); } break; case \'key-sign\': var newValue = parseFloat(this.data.displayValue) * -1 this.setData({ displayValue: String(newValue) }) break; case \'key-percent\': const fixedDigits = this.data.displayValue.replace(/^-?\d*\.?/, \'\') var newValue = parseFloat(this.data.displayValue) / 100 this.setData({ displayValue: String(newValue.toFixed(fixedDigits.length + 2)) }); break; default: break; } }, onTapOperator: function(event) { const nextOperator = event.target.dataset.key; const inputValue = parseFloat(this.data.displayValue); if (this.data.value == null) { this.setData({ value: inputValue }); } else if (this.data.operator) { const currentValue = this.data.value || 0; const newValue = this.calculatorOperations[this.data.operator](currentValue, inputValue); this.setData({ value: newValue, displayValue: String(newValue) }); } this.setData({ waitingForOperand: true, operator: nextOperator }); }, onTapDigit: function(event) { const key = event.target.dataset.key; // 根据data-key标记按键 if(key == \'key-dot\') { // 按下点号 if (!(/\./).test(this.data.displayValue)) { this.setData({ displayValue: this.data.displayValue + \'.\', waitingForOperand: false }) } } else { // 按下数字键 const digit = key[key.length-1]; if (this.data.waitingForOperand) { this.setData({ displayValue: String(digit), waitingForOperand: false }) } else { this.setData({ displayValue: this.data.displayValue === \'0\' ? String(digit) : this.data.displayValue + digit }) } } } })
三、程序效果图
四、源代码下载
扫描下方二维码并关注公众账号，回复 “1236” 获取
源代码使用方法，请参考 微信小程序开发入门教程
