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

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

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

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

代码附上：

app.json

 {
  "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":"回家"
    }
  ]
}
}

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 }) } } } })