【UniApp】-uni-app-專案計算功能(蘋果計算器)

BNTang發表於2023-12-26
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

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

相關文章