微信小程序計算器的設計與實現

一、UI設計

微信小程序計算器的UI設計通常包含輸入框、數字按鈕、運算符按鈕、清零按鈕、等號按鈕等。為了用戶的良好體驗，布局設計應該簡約明了。

<view class="container">
  <view class="input-wrapper">
    <input class="input" value="{{ inputValue }}" disabled="{{ disabled }}" />
  </view>
  <view class="btn-wrapper">
    <view class="row">
      <button class="num-btn" data-num="7" bindtap="onNumBtnClick">7</button>
      <button class="num-btn" data-num="8" bindtap="onNumBtnClick">8</button>
      <button class="num-btn" data-num="9" bindtap="onNumBtnClick">9</button>
      <button class="operator-btn" data-operator="+" bindtap="onOperatorBtnClick">+</button>
    </view>
    <view class="row">
      <button class="num-btn" data-num="4" bindtap="onNumBtnClick">4</button>
      <button class="num-btn" data-num="5" bindtap="onNumBtnClick">5</button>
      <button class="num-btn" data-num="6" bindtap="onNumBtnClick">6</button>
      <button class="operator-btn" data-operator="-" bindtap="onOperatorBtnClick">-</button>
    </view>
    <view class="row">
      <button class="num-btn" data-num="1" bindtap="onNumBtnClick">1</button>
      <button class="num-btn" data-num="2" bindtap="onNumBtnClick">2</button>
      <button class="num-btn" data-num="3" bindtap="onNumBtnClick">3</button>
      <button class="operator-btn" data-operator="*" bindtap="onOperatorBtnClick">*</button>
    </view>
    <view class="row">
      <button class="num-btn" data-num="0" bindtap="onNumBtnClick">0</button>
      <button class="num-btn" data-num="." bindtap="onNumBtnClick">.</button>
      <button class="equal-btn" bindtap="onEqualBtnClick">=</button>
      <button class="operator-btn clear-btn" bindtap="onClearBtnClick">清零</button>
    </view>
  </view>
</view>

在CSS部分，我們對各個元素進行樣式設置。例如：

/* container */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

/* input */
.input-wrapper {
  padding: 30rpx;
}
.input {
  width: 100%;
  padding: 20rpx;
  font-size: 40rpx;
  color: #333;
  text-align: right;
  background-color: #eee;
  border: 1rpx solid #ccc;
  border-radius: 8rpx;
}

/* button */
.btn-wrapper {
  padding: 20rpx;
}
.row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.num-btn,
.operator-btn,
.equal-btn,
.clear-btn {
  width: 20%;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 40rpx;
  color: #fff;
  background-color: #333;
  border: none;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 8rpx rgba(51, 51, 51, 0.2);
  text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.35);
  text-align: center;
  cursor: pointer;
}
.num-btn:active,
.operator-btn:active,
.equal-btn:active,
.clear-btn:active {
  box-shadow: 0 1rpx 3rpx rgba(51, 51, 51, 0.2);
  transform: translateY(2rpx);
}
.num-btn.disabled {
  color: #999;
  background-color: #f5f5f5;
  box-shadow: none;
  cursor: default;
}

二、邏輯實現

微信小程序計算器的邏輯實現主要包括數字輸入、運算符輸入、清零、等號、錯誤提示等。

1. 數字輸入

用戶通過點擊數字按鈕，將數字顯示在輸入框中。代碼如下：

onNumBtnClick: function (e) {
  var num = e.currentTarget.dataset.num;
  var inputValue = this.data.inputValue;
  
  if (inputValue === '0') {
    inputValue = num;
  } else {
    inputValue += num;
  }
  
  this.setData({
    inputValue: inputValue
  });
}

以上代碼中，我們先獲取點擊的數字，並獲取當前輸入框的值。判斷如果當前是0，則將輸入框的值設置為點擊的數字；否則，將點擊的數字添加到輸入框的值的後面。最後，更新輸入框的值。

2. 運算符輸入

用戶通過點擊運算符按鈕，將運算符顯示在輸入框中，並進行計算。代碼如下：

onOperatorBtnClick: function (e) {
  var operator = e.currentTarget.dataset.operator;
  var inputValue = this.data.inputValue;
  
  if (/[\+\-\*\/]$/.test(inputValue)) {
    inputValue = inputValue.slice(0, -1);
  }
  
  inputValue += operator;
  
  this.setData({
    inputValue: inputValue,
    disabled: false
  });
}

以上代碼中，我們先獲取點擊的運算符，並獲取當前輸入框的值。判斷如果輸入框的值的最後一個字符是運算符，則將輸入框的值刪除最後一個字符；然後將點擊的運算符添加到輸入框的值的後面。最後，更新輸入框的值，並將結果框解禁。

3. 清零

用戶通過點擊清零按鈕，將輸入框的值恢復為默認值0，同時將結果框禁用。代碼如下：

onClearBtnClick: function () {
  this.setData({
    inputValue: '0',
    disabled: true
  });
}

以上代碼中，我們將輸入框的值設置為0，並將結果框禁用。

4. 等號

用戶通過點擊等號按鈕，將輸入框的值進行計算，並顯示在結果框中。代碼如下：

onEqualBtnClick: function () {
  var inputValue = this.data.inputValue;
  
  try {
    var result = eval(inputValue);
    
    this.setData({
      inputValue: result.toFixed(2),
      disabled: true
    });
  } catch (e) {
    this.setData({
      inputValue: '',
      disabled: true
    });
    
    wx.showToast({
      title: '表達式錯誤',
      icon: 'none'
    });
  }
}

以上代碼中，我們通過JavaScript中的eval函數，將輸入框的值進行計算，並進行保留小數位數的處理。最後，將結果顯示在輸入框中，並將結果框禁用。

5. 錯誤提示

如果用戶輸入的表達式不合法，則需要進行錯誤提示。代碼如下：

try {
  // ...
} catch (e) {
  this.setData({
    inputValue: '',
    disabled: true
  });
  
  wx.showToast({
    title: '表達式錯誤',
    icon: 'none'
  });
}

以上代碼中，我們通過try-catch語句進行錯誤處理。如果出現錯誤，則將輸入框的值清空，並顯示錯誤提示。

三、總結

通過對微信小程序計算器的UI設計和邏輯實現的詳細介紹，我們可以看到在小程序中實現一個計算器所需要的核心代碼。這裡我們通過一個簡單的計算器，向大家展示了微信小程序的基本開發流程，包括UI設計和邏輯實現等內容。希望這篇文章能夠幫助大家理解微信小程序開發的基本思路和技術原理。