微信小程序---简易计算器

界面布局

布局代码(wxml)

<!--pages/cal/cal.wxml-->
<view class='container'>
  <view class='screen'>{{first}}</view>
  <view class='screen'>{{op}}</view>
  <view class='screen'>{{second}}</view>
  <view class='screen'>{{last}}</view>
  <view class='screen'>{{sum}}</view>
    <view class='basic ac' id='AC' bindtap='click'>{{AC}}</view>
    <block wx:for="{{ids}}">
      <view class='basic color' id='{{item}}' bindtap='click'>{{item}}</view>
    </block>
    <view class='equ color' id='=' bindtap='click'>{{equ}}</view>
</view>

渲染代码（wxss）

/* pages/cal/cal.wxss */
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.basic {
  width: 76px;
  height: 45px;
  margin: 1px;
  text-align: center;
  line-height: 45px;
  font-size: 26px;
  border: 1px solid #cbd3d3;
  border-radius: 5px;
}

.color {
  background-color: #f0ffff;
}

.screen {
  width: 100%;
  height: 40px;
  text-align: right;
  line-height: 40px;
  background-color: #aaa;
  font-size: 30px;
}

.ac {
  color: #f00;
  background-color: #f0ffff;
}

.equ {
  width: 154px;
  height: 45px;
  margin: 1px;
  text-align: center;
  line-height: 45px;
  font-size: 26px;
  border: 1px solid #cbd3d3;
  border-radius: 5px;
}

功能代码（JS）

// pages/cal/cal.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ids: ['DEL', '÷', 'x', '7', '8', '9', '-', '4', '5', '6', '+', '1', '2', '3','%','0','.'],
    AC: 'AC',
    equ: '=',
    first: '',
    second: '',
    op: '',
    last: '',
    sum: 0,
    a: 0,
    b: 0,
    operator: 0,
    flag: false,    //操作符是否被按下
    dot: false      //小数点是否被按下
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  click: function (e) {
    switch(e.target.id) {
      case "1": 
      case "2":
      case "3":
      case "4":
      case "5":
      case "6":
      case "7":
      case "8":
      case "9":
      case "0":
        var n = parseInt(e.target.id);
        if (this.data.flag == true) {
          this.setData({ sum: n }); 
        } else {
          var temp = this.data.sum;
          if(this.data.dot == true)
            this.setData({ sum: temp + n });
          else
            this.setData({ sum: temp * 10 + n });
        }
        this.data.flag = false;
        break;
      case ".":
        var temp = this.data.sum;
        this.setData({ sum: temp + '.'});
        this.data.dot = true;
        break;
      case "+": 
      case "-":
      case "x":
      case "÷":
      case "%":
        this.data.flag = true;
        if(this.data.dot == true) 
          this.data.sum = parseFloat(this.data.sum);
        this.data.a = this.data.sum;
        this.data.dot = false;
        var temp = e.target.id;
        this.setData({ first: this.data.sum});
        this.setData({ op: temp });
        this.setData({ sum: 0 });
        if(temp == "+")
          this.data.operator = 1;
        else if(temp == "-") 
          this.data.operator = 2;
        else if (temp == "x")
          this.data.operator = 3;
        else if (temp == "÷")
          this.data.operator = 4;
        else
          this.data.operator = 5;
        break;
      case "AC":
        this.data.sum = 0;
        this.data.a = 0;
        this.data.b = 0;
        this.data.operator = 0;
        this.data.flag = false;
        this.setData({ sum: 0 });
        this.setData({ first: ''});
        this.setData({ second: '' });
        this.setData({ op: '' });
        this.setData({ last: '' });
        break;
      case "DEL":
        const temp = new String(this.data.sum);
        this.data.sum = temp.substring(0, temp.length-1);
        this.setData({ sum: this.data.sum});
        break;
      case "=":
        if(this.data.dot == true) 
          this.data.sum = parseFloat(this.data.sum);
        this.data.b = this.data.sum;
        this.setData({ second: this.data.b});
        this.setData({ last: '='});
        var c;
        if (this.data.operator == 1) {
          c = this.data.a + this.data.b;
        }
        if (this.data.operator == 2) {
          c = this.data.a - this.data.b;
        }
        if (this.data.operator == 3) {
          c = this.data.a * this.data.b;
        } 
        if (this.data.operator == 4) {
          c = this.data.a / this.data.b;
        } 
        if (this.data.operator == 5) {
          c = this.data.a % this.data.b;
        }
        this.setData({ sum: c});
        this.data.sum = 0;
        this.data.a = 0;
        this.data.b = 0;
        this.data.dot = false;
        this.data.flag = false;
        break;
    }
  }
})

附两张效果图