前言

本文主要介紹蘋果計算器項目中計算功能的實現(xiàn)

• 在前面的文章中已經(jīng)實現(xiàn)了輸入，動態(tài)計算字體大小，以及計算器的布局
• 本文主要介紹計算功能的實現(xiàn)

正文

實現(xiàn)/清空/改變正負/除以100

inputText 已經(jīng)實現(xiàn)了，接下來實現(xiàn) operator 的功能，operator 方法在之前的文章中已經(jīng)定義好了，所以本次就直接在里面寫邏輯就好了：

• 首先，來實現(xiàn) 清空，改變正負，除以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;
    }
},

代碼寫完之后，來看一下效果：

在本次運行中，發(fā)現(xiàn)了很多問題，但是我們一一來解決就好，首選來看除以 100，這個小數(shù)位錯誤的問題，其實是精度丟失。

丟失精度了我這里不測試了，大家可以將除以 100 的結(jié)果用 console.log 打印到控制臺看一下，我這里直接給出解決方案，我在網(wǎng)上找了一個 a-calc 的庫，用它，就可以幫我解決這個問題。

解決精度丟失問題

• 使用 a-calc，這里涉及到一個知識點就是在 UniApp 中安裝外部庫
• 方法很簡單，首先找到自己的項目文件夾目錄，可以像我一樣，如下圖

打開資源管理器之后：

再彈出來的終端當中輸入如下安裝指令即可進行安裝：

npm i a-calc

安裝成功之后我們就可以進行直接使用了，使用方式可以參考官網(wǎng)：https://www.npmjs.com/package/a-calc

使用 a-calc

導(dǎo)入 a-calc：

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

然后使用 calc 包裹一下，就可以解決精度丟失的問題了, calc 的參數(shù)是字符串，所以我們需要將 this.showValue 轉(zhuǎn)換為字符串，代碼如下：

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

這樣就可以解決精度丟失的問題了，來看一下效果：

實現(xiàn)計算操作

嗯，到這基本上解決完畢了，接下來來看加減乘除，首先來看一個做加減乘除之前所需要解決的問題，如下圖：

我按下的是 23 + 65，應(yīng)該在我按下 + 的時候?qū)?23 記錄下來，再將本次的運算符記錄下來，然后再將 65 記錄下來，最后再將 23 + 65 的結(jié)果記錄下來，這樣就可以了。

所以我還需要在改動一下代碼，我分別新增了三個變量，分別是：

• firstValue：第一個值
• operatorType：運算符
• secondValue：第二個值

• firstValue 保存運算前面的數(shù)據(jù)，例如：1 + 2，保存 1
• secondValue 保存運算后面的數(shù)據(jù)，例如：1 + 2，保存 2
• operatorType 保存運算符，例如：1 + 2，保存 +

我在額外定義一個變量 isCaculate, 用來記錄用戶，是否點擊過運算符。

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

需要的內(nèi)容都定義完畢之后，來改造一下代碼，首先在 operator 方法中，計算操作符的時候，需要將 isCaculate 設(shè)置為 true，每次輸入了運算符記錄一下狀態(tài)：

this.isCaculate = true;

然后在 inputText 方法中，需要判斷一下，如果 isCaculate 為 true，那么就將 firstValue 設(shè)置為 this.showValue，然后將 isCaculate 設(shè)置為 false，代碼如下：

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

運行一下，看一下效果：

很完美，接下來就是計算的邏輯了，首先來看 =, = 的 params 是 result 所以在 switch 處理一下 case 為 result 的情況, 因為這里設(shè)計到計算所以我單獨抽取一個方法來完成這件事情，方法名叫 caculate，寫到這我突然忘記一個事情就是要保存我們的運算符，所以我在 operator 方法中，將運算符保存到 operatorType 中，不能直接保存，而是在 default 中保存，

this.operatorType = params;

然后在 caculate 方法中，根據(jù) 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;
    }
},

計算邏輯寫完之后，來看一下效果：

這里還有個效果需要實現(xiàn)一下就是，我首先輸入 12 然后按 +，在輸入 12，然后按 +，這時候我需要進行一次計算，因為我按了兩次 +，所以在第二次按 + 的時候，需要將第一次的計算結(jié)果進行計算，所以我在 operator 方法中，需要判斷一下，如果 firstValue 不為空，那么就調(diào)用 caculate 方法，在 default 分支調(diào)用 caculate 方法，代碼如下：

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

• 到這里，計算器的功能就已經(jīng)實現(xiàn)完畢了
• 后面在給大家介紹一下，將這個項目打包成網(wǎng)頁/小程序/App

End

• 如果你有任何問題或建議，歡迎在下方留言，我會盡快回復(fù)
• 如果你覺得本文對你有幫助，歡迎點贊、收藏，你的支持是我寫作的最大動力

總結(jié)

以上是生活随笔為你收集整理的【UniApp】-uni-app-项目计算功能(苹果计算器)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。