自己开发封装的微信小程序计算器组件，复制即可用（完整代码）

写在前面

我在开发自己用的账本类微信小程序时，因为嫌老是要切屏打开计算器，算完之后还要照着计算结果手动记录很不方便，尤其是当计算出来的结果位数较长时，容易看错或打错，因此想自己开发封装一个计算器组件在需要用的页面里，这样不仅可以减少切屏的次数，还可以直接去拿到计算结果自动记录，非常的方便。

按惯例先贴效果再上代码，啰嗦的话后面再讲。

效果预览

完整代码

先贴目录，自己对应下面的代码复制到哪个对应的文件里（后续等我把自己的项目整理差不多了，有空写一个demo放到github上，这样下载起来会更方便一些。现在就先复制吧）：

// component/calculator/calculator.js
var util = require("../../utils/util.js");
Component({
   

  /**
   * 组件的属性列表
   */
  properties: {
   

  },


  /**
   * 页面的初始数据
   */
  data: {
   
    pageHeight: wx.getSystemInfoSync().windowHeight,//页面高度
    finalResult: 0,//显示屏上的结果
    operationBtnsOn: false,//是否按下了操作按钮
    preResult: 0,//上次的结果
    operationBtnType: '',//操作
    savePre: false,//是否保存上一次的显示屏内容
    clearResult: false,//是否清除显示屏上的结果
    resultText: "",//输入记录
    historyOperationList: [],//历史操作列表
    figures: 8,//保留位数
  },

  methods: {
   
    /**
    * 点击清空
    */
    cleanResult: function () {
   
      this.setData({
   
        finalResult: 0,
        operationBtnsOn: false,
        operationBtnType: '',
        preResult: 0,
        savePre: false,
        clearResult: false,
        resultText: ''
      })
    },

    /**
     * 点击退格
     */
    deleteInput: function () {
   
      if (this.data.finalResult == "" || this.data.finalResult == "-") {
   
        this.setData({
   
          finalResult: 0
        })
      }
      if (typeof this.data.finalResult == "number") {
   
        this.data.finalResult = this.data.finalResult.toString();
      }
      if (this.data.resultText != "" && Number(this.data.finalResult) != 0) {
   
        let temp = this.data.resultText.substring(this.data.resultText.length - 1);
        if (temp == "+" || (temp == "-" && this.data.resultText) || temp == "*" || temp == "/") {
   
          this.setData({
   
            resultText: this.data.resultText + this.data.finalResult.substring(0, this.data.finalResult.length - 1)
          })
        } else {
   
          this.setData({
   
            resultText: this.data.resultText.substring(0, this.data.resultText.length - 1)
          })
        }
      } else {
   
        if (this.data.finalResult.substring(0, this.data.finalResult.length - 1).length > 0) {
   
          this.setData({
   
            resultText: this.data.resultText.substring(0, this.data.resultText.length - 1)
          })
        } else {
   
          if (this.data.resultText.length > 0) {
   
            this.setData({
   
              resultText: this.data.resultText.substring(0, this.data.resultText.length - 1)
            })
          }
        }
      }
      if (Number(this.data.finalResult) != 0 && Number(this.data.finalResult.substring(0, this.data.finalResult.length - 1)) != 0) {
   
        this.setData({
   
          finalResult: this.data.finalResult.substring(0, this.data.finalResult.length - 1)
        })
      } else {
   
        if (this.data.finalResult.substring(0, this.data.finalResult.length - 1).length > 1) {
   
          this.setData({
   
            finalResult: this.data.finalResult.substring(0, this.data.finalResult.length - 1)
          })
        } else {
   
          this.setData({
   
            finalResult: 0
          })
        }
      }
    },

    /**
     * 点击输入
     */
    inputNum: function (e) {
   
      var finalResult = this.data.finalResult;
      if (Number(finalResult) == 0) {
   
        if (finalResult.length > 8) {
   
          return;
        }
        if (e.currentTarget.dataset.num == ".") {
   
          if (finalResult === "-0"