本次实验参考的代码连接：https://www.jb51.net/article/169082.htm
同时我也对代码及界面进行了一些修改，也更美观一点。
下面进行代码的展示及讲解：
wxml代码：
wxml与wxss都是与界面相关的代码，但各有分工，wxml侧重布局及分组，wxss侧重界面的颜色等。
wxml代码将界面分成了两部分：结果显示与按键区，分别对应代码中的screen和content，之后又根据按键区的按键分布，进行了分组，也就是buttonGroup，每个按键都1对应了一个id，在js文件中会被用到。
<!--pages/cal/cal.wxml-->
<view class="screen">{{result}}</view>
<view class="content">
<view class="buttonGroup">
<button id="{{id1}}" bindtap="clickButton" class="buttonitem color1" hover-class="shadow">清除</button>
<button id="{{id2}}" bindtap="clickButton" class="buttonitem color1" hover-class="shadow">回退</button>
<button id="{{id3}}" bindtap="time" class="buttonitem color1" hover-class="shadow">
<icon type="waiting" color="#66CC33"></icon>
</button>
<button id="{{id4}}" bindtap="clickButton" class="buttonitem color2" hover-class="shadow1">÷</button>
</view>
<view class="buttonGroup">
<button id="{{id17}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow7">7</button>
<button id="{{id18}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow8">8</button>
<button id="{{id19}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow9">9</button>
<button id="{{id5}}" bindtap="clickButton" class="buttonitem color2" hover-class="shadow1">×</button>
</view>
<view class="buttonGroup">
<button id="{{id14}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow4">4</button>
<button id="{{id15}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow5">5</button>
<button id="{{id16}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow6">6</button>
<button id="{{id6}}" bindtap="clickButton" class="buttonitem color2" hover-class="shadow1">-</button>
</view>
<view class="buttonGroup">
<button id="{{id11}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow1">1</button>
<button id="{{id12}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow2">2</button>
<button id="{{id13}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow3">3</button>
<button id="{{id7}}" bindtap="clickButton" class="buttonitem color2" hover-class="shadow1">+</button>
</view>
<view class="buttonGroup">
<button id="{{id10}}" bindtap="clickButton" class="buttonitem1 color3" hover-class="shadow0">0</button>
<button id="{{id8}}" bindtap="clickButton" class="buttonitem1 color2" hover-class="shadow1">.</button>
<button id="{{id9}}" bindtap="equal" class="buttonitem1 color2" hover-class="shadow1">=</button>
</view>
</view>wxss代码：
这部分主要与界面的颜色及按键的区域设置相关，为了使界面更好点，我修改了部分颜色值，效果如下，大家也可以根据自己的需要修改颜色。
/* pages/cal/cal.wxss */
page{
background: #FF9900;
}
.screen{
position: fixed;
color: #ffffff;
font-size: 30px;
bottom: 780rpx;
text-align: right;
width: 730rpx;
word-wrap: break-word;
}
.content{
position: fixed;
bottom: 0;
}
.buttonGroup{
display: flex;
flex-direction: row;
}
.buttonitem{
text-align: center;
line-height: 148rpx;
width: 192rpx;
border-radius: 0;
}
.buttonitem1{
width: 255rpx;
text-align: center;
line-height: 148rpx;
border-radius: 0;
}
icon{
position: absolute;
top: 30rpx;
left: 67rpx;
}
.color1{
background: #FFFFFF;
}
.color2{
background: #FFFFFF;
}
.color3{
background: #FFFFFF;
}
.shadow{
background: #FFFFFF;
}
.shadow0{
background: #FFFFFF;
}
.shadow1{
background: #FFFFFF;
}
.shadow2{
background: #FFFFFF;
}
.shadow3{
background: #FFFFFF;
}
.shadow4{
background: #FFFFFF;
}
.shadow5{
background: #FFFFFF;
}
.shadow6{
background: #FFFFFF;
}
.shadow7{
background: #FFFFFF;
}
.shadow8{
background: #FFFFFF;
}
.shadow9{
background: #FFFFFF;
}js代码：
js代码也就是Javascript代码，主要负责后端的计算及与界面之间的交互等。
这部分主要定义了两个function，分别对应点击按键的响应与点击=时的响应。
在此需要注意：当按键为加号时，需要这样写：
case "+":
res = parseInt(res) + parseInt(num);
break;
因为Javascript中+号默认为字符相加而非数据相加，这里做了一点处理，parseInt可以将字符串转换为整数，这样便可实现数据相加了。
// pages/cal/cal.js
Page({
data: {
result: "0",
id1: "clear",
id2: "back",
id3: "time",
id4: "div",
id5: "mul",
id6: "sub",
id7: "add",
id8: "dot",
id9: "eql",
id10: "num_0",
id11: "num_1",
id12: "num_2",
id13: "num_3",
id14: "num_4",
id15: "num_5",
id16: "num_6",
id17: "num_7",
id18: "num_8",
id19: "num_9",
buttonDot: false,
},
clickButton: function (e) {
console.log(e);
var buttonVal = e.target.id;
var res = this.data.result;
var newbuttonDot = this.data.buttonDot;
var sign;
if (buttonVal >= "num_0" && buttonVal <= "num_9") {
var num = buttonVal.split('_')[1];
if (res == "0" || res.charAt(res.length - (length - 1)) == "=") {
res = num;
}
else {
res = res + num;
}
}
else {
if (buttonVal == "dot") {
if (!newbuttonDot) {
res = res + '.';
}
}
else if (buttonVal == "clear") {
res = '0';
}
else if (buttonVal == "back") {
var length = res.length;
if (length > 1) {
res = res.substr(0, length - 1);
}
else {
res = '0';
}
}
else if (buttonVal == "div" || buttonVal == "mul" || buttonVal == "sub" || buttonVal == "add") {
switch (buttonVal) {
case "div":
sign = '÷';
break;
case "mul":
sign = '×';
break;
case "sub":
sign = '-';
break;
case "add":
sign = '+';
break;
}
res = res + sign;
}
}
this.setData({
result: res,
buttonDot: newbuttonDot,
});
},
equal: function (e) {
var str = this.data.result;
var item = '';
var strArray = [];
var temp = 0;
for (var i = 0; i <= str.length; i++) {
var s = str.charAt(i);
if ((s != '' && s >= '0' && s <= '9') || s == '.') {
item = item + s;
}
else {
strArray[temp] = item;
temp++;
strArray[temp] = s;
temp++;
item = '';
}
}
if (isNaN(strArray[strArray.length - 1])) {
strArray.pop();
}
var num;
var res = strArray[0] * 1;
for (var i = 1; i <= strArray.length; i = i + 2) {
num = strArray[i + 1];
switch (strArray[i]) {
case "-":
res = res - num;
break;
case "+":
res = parseInt(res) + parseInt(num);
break;
case "×":
res = res * num;
break;
case "÷":
if (num != '0') {
res = res / num;
}
else {
res = '∞';
break;
}
break;
}
}
this.setData({
result: '=' + res,
});
},
})下面是展示计算时的效果：
这部分代码还是非常基础的，大家可以在这个基础上做一些更深入的功能，如科学计算器等等。