【UniApp】-uni-app-项目计算功能(苹果计算器)

时间:2024-01-23 10:17:38


【UniApp】-uni-app-项目计算功能(苹果计算器)_uni-app

前言

本文主要介绍苹果计算器项目中计算功能的实现

  • 在前面的文章中已经实现了输入,动态计算字体大小,以及计算器的布局
  • 本文主要介绍计算功能的实现

正文

实现/清空/改变正负/除以100

inputText 已经实现了,接下来实现 operator 的功能,operator 方法在之前的文章中已经定义好了,所以本次就直接在里面写逻辑就好了:

  • 首先,来实现 清空改变正负除以100
operator(params) {
    switch (params) {
        case "clear":
            // 清空
            this.showValue = "0";
            break;
        case "opposite":
            // 改变正负
            // 负负得正
            this.showValue = -this.showValue;
            break;
        case "percent":
            // 除以 100
            this.showValue = this.showValue / 100;
            break;
        case "":
            break;
    }
},

代码写完之后,来看一下效果:

【UniApp】-uni-app-项目计算功能(苹果计算器)_数据_02

在本次运行中,发现了很多问题,但是我们一一来解决就好,首选来看除以 100,这个小数位错误的问题,其实是精度丢失。

丢失精度了我这里不测试了,大家可以将除以 100 的结果用 console.log 打印到控制台看一下,我这里直接给出解决方案,我在网上找了一个 a-calc 的库,用它,就可以帮我解决这个问题。

解决精度丢失问题

  • 使用 a-calc,这里涉及到一个知识点就是在 UniApp 中安装外部库
  • 方法很简单,首先找到自己的项目文件夹目录,可以像我一样,如下图

【UniApp】-uni-app-项目计算功能(苹果计算器)_字符串_03

打开资源管理器之后:

【UniApp】-uni-app-项目计算功能(苹果计算器)_字符串_04

再弹出来的终端当中输入如下安装指令即可进行安装:

npm i a-calc

【UniApp】-uni-app-项目计算功能(苹果计算器)_uni-app_05

安装成功之后我们就可以进行直接使用了,使用方式可以参考官网:https://www.npmjs.com/package/a-calc

使用 a-calc

导入 a-calc:

import {calc, fmt} from "a-calc"

然后使用 calc 包裹一下,就可以解决精度丢失的问题了, calc 的参数是字符串,所以我们需要将 this.showValue 转换为字符串,代码如下:

this.showValue = calc(`${this.showValue} / 100`);

这样就可以解决精度丢失的问题了,来看一下效果:

【UniApp】-uni-app-项目计算功能(苹果计算器)_运算符_06

实现计算操作

嗯,到这基本上解决完毕了,接下来来看加减乘除,首先来看一个做加减乘除之前所需要解决的问题,如下图:

【UniApp】-uni-app-项目计算功能(苹果计算器)_数据_07

我按下的是 23 + 65,应该在我按下 + 的时候将 23 记录下来,再将本次的运算符记录下来,然后再将 65 记录下来,最后再将 23 + 65 的结果记录下来,这样就可以了。

所以我还需要在改动一下代码,我分别新增了三个变量,分别是:

  • firstValue:第一个值
  • operatorType:运算符
  • secondValue:第二个值
  • firstValue 保存运算前面的数据,例如:1 + 2,保存 1
  • secondValue 保存运算后面的数据,例如:1 + 2,保存 2
  • operatorType 保存运算符,例如:1 + 2,保存 +

我在额外定义一个变量 isCaculate, 用来记录用户,是否点击过运算符。

firstValue: "",
secondValue: "",
operatorType: "",
isCaculate: false,

需要的内容都定义完毕之后,来改造一下代码,首先在 operator 方法中,计算操作符的时候,需要将 isCaculate 设置为 true,每次输入了运算符记录一下状态:

this.isCaculate = true;

【UniApp】-uni-app-项目计算功能(苹果计算器)_数据_08

然后在 inputText 方法中,需要判断一下,如果 isCaculatetrue,那么就将 firstValue 设置为 this.showValue,然后将 isCaculate 设置为 false,代码如下:

if (this.isCaculate) {
    this.firstValue = this.showValue;
    this.showValue = "0";
    this.isCaculate = false;
}

运行一下,看一下效果:

【UniApp】-uni-app-项目计算功能(苹果计算器)_运算符_09

很完美,接下来就是计算的逻辑了,首先来看 =, = 的 params 是 result 所以在 switch 处理一下 case 为 result 的情况, 因为这里设计到计算所以我单独抽取一个方法来完成这件事情,方法名叫 caculate,写到这我突然忘记一个事情就是要保存我们的运算符,所以我在 operator 方法中,将运算符保存到 operatorType 中,不能直接保存,而是在 default 中保存,

this.operatorType = params;

【UniApp】-uni-app-项目计算功能(苹果计算器)_运算符_10

然后在 caculate 方法中,根据 operatorType 来判断是加减乘除,然后进行计算,代码如下:

caculate() {
    switch (this.operatorType) {
        case "plus":
            this.showValue = calc(`${this.firstValue} + ${this.showValue}`);
            break;
        case "minus":
            this.showValue = calc(`${this.firstValue} - ${this.showValue}`);
            break;
        case "multiply":
            this.showValue = calc(`${this.firstValue} * ${this.showValue}`);
            break;
        case "divide":
            this.showValue = calc(`${this.firstValue} / ${this.showValue}`);
            break;
        case "":
            break;
    }
},

计算逻辑写完之后,来看一下效果:

【UniApp】-uni-app-项目计算功能(苹果计算器)_字符串_11

这里还有个效果需要实现一下就是,我首先输入 12 然后按 +,在输入 12,然后按 +,这时候我需要进行一次计算,因为我按了两次 +,所以在第二次按 + 的时候,需要将第一次的计算结果进行计算,所以我在 operator 方法中,需要判断一下,如果 firstValue 不为空,那么就调用 caculate 方法,在 default 分支调用 caculate 方法,代码如下:

if (this.firstValue != "") {
    this.caculate();
}

【UniApp】-uni-app-项目计算功能(苹果计算器)_数据_12

  • 到这里,计算器的功能就已经实现完毕了
  • 后面在给大家介绍一下,将这个项目打包成网页/小程序/App

End

  • 如果你有任何问题或建议,欢迎在下方留言,我会尽快回复
  • 如果你觉得本文对你有帮助,欢迎点赞、收藏,你的支持是我写作的最大动力

【UniApp】-uni-app-项目计算功能(苹果计算器)_uni-app_13