微信小程序实现计算器小功能

网友投稿 464 2023-11-12

微信小程序现在越来越火爆了，我也看到很多在校大学生都在自学了，那些专门从事APP开发，网页开发的工作者更是看到了小程序的前景，在小程序领域也掺上一脚，本人也是自学小程序的，初期跟很多人一样，遇到一些不懂的想问问别人，到贴吧去，一大堆广告，根本没人帮忙解决问题。

微信小程序实现计算器小功能

今天教一些刚入门的同学做一款计算器，如果C语言是编程的最佳入门语言，那计算器应该算得上是小程序的入门demo了，希望刚入门的同学们认真品味下面的代码，从wxml到js，再到wxss（页面的布局)，每个代码都要弄懂他的意思

废话不多说，先上效果图，这是我入门时候自己做的一款计算器，很简单，逻辑也很单一，只是我们身边最常见的计算器的逻辑，我觉得从这个demo我更深刻学习到了wxss页面的布局知识

代码附上：

app.json

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":
{
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "智能计算器"
},
"tabBar": {   //补充说一下，我这个tabBar是用来设置底部tab的
"color":"#ff69b4",
"selectedColor":"#0000ff",
"backgroundColor":"#ffff00",
"list": [
{
"pagePath": "pages/index/index",
"text": "计 算 机"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
},
{
"pagePath":"pages/logs/logs",
"text":"回家"
}
]
}
}

/*app.wxss/*

?
1
2
3
4
5
6
7
8
9
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}

**其中一些组件不认识的话， 建议到微信小程序官网多看几遍

index.wxml:

index.js:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
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
})
}
}
}
})

index.wxss:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
page {
height:100%;
}
.calculator {
width: 100%;
height: 100vh;
border:solid 1px;
background: rgb(238, 5, 5);
position: relative;
box-shadow: 0px 0px 20px 0px rgb(211, 41, 41);
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.calculator-display {     /*显示器背景颜色*/
background: #2c2a2c;
flex: 1;
}
/*TODO:解决文本垂直居中问题,显示器数字颜色*/
.calculator-display-text {
padding: 0 30px;
font-size: 3em;
color: rgb(245, 245, 248);
text-align: right;
}
.calculator-keypad {
display: flex;
}
.calculator .function-keys {
display: flex;
color:rgb(245, 13, 13);
}
.calculator .digit-keys {
background: #0808f7;
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
}
.calculator-key-hover {   /*按钮按下以后的颜色*/
box-shadow: inset 0px 0px 25vw 0px hsla(71, 90%, 48%, 0.898);
}
.calculator-key {
background-color:aqua;
display: block;
width: 25vw;
height: 25vw;
line-height: 25vw;
border-top: 1px solid rgb(6, 245, 78);
border-right: 1px solid rgb(19, 241, 12);
text-align: center;
box-sizing: border-box;
}
.calculator .function-keys .calculator-key {
font-size: 2em;
}
.calculator .digit-keys .calculator-key {
font-size: 3em;
}
.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: rgb(248, 165, 10);
border-right: 0;
font-size: 3em;
}
.calculator .function-keys {
background: linear-gradient(to bottom, rgb(6, 6, 240) 0%, rgb(52, 5, 240) 100%);
}
.calculator .operator-keys {
background:  linear-gradient(to bottom, rgba(252,156,23,1) 0%, rgba(247,126,27,1) 100%);
}
.input-keys {
width: 100%;
}
.operator-keys {
width: 100%;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多

您可能感兴趣的文章:微信小程序 简易计算器实现代码实例微信小程序实现计算器功能微信小程序实现简易计算器用微信小程序实现计算器功能微信小程序实现简易计算器微信小程序实现小型计算器微信小程序计算器实例详解微信小程序实现计算器案例微信小程序实现简单计算器微信小程序计算器实现案例详解

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：计算 程序 微信小程序 小程序 网页
上一篇:小程序页面间传参的五种方式实例详解
下一篇:微信小程序天气预报功能实现(支持自动定位,附源码)
相关文章

 发表评论

暂时没有评论，来抢沙发吧~