用微信小程序写一个计算器

好的，下面是一个简单的微信小程序计算器代码示例：

1. 在微信开发者工具中创建一个新的小程序项目。

2. 在项目结构中找到 app.json 文件，在其中添加以下代码：

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "计算器"
  }
}

这里我们只创建了一个页面 index，用于显示计算器界面。

3. 在 pages 目录下创建一个名为 index 的新目录，并在其中创建 index.wxml、index.js 和 index.wxss 三个文件。

4. 在 index.wxml 中添加以下代码：

<view class="container">
  <view class="result">{{result}}</view>
  <view class="row">
    <text class="button" bindtap="onTap" data-value="7">7</text>
    <text class="button" bindtap="onTap" data-value="8">8</text>
    <text class="button" bindtap="onTap" data-value="9">9</text>
    <text class="button" bindtap="onTap" data-value="/">÷</text>
  </view>
  <view class="row">
    <text class="button" bindtap="onTap" data-value="4">4</text>
    <text class="button" bindtap="onTap" data-value="5">5</text>
    <text class="button" bindtap="onTap" data-value="6">6</text>
    <text class="button" bindtap="onTap" data-value="*">×</text>
  </view>
  <view class="row">
    <text class="button" bindtap="onTap" data-value="1">1</text>
    <text class="button" bindtap="onTap" data-value="2">2</text>
    <text class="button" bindtap="onTap" data-value="3">3</text>
    <text class="button" bindtap="onTap" data-value="-">-</text>
  </view>
  <view class="row">
    <text class="button" bindtap="onTap" data-value="0">0</text>
    <text class="button" bindtap="onTap" data-value=".">.</text>
    <text class="button" bindtap="onTap" data-value="=">=</text>
    <text class="button" bindtap="onTap" data-value="+">+</text>
  </view>
  <view class="row">
    <text class="button clear" bindtap="onClear">清除</text>
  </view>
</view>

这里我们使用了微信小程序的基础组件 view 和 text 来构建计算器界面，同时使用了 data-value 属性来存储每个按键的值。

5. 在 index.js 中添加以下代码：

Page({
  data: {
    result: '0',
    current: '0',
    operator: '',
    operand: ''
  },
  onTap: function(event) {
    let value = event.currentTarget.dataset.value;
    if (value === '+' || value === '-' || value === '*' || value === '/') {
      // 操作符按键
      this.setData({
        current: '0',
        operator: value,
        operand: this.data.current
      });
    } else if (value === '=') {
      // 等号按键
      let a = parseFloat(this.data.operand);
      let b = parseFloat(this.data.current);
      let result;
      switch (this.data.operator) {
        case '+':
          result = a + b;
          break;
        case '-':
          result = a - b;
          break;
        case '*':
          result = a * b;
          break;
        case '/':
          result = a / b;
          break;
      }
      this.setData({
        result: result.toString(),
        current: result.toString(),
        operator: '',
        operand: ''
      });
    } else if (value === '.') {
      // 小数点按键
      if (this.data.current.indexOf('.') === -1) {
        this.setData({
          current: this.data.current + '.'
        });
      }
    } else if (value === '0' && this.data.current === '0') {
      // 避免出现多个前导零
      return;
    } else {
      // 数字按键
      if (this.data.current === '0') {
        this.setData({
          current: value
        });
      } else {
        this.setData({
          current: this.data.current + value
        });
      }
    }
  },
  onClear: function() {
    // 清除按键
    this.setData({
      result: '0',
      current: '0',
      operator: '',
      operand: ''
    });
  }
})

这里我们使用了 Page() 函数来创建一个页面对象，其中 data 对象用于存储计算器的状态，onTap() 函数用于处理用户按键事件，onClear() 函数用于清除计算器状态。

6. 在 index.wxss 中添加以下代码：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-size: 32rpx;
  background-color: #f2f2f2;
}

.result {
  width: 100%;
  padding: 16rpx;
  text-align: right;
  background-color: #fff;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96rpx;
  margin: 8rpx;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8rpx;
  color: #333;
}

.clear {
  background-color: #ff4d4f;
  color: #fff;
}

这里我们使用了 flex 布局来构建计算器界面，同时使用了 rpx 单位来实现自适应布局。

7. 在微信开发者工具中预览小程序，即可看到一个简单的计算器界面。