【UniApp】-uni-app-项目计算功能(苹果计算器)
前言
本文主要介紹蘋果計算器項目中計算功能的實現(xiàn)
- 在前面的文章中已經實現(xiàn)了輸入，動態(tài)計算字體大小，以及計算器的布局
- 本文主要介紹計算功能的實現(xiàn)
正文
實現(xiàn)/清空/改變正負/除以100
inputText 已經實現(xiàn)了，接下來實現(xiàn) operator 的功能，operator 方法在之前的文章中已經定義好了，所以本次就直接在里面寫邏輯就好了：
- 首先，來實現(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 的結果用 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 的參數(shù)是字符串，所以我們需要將 this.showValue 轉換為字符串，代碼如下：
this.showValue = calc(`${this.showValue} / 100`);
這樣就可以解決精度丟失的問題了，來看一下效果：
實現(xiàn)計算操作
嗯，到這基本上解決完畢了，接下來來看加減乘除，首先來看一個做加減乘除之前所需要解決的問題，如下圖：
我按下的是 23 + 65，應該在我按下 + 的時候將 23 記錄下來，再將本次的運算符記錄下來，然后再將 65 記錄下來，最后再將 23 + 65 的結果記錄下來，這樣就可以了。
所以我還需要在改動一下代碼，我分別新增了三個變量，分別是：
-
firstValue：第一個值 -
operatorType：運算符 -
secondValue：第二個值
- firstValue 保存運算前面的數(shù)據，例如：1 + 2，保存 1
- secondValue 保存運算后面的數(shù)據，例如：1 + 2，保存 2
- operatorType 保存運算符，例如：1 + 2，保存 +
我在額外定義一個變量 isCaculate, 用來記錄用戶，是否點擊過運算符。
firstValue: "",
secondValue: "",
operatorType: "",
isCaculate: false,
需要的內容都定義完畢之后，來改造一下代碼，首先在 operator 方法中，計算操作符的時候，需要將 isCaculate 設置為 true，每次輸入了運算符記錄一下狀態(tài)：
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;
}
},
計算邏輯寫完之后，來看一下效果：
這里還有個效果需要實現(xiàn)一下就是，我首先輸入 12 然后按 +，在輸入 12，然后按 +，這時候我需要進行一次計算，因為我按了兩次 +，所以在第二次按 + 的時候，需要將第一次的計算結果進行計算，所以我在 operator 方法中，需要判斷一下，如果 firstValue 不為空，那么就調用 caculate 方法，在 default 分支調用 caculate 方法，代碼如下：
if (this.firstValue != "") {
this.caculate();
}
- 到這里，計算器的功能就已經實現(xiàn)完畢了
- 后面在給大家介紹一下，將這個項目打包成網頁/小程序/App
End
- 如果你有任何問題或建議，歡迎在下方留言，我會盡快回復
- 如果你覺得本文對你有幫助，歡迎點贊、收藏，你的支持是我寫作的最大動力
總結
以上是生活随笔為你收集整理的【UniApp】-uni-app-项目计算功能(苹果计算器)的全部內容，希望文章能夠幫你解決所遇到的問題。
