【微信小程序——计算器】_手机扫码,真机运行“计算器”小程序的每个功能模块

---

前言

 微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，微信小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。微信小程序能够实现消息通知、线下扫码、公众号关联等七大功能。其中，通过公众号关联，用户可以实现公众号与微信小程序之间相互跳转。
提示：以上内容源于百度百科，仅供参考

---

1、计算器的效果图

2、index.wxml

<!-- index.wxml -->
<view class='screen'>{{result}}</view>

<view class='test-bg'>
  <view class='btnGroup'>
    <view class='item orange' bindtap='clickButton' id="{{C}}">C</view>
    <view class='item orange' bindtap='clickButton' id="{{back}}">DEL</view>
    <view class='item orange' bindtap='clickButton' id="{{addSub}}">%</view>
    <view class='item orange' bindtap='clickButton' id="{{div}}">÷</view>
  </view>

  <view class='btnGroup'>
    <view class='item blue' bindtap='clickButton' id="{{id7}}">7</view>
    <view class='item blue' bindtap='clickButton' id="{{id8}}">8</view>
    <view class='item blue' bindtap='clickButton' id="{{id9}}">9</view>
    <view class='item orange' bindtap='clickButton' id="{{mut}}">×</view>
  </view>

  <view class='btnGroup'>
    <view class='item blue' bindtap='clickButton' id="{{id4}}">4</view>
    <view class='item blue' bindtap='clickButton' id="{{id5}}">5</view>
    <view class='item blue' bindtap='clickButton' id="{{id6}}">6</view>
    <view class='item orange' bindtap='clickButton' id="{{sub}}">-</view>
  </view>

  <view class='btnGroup'>
    <view class='item blue' bindtap='clickButton' id="{{id1}}">1</view>
    <view class='item blue' bindtap='clickButton' id="{{id2}}">2</view>
    <view class='item blue' bindtap='clickButton' id="{{id3}}">3</view>
    <view class='item orange' bindtap='clickButton' id="{{add}}">+</view>
  </view>

  <view class='btnGroup'>
    <view class='item blue' bindtap='clickButton' id="{{percent}}"></view>
    <view class='item blue' bindtap='clickButton' id="{{id0}}">0</view>
    <view class='item blue' bindtap='clickButton' id="{{dot}}">.</view>
    <view class='item orange' bindtap='clickButton' id="{{equ}}">=</view>
  </view>

</view>
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

3、index.js

// index.js
// 获取应用实例
const app = getApp()

// Page({
//   data: {
//     motto: 'Hello World',
//     userInfo: {},
//     hasUserInfo: false,
//     canIUse: wx.canIUse('button.open-type.getUserInfo'),
//     canIUseGetUserProfile: false,
//     canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
//   },
//   // 事件处理函数
//   bindViewTap() {
//     wx.navigateTo({
//       url: '../logs/logs'
//     })
//   },
//   onLoad() {
//     if (wx.getUserProfile) {
//       this.setData({
//         canIUseGetUserProfile: true
//       })
//     }
//   },
//   getUserProfile(e) {
//     // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
//     wx.getUserProfile({
//       desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
//       success: (res) => {
//         console.log(res)
//         this.setData({
//           userInfo: res.userInfo,
//           hasUserInfo: true
//         })
//       }
//     })
//   },
//   getUserInfo(e) {
//     // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
//     console.log(e)
//     this.setData({
//       userInfo: e.detail.userInfo,
//       hasUserInfo: true
//     })
//   }
// })
Page({
  data: {
    back: 'back',
    C: 'C',
    addSub: 'addSub',
    add: '+',
    sub: '-',
    mut: '×',
    div: '÷',
    equ: '=',
    percent: '%',
    dot: '.',
    id0: '0',
    id1: '1',
    id2: '2',
    id3: '3',
    id4: '4',
    id5: '5',
    id6: '6',
    id7: '7',
    id8: '8',
    id9: '9',
    result: '0',
    valiBackOfArray: ['+', '-', '×', '÷', '.'],
    completeCalculate: false
  },
  // 计算结果
  calculate: function (str) {
    // 判断是不是有负数
    var isNagativeNum = false;
    if (str.charAt(0) == '-') {
      str = str.replace('-', '').replace('(', '').replace(')', '');
      isNagativeNum = true;
    }
    // 对字符串解析并运算
    var addArray = str.split('+');
    var sum = 0.0;
    for (var i = 0; i < addArray.length; i++) {
      if (addArray[i].indexOf('-') == -1) {
        if (addArray[i].indexOf('×') != -1 || addArray[i].indexOf('÷') != -1)
          sum += this.calculateMutDiv(addArray[i]);
        else sum += Number(addArray[i]);
      }
      else {
        var subArray = addArray[i].split('-');
        var subSum = 0;
        if (subArray[0].indexOf('×') != -1 || subArray[0].indexOf('÷') != -1) subSum = this.calculateMutDiv(subArray[0]);
        else subSum = Number(subArray[0]);
        for (var j = 1; j < subArray.length; j++) {
          if (subArray[i].indexOf('×') != -1 || subArray[i].indexOf('÷') != -1)
            subSum -= this.calculateMutDiv(subArray[j]);
          else subSum -= Number(subArray[j]);
        }
        sum += subSum;
      }
    }
    if (isNagativeNum) return (-sum).toString();
    else return sum.toString();
  },
  // 分块乘除运算
  calculateMutDiv: function (str) {
    var addArray = str.split('×');
    var sum = 1.0;
    for (var i = 0; i < addArray.length; i++) {
      if (addArray[i].indexOf('÷') == -1) {
        sum *= Number(addArray[i]);
      }
      else {
        var subArray = addArray[i].split('÷');
        var subSum = Number(subArray[0]);
        for (var j = 1; j < subArray.length; j++) {
          subSum /= Number(subArray[j]);
        }
        sum *= subSum;
      }
    }
    return sum;
  },
  // 是否以运算符结尾
  isOperatorEnd: function (str) {
    for (var i = 0; i < this.data.valiBackOfArray.length; i++) {
      if (str.charAt(str.length - 1) == this.data.valiBackOfArray[i]) return true;
    }
    return false;
  },
  clickButton: function (event) {
    if (this.data.result == 0) {
      if (event.target.id == 'back' || event.target.id == 'C' || event.target.id == 'addSub' || event.target.id == '%' || event.target.id == '+' || event.target.id == '-' || event.target.id == '×' || event.target.id == '÷' || event.target.id == '=') return;
      this.setData({
        result: event.target.id
      });
    }
    else if (event.target.id == 'back') {
      this.setData({
        result: this.data.result.length == 1 ? '0' : this.data.result.substring(0, this.data.result.length - 1)
      });
    }
    else if (event.target.id == 'C') {
      this.setData({
        result: '0'
      });
    }
    else if (event.target.id == 'addSub') {
      var r = this.data.result;
      if (this.isOperatorEnd(r)) return;
      if (r.charAt(0) == '-') this.setData({ result: r.replace('-', '').replace('(', '').replace(')', '') });
      else this.setData({
        result: '-(' + r + ')'
      });
    }
    else if (event.target.id == '%') {
    }
    else if (event.target.id == '=') {
      if (this.isOperatorEnd(this.data.result)) return;
      this.setData({
        result: this.calculate(this.data.result)
      });
      this.setData({
        completeCalculate: true
      });
    }
    else {
      if (this.isOperatorEnd(this.data.result) && this.isOperatorEnd(event.target.id)) return;
      // 如果计算结果有小数点，直到输入运算符前不能再输入小数点
      if (this.data.completeCalculate && this.data.result.indexOf('.') != -1 && event.target.id == '.') return;
      for (var i = 0; i < this.data.valiBackOfArray.length - 1; i++) {
        if (this.data.valiBackOfArray[i] == event.target.id) {
          this.setData({
            completeCalculate: false
          });
          break;
        }
      }
      this.setData({
        result: this.data.result + event.target.id
      });
    }
  }
})
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187

3、index.json

{
  "usingComponents": {},
  "navigationBarTitleText":"计算器",
  "navigationBarBackgroundColor":"#1f67a0",
	"navigationBarTextStyle":"white"
}
1
2
3
4
5
6

5、index.wxss

/**index.wxss**/
/* .userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.usermotto {
  margin-top: 200px;
} */
page {
  width: 100%;
  height: 100%;
}

.test-bg {
  position: fixed;
  bottom: 0;
}

.screen {
  position: fixed;
  color: #000000;
  font-size: 30px;
  bottom: 780rpx;
  text-align: right;
  width: 730rpx;
  word-wrap: break-word;
}

.btnGroup {
  display: flex;
  /*弹性显示结构*/
  flex-direction: row;
  /*横向显示*/
}

.item {
  width: 192rpx;
  line-height: 148rpx;
  border-radius: 5%;
  text-align: center;
}

.orange {
  /* 前景色 */
  color: #000000;
  border: solid 1rpx #ffffff;
  /* 背景色 */
  background: #f78d1d;
}

.blue {
  /* 前景色 */
  color: #000000;
  border: solid 1rpx #ffffff;
  /* 背景色 */
  background: #0095cd;
}
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

---

总结

该小程序还有待完善的地方，还请各位大佬多多指教。