制作美观计算器小程序，玩转学习新体验

2023-12-27 14:08:26

我们经常需要使用计算器来进行简单的数学运算，但传统计算器的外观往往过于单调。我们可以利用微信小程序的强大功能，制作一款美观实用的计算器小程序，让学习过程变得更有趣、更有效率。

构建小程序框架

首先，使用微信小程序开发工具创建新项目。在代码编辑器中，新建一个index.js文件，并复制以下代码：

Page({
  data: {
    result: '0'
  },
  handleInput(e) {
    const value = e.target.dataset.value;
    if (value === 'C') {
      this.setData({
        result: '0'
      });
      return;
    }
    if (this.data.result === '0') {
      this.setData({
        result: value
      });
      return;
    }
    this.setData({
      result: this.data.result + value
    });
  },
  handleCalculate() {
    const expression = this.data.result;
    let result;
    try {
      result = eval(expression);
    } catch(e) {
      result = 'ERROR';
    }
    this.setData({
      result: result
    });
  }
});

这段代码创建了小程序的基本框架，包含了数据绑定和事件处理函数。

设计美观界面

在index.wxss文件中，添加以下样式：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.calculator {
  width: 280px;
  height: 400px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
}
.display {
  width: 100%;
  height: 60px;
  background-color: #e0e0e0;
  text-align: right;
  font-size: 30px;
}
.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.button {
  width: 60px;
  height: 60px;
  margin: 10px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 20px;
  cursor: pointer;
}