【UniApp】-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;
}
},
代码写完之后，来看一下效果：
在本次运行中，发现了很多问题，但是我们一一来解决就好，首选来看除以 100，这个小数位错误的问题，其实是精度丢失。
丢失精度了我这里不测试了，大家可以将除以 100 的结果用 console.log 打印到控制台看一下，我这里直接给出解决方案，我在网上找了一个 a-calc 的库，用它，就可以帮我解决这个问题。
解决精度丢失问题
- 使用
a-calc，这里涉及到一个知识点就是在 UniApp 中安装外部库 - 方法很简单，首先找到自己的项目文件夹目录，可以像我一样，如下图
打开资源管理器之后：
再弹出来的终端当中输入如下安装指令即可进行安装：
npm i a-calc
安装成功之后我们就可以进行直接使用了，使用方式可以参考官网：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`);
这样就可以解决精度丢失的问题了，来看一下效果：
实现计算操作
嗯，到这基本上解决完毕了，接下来来看加减乘除，首先来看一个做加减乘除之前所需要解决的问题，如下图：
我按下的是 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;
然后在 inputText 方法中，需要判断一下，如果 isCaculate 为 true，那么就将 firstValue 设置为 this.showValue，然后将 isCaculate 设置为 false，代码如下：
if (this.isCaculate) {
this.firstValue = this.showValue;
this.showValue = "0";
this.isCaculate = false;
}
运行一下，看一下效果：
很完美，接下来就是计算的逻辑了，首先来看 =, = 的 params 是 result 所以在 switch 处理一下 case 为 result 的情况, 因为这里设计到计算所以我单独抽取一个方法来完成这件事情，方法名叫 caculate，写到这我突然忘记一个事情就是要保存我们的运算符，所以我在 operator 方法中，将运算符保存到 operatorType 中，不能直接保存，而是在 default 中保存，
this.operatorType = params;
然后在 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;
}
},
计算逻辑写完之后，来看一下效果：
这里还有个效果需要实现一下就是，我首先输入 12 然后按 +，在输入 12，然后按 +，这时候我需要进行一次计算，因为我按了两次 +，所以在第二次按 + 的时候，需要将第一次的计算结果进行计算，所以我在 operator 方法中，需要判断一下，如果 firstValue 不为空，那么就调用 caculate 方法，在 default 分支调用 caculate 方法，代码如下：
if (this.firstValue != "") {
this.caculate();
}
- 到这里，计算器的功能就已经实现完毕了
- 后面在给大家介绍一下，将这个项目打包成网页/小程序/App
End
- 如果你有任何问题或建议，欢迎在下方留言，我会尽快回复
- 如果你觉得本文对你有帮助，欢迎点赞、收藏，你的支持是我写作的最大动力
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！