[Page Case Summary] WeChat Mini Program Calculator Function Page

Code example:

wxml file:

<view class="container">
  <view class="output">
    <text class="result">{
   
   {result}}</text>
  </view>
  <view class="row">
    <button class="btn" bindtap="buttonClick" data-value="7">7</button>
    <button class="btn" bindtap="buttonClick" data-value="8">8</button>
    <button class="btn" bindtap="buttonClick" data-value="9">9</button>
    <button class="btn orange" bindtap="buttonClick" data-value="/">÷</button>
  </view>
  <view class="row">
    <button class="btn" bindtap="buttonClick" data-value="4">4</button>
    <button class="btn" bindtap="buttonClick" data-value="5">5</button>
    <button class="btn" bindtap="buttonClick" data-value="6">6</button>
    <button class="btn orange" bindtap="buttonClick" data-value="*">×</button>
  </view>
  <view class="row">
    <button class="btn" bindtap="buttonClick" data-value="1">1</button>
    <button class="btn" bindtap="buttonClick" data-value="2">2</button>
    <button class="btn" bindtap="buttonClick" data-value="3">3</button>
    <button class="btn orange" bindtap="buttonClick" data-value="-">-</button>
  </view>
  <view class="row">
    <button class="btn" bindtap="buttonClick" data-value="0">0</button>
    <button class="btn" bindtap="buttonClick" data-value=".">.</button>
    <button class="btn orange" bindtap="buttonClick" data-value="+">+</button>
    <button class="btn green" bindtap="calculate">=</button>
  </view>
</view>

wxss file:

.container {
    
    
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.output {
    
    
  display: flex;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  padding-right: 20rpx;
  background-color: #f3f3f3;
}

.result {
    
    
  font-size: 48rpx;
}

.row {
    
    
  display: flex;
  justify-content: space-between;
}

.btn {
    
    
  flex: 1;
  font-size: 36rpx;
  padding: 20rpx;
  background-color: #e9e9e9;
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  margin: 10rpx;
}

.btn.orange {
    
    
  background-color: #ff9900;
  color: #fff;
}

.btn.green {
    
    
  background-color: #00cc66;
  color: #fff;
}

js file:

Page({
    
    
  data: {
    
    
    result: ''
  },
  buttonClick: function (event) {
    
    
    var value = event.currentTarget.dataset.value;
    this.setData({
    
    
      result: this.data.result + value
    })
  },
  calculate: function () {
    
    
    var expression = this.data.result;
    var result = eval(expression);
    this.setData({
    
    
      result: result.toString()
    })
  }
})

Code explanation:

1. The entire page uses flex layout, with a height of 100vh, and is divided into two block-level elements: output and row.
2. The output block-level element is used to display calculation results, using flex layout, and the content is on the right.
3. The row block-level elements use flex layout, and four button elements are placed in each row, including numbers and operators.
4. The button element uses flex layout, and the width of each element is evenly divided into four parts, including numbers, operators, and equal signs.
5. When a number and operator button is clicked, the buttonClick function is called to add the button's value to the calculation result.
6. When the equal sign is clicked, the calculate function is called, the calculation result is calculated through the eval function, and displayed in the result.

The above code is for reference only, and the specific implementation details and styles can be adjusted according to needs.

---

How to obtain source code:

Friends who need the complete source code, I hope you can like + favorite + comment, and then send me a private message~

Member learning group: [One-to-one Q&A]

If there is no reply to the private message, you can add a learning member assistant for consultation (WeChat: mifankeji77)