Press "Enter" to skip to content

使用mpvue制作计算器微信小程序(仿Mac计算器 含源码)

Last updated on 2019年10月20日

今天给大家分享如何制作一个计算器微信小程序。下面是最终效果演示:

我们分为三个步骤进行:设计,实现,测试。

设计

计算器界面模仿Mac计算器界面。

计算器UI

计算器分为四个主要部分,显示面板,功能键,运算符键,数字键。

  1. 显示面板:显示当前用户输入的数值以及运算结果
  2. 功能键:AC(清除输入),±(正负),%(百分之)
  3. 运算符键:+(加),-(减),×(乘),÷(除)
  4. 数字键:0-9,.(小数点)

实现

创建项目

按照mpvue快速上手文档创建项目http://mpvue.com/mpvue/quickstart.html

vue init mpvue/mpvue-quickstart calculator // 创建项目
npm run dev // 运行开发模式
  1. 打开微信开发者工具
  2. 选择导入项目
  3. 选择项目路径
  4. AppID:使用测试号
  5. 导入项目

初始化项目

用代码编辑器打开项目,打开src/pages目录,移除counterlogs目录,只保留index目录作为我们这个小程序的唯一页面。打开src/pages/index/index.vue将这个文件里面的代码清空。

打开src/app.json文件,移除“tabBar”,将window>navigationBarTitleText的值改为计算器。移除pageslogscounter的路径。

停止并重新运行npm run dev命令。每次修改关于页面的设置的时候,都需要重新运行这个命令。

实现基本布局

<template>
  <div id="calculator">
    <div class="display-pad">
      <div class="display-area">
        123
      </div>
    </div>
    <div class="input-pad">
      <button class="key function-key">AC</button>
      <button class="key function-key">±</button>
      <button class="key function-key">%</button>
      <button class="key operation-key">÷</button>
      <button class="key digit-key">7</button>
      <button class="key digit-key">8</button>
      <button class="key digit-key">9</button>
      <button class="key operation-key">×</button>
      <button class="key digit-key">4</button>
      <button class="key digit-key">5</button>
      <button class="key digit-key">6</button>
      <button class="key operation-key">−</button>
      <button class="key digit-key">1</button>
      <button class="key digit-key">2</button>
      <button class="key digit-key">3</button>
      <button class="key operation-key">+</button>
      <button class="key digit-key key-0">0</button>
      <button class="key digit-key">●</button>
      <button class="key operation-key">=</button>
    </div>
  </div>
</template>

<style>
  html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    font: 100 14px 'Robot';
  }

  #calculator {
    height: 100%;
    background: #000000;
  }

  #calculator .display-pad {
    height: 25%;
    width: 100%;
  }

  #calculator .display-pad .display-area {
    padding: 0 30px;
    float: right;
    font-size: 2rem;
    color: #ffffff;
  }

  #calculator .input-pad {
    height: 75%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #calculator .key {
    width: 100%;
    height: 100%;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
  }

  #calculator .key:active {
    box-shadow: inset 0 0 80px 0 rgba(0,0,0,0.25);
  }

  #calculator .key::after {
    border-radius: 0;
  }

  #calculator .input-pad .key-0 {
    grid-column-start: 1;
    grid-column-end: 3;
  }

  #calculator .display-pad {
    background: #505050;
  }

  #calculator .function-key {
    background: #D4D4D2;
  }

  #calculator .operation-key {
    background: #FF9500;
    color: #ffffff;
    font-size: 0.7rem;
  }
</style>
效果图

设置参数

data () {
    return {
      value: null, // 存储当前计算结果
      displayValue: '0', // 当前显示的数字
      operator: null, // 当前运算符
      waitingForOperand: false // 等待下一个运算数
    }
  }

实现输入数字逻辑

inputDigit (digit) {
      if (this.waitingForOperand) {
        this.displayValue = String(digit)
        this.waitingForOperand = false
      } else {
        this.displayValue = this.displayValue === '0' ? String(digit) : this.displayValue + digit
      }
    }

输入小数点

inputDot () {
      if (!(/\./).test(this.displayValue)) {
        this.displayValue += '.'
        this.waitingForOperand = false
      }
    }

实现操作功能逻辑

// AC操作,清楚所有输入
clearAll () {
  this.value = null
  this.displayValue = '0'
  this.operator = null
  this.waitingForOperand = false
},
// C操作,清楚当前输入
clearDisplay () {
  this.displayValue = '0'
},
// 切换当前输入数字正负
toggleSign () {
  let newValue = parseFloat(this.displayValue) * -1
  this.displayValue = String(newValue)
},
// 输入百分之
inputPercent () {
  let currentValue = parseFloat(this.displayValue)
  if (currentValue === 0) {
    return
  }
  let fixedDigits = this.displayValue.replace(/^-?\d*\./, '')
  let newValue = parseFloat(this.displayValue) / 100
  this.displayValue = String(newValue.toFixed(fixedDigits.length + 2))
}

实现加、减、乘、除逻辑

const CalculatorOperations = {
  '/': function (prevValue, nextValue) {
    return prevValue / nextValue
  },
  '*': function (prevValue, nextValue) {
    return prevValue * nextValue
  },
  '+': function (prevValue, nextValue) {
    return prevValue + nextValue
  },
  '-': function (prevValue, nextValue) {
    return prevValue - nextValue
  },
  '=': function (prevValue, nextValue) {
    return nextValue
  }
}

performOperation (nextOperator) {
  let inputValue = parseFloat(this.displayValue)
  if (this.value == null) {
    this.value = inputValue
  } else if (this.operator) {
    let currentValue = this.value || 0
    let newValue = CalculatorOperations[this.operator](currentValue, inputValue)
    this.value = newValue
    this.displayValue = String(newValue)
  }

  this.waitingForOperand = true
  this.operator = nextOperator
}

动态更改AC操作按钮显示状态

computed: {
  clearText () {
    return this.displayValue !== '0' ? 'C' : 'AC'
  }
}

参考

Apple Calculator App Icon 2017 Color Scheme

A guide to learning CSS grid by @jonsuh

mpvue 快速上手

React CalculatorA PEN BY Michael Jackson

源码下载

视频教程

Bilibili

Youtube

Be First to Comment

发表评论

电子邮件地址不会被公开。 必填项已用*标注