【微信小程序——计算器】

---

前言

 微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，微信小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。微信小程序能够实现消息通知、线下扫码、公众号关联等七大功能。其中，通过公众号关联，用户可以实现公众号与微信小程序之间相互跳转。
提示：以上内容源于百度百科，仅供参考

---

1、计算器的效果图

2、index.wxml

<!-- index.wxml -->
<view class='screen'>{{result}}</view>

<view class='test-bg'>
  <view class='btnGroup'>
    <view class='item orange' bindtap='clickButton' id="{{C}}">C</view>
    <view class='item orange' bindtap='clickButton' id="{{back}}">DEL</view>
    <view class='item orange' bindtap='clickButton' id="{{addSub}}">%</view>
    <view class='item orange' bindtap='clickButton' id="{{div}}">÷</view>
  </view>

  <view class='btnGroup'>
    <view class='item blue' bindtap='clickButton' id="{{id7}}">7</view>
    <view class='item blue' bindtap='clickButton' id="{{id8}}">8</view>
    <view class='item blue' bindtap='clickButton' id="{{id9}}">9</view>
    <view class='item orange' bindtap='clickButton' id="{{mut}}">×</view>
  </view>

  <view class='btnGroup'>
    <view class='item blue' bindtap='clickButton' id="{{id4}}">4</view>
    <view class='item blue' bindtap='clickButton' id="{{id5}}">5</view>
    <view class='item blue' bindtap='clickButton' id="{{id6}}">6</view>
    <view class='item orange' bindtap='clickButton' id="{{sub}}">-</view>
  </view>

  <view class='btnGroup'>
    <view class='item blue' bindtap='clickButton' id="{{id1}}">1</view>
    <view class='item blue' bindtap='clickButton' id="{{id2}}">2</view>
    <view class='item blue' bindtap='clickButton' id="{{id3}}">3</view>
    <view class='item orange' bindtap='clickButton' id="{{add}}">+</view>
  </view>

  <view class='btnGroup'>
    <view class='item blue' bindtap='clickButton' id="{{percent}}"></view>
    <view class='item blue' bindtap='clickButton' id="{{id0}}">0</view>
    <view class='item blue' bindtap='clickButton' id="{{dot}}">.</view>
    <view class='item orange' bindtap='clickButton' id="{{equ}}">=</view>
  </view>

</view>

3、index.js

// index.js
// 获取应用实例
const app = getApp()

// Page({
//   data: {
//     motto: 'Hello World',
//     userInfo: {},
//     hasUserInfo: false,
//     canIUse: wx.canIUse('button.open-type.getUserInfo'),
//     canIUseGetUserProfile: false,
//     canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
//   },
//   // 事件处理函数
//   bindViewTap() {
//     wx.navigateTo({
//       url: '../logs/logs'
//     })
//   },
//   onLoad() {
//     if (wx.getUserProfile) {
//       this.setData({
//         canIUseGetUserProfile: true
//       })
//     }
//   },
//   getUserProfile(e) {
//     // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
//     wx.getUserProfile({
//       desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
//       success: (res) => {
//         console.log(res)
//         this.setData({
//           userInfo: res.userInfo,
//           hasUserInfo: true
//         })
//       }
//     })
//   },
//   getUserInfo(e) {
//     // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
//     console.log(e)
//     this.setData({
//       userInfo: e.detail.userInfo,
//       hasUserInfo: true
//     })
//   }
// })
Page({
  data: {
    back: 'back',
    C: 'C',
    addSub: 'addSub',
    add: '+',
    sub: '-',
    mut: '×',
    div: '÷',
    equ: '=',
    percent: '%',
    dot: '.',
    id0: '0',
    id1: '1',
    id2: '2',
    id3: '3',
    id4: '4',
    id5: '5',
    id6: '6',
    id7: '7',
    id8: '8',
    id9: '9',
    result: '0',
    valiBackOfArray: ['+', '-', '×', '÷', '.'],
    completeCalculate: false
  },
  // 计算结果
  calculate: function (str) {
    // 判断是不是有负数
    var isNagativeNum = false;
    if (str.charAt(0) == '-') {
      str = str.replace('-', '').replace('(', '').replace(')', '');
      isNagativeNum = true;
    }
    // 对字符串解析并运算
    var addArray = str.split('+');
    var sum = 0.0;
    for (var i = 0; i < addArray.length; i++) {
      if (addArray[i].indexOf('-') == -1) {
        if (addArray[i].indexOf('×') != -1 || addArray[i].indexOf('÷') != -1)
          sum += this.calculateMutDiv(addArray[i]);
        else sum += Number(addArray[i]);
      }
      else {
        var subArray = addArray[i].split('-');
        var subSum = 0;
        if (subArray[0].indexOf('×') != -1 || subArray[0].indexOf('÷') != -1) subSum = this.calculateMutDiv(subArray[0]);
        else subSum = Number(subArray[0]);
        for (var j = 1; j < subArray.length; j++) {
          if (subArray[i].indexOf('×') != -1 || subArray[i].indexOf('÷') != -1)
            subSum -= this.calculateMutDiv(subArray[j]);
          else subSum -= Number(subArray[j]);
        }
        sum += subSum;
      }
    }
    if (isNagativeNum) return (-sum).toString();
    else return sum.toString();
  },
  // 分块乘除运算
  calculateMutDiv: function (str) {
    var addArray = str.split('×');
    var sum = 1.0;
    for (var i = 0; i < addArray.length; i++) {
      if (addArray[i].indexOf('÷') == -1) {
        sum *= Number(addArray[i]);
      }
      else {
        var subArray = addArray[i].split('÷');
        var subSum = Number(subArray[0]);
        for (var j = 1; j < subArray.length; j++) {
          subSum /= Number(subArray[j]);
        }
        sum *= subSum;
      }
    }
    return sum;
  },
  // 是否以运算符结尾
  isOperatorEnd: function (str) {
    for (var i = 0; i < this.data.valiBackOfArray.length; i++) {
      if (str.charAt(str.length - 1) == this.data.valiBackOfArray[i]) return true;
    }
    return false;
  },
  clickButton: function (event) {
    if (this.data.result == 0) {
      if (event.target.id == 'back' || event.target.id == 'C' || event.target.id == 'addSub' || event.target.id == '%' || event.target.id == '+' || event.target.id == '-' || event.target.id == '×' || event.target.id == '÷' || event.target.id == '=') return;
      this.setData({
        result: event.target.id
      });
    }
    else if (event.target.id == 'back') {
      this.setData({
        result: this.data.result.length == 1 ? '0' : this.data.result.substring(0, this.data.result.length - 1)
      });
    }
    else if (event.target.id == 'C') {
      this.setData({
        result: '0'
      });
    }
    else if (event.target.id == 'addSub') {
      var r = this.data.result;
      if (this.isOperatorEnd(r)) return;
      if (r.charAt(0) == '-') this.setData({ result: r.replace('-', '').replace('(', '').replace(')', '') });
      else this.setData({
        result: '-(' + r + ')'
      });
    }
    else if (event.target.id == '%') {
    }
    else if (event.target.id == '=') {
      if (this.isOperatorEnd(this.data.result)) return;
      this.setData({
        result: this.calculate(this.data.result)
      });
      this.setData({
        completeCalculate: true
      });
    }
    else {
      if (this.isOperatorEnd(this.data.result) && this.isOperatorEnd(event.target.id)) return;
      // 如果计算结果有小数点，直到输入运算符前不能再输入小数点
      if (this.data.completeCalculate && this.data.result.indexOf('.') != -1 && event.target.id == '.') return;
      for (var i = 0; i < this.data.valiBackOfArray.length - 1; i++) {
        if (this.data.valiBackOfArray[i] == event.target.id) {
          this.setData({
            completeCalculate: false
          });
          break;
        }
      }
      this.setData({
        result: this.data.result + event.target.id
      });
    }
  }
})

3、index.json

{
  "usingComponents": {},
  "navigationBarTitleText":"计算器",
  "navigationBarBackgroundColor":"#1f67a0",
	"navigationBarTextStyle":"white"
}

5、index.wxss

/**index.wxss**/
/* .userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.usermotto {
  margin-top: 200px;
} */
page {
  width: 100%;
  height: 100%;
}

.test-bg {
  position: fixed;
  bottom: 0;
}

.screen {
  position: fixed;
  color: #000000;
  font-size: 30px;
  bottom: 780rpx;
  text-align: right;
  width: 730rpx;
  word-wrap: break-word;
}

.btnGroup {
  display: flex;
  /*弹性显示结构*/
  flex-direction: row;
  /*横向显示*/
}

.item {
  width: 192rpx;
  line-height: 148rpx;
  border-radius: 5%;
  text-align: center;
}

.orange {
  /* 前景色 */
  color: #000000;
  border: solid 1rpx #ffffff;
  /* 背景色 */
  background: #f78d1d;
}

.blue {
  /* 前景色 */
  color: #000000;
  border: solid 1rpx #ffffff;
  /* 背景色 */
  background: #0095cd;
}

---

总结

该小程序还有待完善的地方，还请各位大佬多多指教。