基于微信小程序的表達(dá)式計(jì)算器的設(shè)計(jì)與實(shí)現(xiàn)

趙素萍

（晉中信息學(xué)院 山西省晉中市 030800）

本項(xiàng)目將字符串分割為數(shù)和運(yùn)算符兩個(gè)數(shù)組，從運(yùn)算符的第一個(gè)數(shù)組元素開始，先進(jìn)行乘除的運(yùn)算，即從左到右，將所有的乘除運(yùn)算計(jì)算完，再進(jìn)行第二次循環(huán)，計(jì)算所有的加減。本文從此觀點(diǎn)出發(fā)，設(shè)計(jì)并實(shí)現(xiàn)了計(jì)算器的表達(dá)式求值。不使用棧而是直接將對字符串進(jìn)行操作，可實(shí)現(xiàn)表達(dá)式的實(shí)時(shí)計(jì)算。通過實(shí)驗(yàn)發(fā)現(xiàn)，該方法能大大提高計(jì)算的執(zhí)行效率。

1 頁面布局

本項(xiàng)目采用的是flex布局。Flex（Flexible Box）為”彈性布局”，用來為盒狀模型內(nèi)容的容器成員項(xiàng)提供最大的靈活性。具體使用方法為將容器的顯示方式設(shè)置為flex，為容器成員分配其占比即可。

頁面樣式中較難的為flex布局，但只要掌握了基礎(chǔ)知識，即找到對應(yīng)的容器和項(xiàng)目，并為容器設(shè)置顯示方式和顯示方向；為項(xiàng)目設(shè)置各自的所占比例即可，寫代碼就會變的很容易。為了更好的理解代碼，程序員必須充分了解并熟練掌握調(diào)試器的使用，最終運(yùn)行時(shí)調(diào)試器中顯示的wxml結(jié)構(gòu)如圖1所示。

根據(jù)圖1可以看出，小程序進(jìn)行渲染時(shí)，結(jié)構(gòu)文件中的所有內(nèi)容都會被包含到這樣一對組件中，所有在該項(xiàng)目中，可以將page視為容器，顯示屏與按鈕為其成員，可靈活分配占比，本項(xiàng)目中采用的2:3。Page的樣式設(shè)置為flex布局方式，flex方向設(shè)置為縱向布局；容器成員設(shè)置為1:1即可。參考代碼如下：

圖1：計(jì)算器結(jié)構(gòu)

page{display：flex；flex-direction：column；}

.num{flex：2}

.btns{flex：3}

顯示區(qū)域不需要采用flex布局，只需要采用絕對定位方式將其放置到合理的位置即可。即表達(dá)式和結(jié)果的樣式設(shè)置為“display：absolute；”，并通過left、right、top、bottom的屬性值設(shè)置，來決定最后要放的位置即可。

需要注意的是，若使用absolute絕對定位，要求包含該組件的容器不能為靜態(tài)定位方式，不然是相對于整個(gè)頁面的定位，即需要將num容器的布局方式設(shè)置為相對定位，即“display：relative；”。

按鈕區(qū)域也使用了flex布局，其中按鈕區(qū)域是容器，另使用4個(gè)view為其容器成員，這4個(gè)view為四行按鈕。每一行都占25%。參考代碼如下：

.btns{display：flex；flex-direction：column；}

.row{flex：25%}

每一行的view為容器，再使用3-4個(gè)view為容器成員，該view為我們最終要使用的按鈕，將其占比統(tǒng)一設(shè)置為25%。若一行有3個(gè)按鈕，則需要有一個(gè)按鈕加長，達(dá)到合并單元格的效果，實(shí)現(xiàn)方法為在組件內(nèi)通過行內(nèi)樣式實(shí)現(xiàn)。頁面樣式和行內(nèi)樣式都為其設(shè)置了相同屬性的不同屬性值時(shí)，即發(fā)生沖突時(shí)，由于行內(nèi)樣式的優(yōu)先級最高，所以刪除DEL按鈕通過行內(nèi)樣式修改了他的寬度為50%。如圖1第5行代碼所示。

2 數(shù)字輸入

2.1 輸入字符太多

如果用戶需要輸入的字符串表達(dá)式太長時(shí)，會導(dǎo)致顯示屏放不下這么多的內(nèi)容，此時(shí)不再支持用戶字符的輸入，本項(xiàng)目中規(guī)定若表達(dá)式的長度大于25則不再支持繼續(xù)輸入，直接退出。求字符串長度直接使用系統(tǒng)為字符串定義好的length屬性即可。需要用戶自己使用循環(huán)函數(shù)來統(tǒng)計(jì)字符串的長度，可以很大程度的節(jié)省程序員的開發(fā)時(shí)間，提高開發(fā)效率。參考代碼如下：

if (str.length > 25) return

函數(shù)內(nèi)遇到return就會直接退出函數(shù)體，不會再執(zhí)行剩余的代碼，所以如果讀者想結(jié)束函數(shù)的運(yùn)行時(shí)，即可使用上述代碼的方式退出，即滿足一定的條件時(shí)退出。條件的判斷使用if關(guān)鍵字來實(shí)現(xiàn)。

2.2 無效0的替換

表達(dá)式的操作：

當(dāng)前輸入的數(shù)字為0，字符串的最后一位也為0，則將0替換，即再輸入多個(gè)0仍為0，否則替換為其他數(shù)字，即當(dāng)用戶輸入00001時(shí)，字符串為1。若不判斷最后一位為0，則1+2變成了12。若不判斷當(dāng)前輸入的數(shù)是否為0，則100就沒辦法輸入，因?yàn)樗械?都會被替換。若數(shù)字為0，這時(shí)就需要判斷表達(dá)式的最后一位是否也為字符0，此時(shí)不為0則不需要替換，如0.1的輸入不會被替換為1，仍然為0.1。

當(dāng)前數(shù)的操作：

若當(dāng)前數(shù)為0則替換，否則直接加在后面即可。微信小程序中頁面結(jié)構(gòu)可以采用數(shù)據(jù)綁定的方式將后臺的值顯示在頁面中，同時(shí)也可以在后臺修改其值，需要注意的是，不能通過賦值方式改變頁面結(jié)構(gòu)中數(shù)據(jù)綁定的值，必須通過setData函數(shù)來修改，而該函數(shù)的參數(shù)為json格式的對象類型，即setData({屬性名1：屬性值1，屬性名2：屬性值2.....})。

代碼如下：

其中c為表達(dá)式的最后一個(gè)字符，substr函數(shù)為字符串的截取，其參數(shù)分別是起始位置和截取子串的長度，第3行代碼為截取除最后一位的字符串并加上當(dāng)前輸入的字符后組成新的字符串，并將新的字符串賦值為表達(dá)式。舉例說明，當(dāng)前表達(dá)式為“1+0”，當(dāng)用戶輸入2時(shí)，將表達(dá)式中的1+取出并和2連接，即“1+2”。通過此方法來增強(qiáng)代碼的強(qiáng)壯性。否則直接將輸入的字符連接到表達(dá)式后面即可。

最后，需要注意的是，為了實(shí)現(xiàn)實(shí)時(shí)計(jì)算的效果，增強(qiáng)用戶的體驗(yàn)效果，用戶每輸入一個(gè)數(shù)時(shí)進(jìn)行結(jié)果的計(jì)算，并通過數(shù)據(jù)綁定的方式將結(jié)果直接顯示在屏幕上，不需要專門按等于號才能知道結(jié)果。由于計(jì)算運(yùn)用在多個(gè)地方，所以將表達(dá)式計(jì)算的功能封裝成函數(shù)，用到的時(shí)候調(diào)用即可。

3 表達(dá)式的計(jì)算

首先先將表達(dá)式分割為數(shù)字?jǐn)?shù)組和運(yùn)算符數(shù)組，采用split函數(shù)來實(shí)現(xiàn)。通過調(diào)試發(fā)現(xiàn)，表達(dá)式通過split函數(shù)分割后的數(shù)組中包含有很多的空字符數(shù)組元素。數(shù)字?jǐn)?shù)組中只有第一個(gè)和最后一個(gè)數(shù)組元素時(shí)空字符串，只需要將其刪除即可。刪除數(shù)組元素的方式是采用splice方法來實(shí)現(xiàn)。而運(yùn)算符數(shù)組中，中間元素也有很多的空字符串元素。所以需要循環(huán)判斷運(yùn)算符數(shù)組元素，并將其空字符元素全部刪除。

通過split分割函數(shù)和splice刪除數(shù)組元素的函數(shù)，即可得到正確的數(shù)組。舉例說明，假設(shè)用戶輸入的表達(dá)式為“5+12×3÷4”，則數(shù)字?jǐn)?shù)組為{5,12,3,4}，運(yùn)算符數(shù)組為{“+”，“×”，“÷”}。

得到正確的數(shù)組后，首先要解決的就是按照先乘除后加減，從左到右的運(yùn)算法則進(jìn)行計(jì)算。所以需要循環(huán)遍歷運(yùn)算符數(shù)組。具體操作如下：

（1）先從左到右依次找出乘除運(yùn)算符的下標(biāo)。找到一個(gè)乘號或除號后，返回下標(biāo)i并轉(zhuǎn)入（2）；遍歷完運(yùn)算符數(shù)組后轉(zhuǎn)入（3）；

（2）根據(jù)下標(biāo)找出兩個(gè)運(yùn)算數(shù)，即下標(biāo)為i和i+1的運(yùn)算數(shù)數(shù)組元素，運(yùn)算并將運(yùn)算結(jié)果存入下標(biāo)為i的運(yùn)算數(shù)數(shù)組，刪除下標(biāo)為i的運(yùn)算符和下標(biāo)為i+1的運(yùn)算數(shù)。轉(zhuǎn)入（1）繼續(xù)尋找；

（3）同樣的方法，從左到右遍歷運(yùn)算符數(shù)組進(jìn)行加減運(yùn)算。當(dāng)運(yùn)算符數(shù)組為空，轉(zhuǎn)入（4）；

（4）此時(shí)運(yùn)算數(shù)數(shù)組只有一個(gè)數(shù)，即最后要求的結(jié)果。通過數(shù)據(jù)綁定的方式將其顯示出來即可。

為了讀者更清晰的了解計(jì)算機(jī)的運(yùn)算過程，特將每一次運(yùn)算后的數(shù)組元素都輸出到控制臺中，讀者可看測試小節(jié)中的圖5。

圖5：console控制臺實(shí)時(shí)監(jiān)測運(yùn)算過程

4 小數(shù)點(diǎn)的輸入

小數(shù)點(diǎn)的操作大概分為3種情況，1沒有；2一個(gè)；3多個(gè)。其中一個(gè)小數(shù)點(diǎn)時(shí)又分為3種情況：1只有小數(shù)部分沒有整數(shù)部分，如用戶直接輸入‘.1’；2只有整數(shù)部分沒有小數(shù)部分，如用戶輸入‘1.+2’。針對各種情況都需要有相應(yīng)的處理來增強(qiáng)軟件的強(qiáng)壯型。

4.1 直接輸入.->0.

數(shù)字為0，用戶直接輸入"."，則數(shù)字需要變?yōu)?0."，字符串表達(dá)式則需要直接與"0."鏈接。舉例說明當(dāng)用戶輸入"1+.2"時(shí)，用戶輸完"+"后，num變?yōu)?0"，輸入"."時(shí)，表達(dá)式變?yōu)?1+0."，num變?yōu)?0."。表達(dá)式的最后不能為0，否則會變成"00."。

為了實(shí)現(xiàn)上述功能，需要取出字符串表達(dá)式中的最后一個(gè)字符，具體代碼如下：

4.2 小數(shù)部分不輸入1.->1.0

當(dāng)用戶輸入1.時(shí)，表示數(shù)據(jù)部分已經(jīng)輸入完成，下一個(gè)輸入的為運(yùn)算符，所以每次在輸入運(yùn)算符之前都需要判斷字符串的最后一位是否為小數(shù)點(diǎn)，若成立則先將表達(dá)式的最后加一個(gè)0再加當(dāng)前輸入的運(yùn)算符。否則會出錯(cuò)，如表達(dá)式為1.+2，則Numbers數(shù) 組[‘1’，‘’，‘2’]，options數(shù)組[‘.+’]。效果如圖，圖2為表達(dá)式和計(jì)算結(jié)果，圖3為console控制臺輸出的數(shù)組。很顯然結(jié)果是錯(cuò)誤的。

圖2：表達(dá)式與計(jì)算結(jié)果

圖3：console控制臺調(diào)試結(jié)果

將表達(dá)式改為1.0+2后，Numbers數(shù)組[‘1.0’，‘2’]，options數(shù)組[‘+’]，實(shí)現(xiàn)加0的具體代碼如下：

4.3 同一個(gè)數(shù)輸入多個(gè)點(diǎn) 0.1..2.3->0.123

數(shù)字中如果已經(jīng)有點(diǎn)，則用戶再加點(diǎn)就不被允許了,直接退出函數(shù)。需要循環(huán)遍歷當(dāng)前正在輸入的數(shù)中是否含有小數(shù)點(diǎn)，使用str.indexOf('.')函數(shù)實(shí)現(xiàn)。若有點(diǎn)該函數(shù)會返回.的index索引值，即0...n-1中的一個(gè)數(shù)。若沒有點(diǎn)則會返回-1，具體代碼如下：

4.4 正常輸入

直接在num變量后面與表達(dá)式的后面加點(diǎn)即可

有小數(shù)點(diǎn)的字符串分割操作需要再進(jìn)行numbers數(shù)組與options數(shù)組的整合。如3.6，經(jīng)過‘d’分割后，numbers數(shù)組為[3,6]，options數(shù)組為[‘.’],此時(shí)需要numbers數(shù)組變?yōu)閇3.6],即修改3為3.6，刪除6；options數(shù)組的點(diǎn)這一項(xiàng)刪除。

5 運(yùn)算符的輸入

若用戶同時(shí)輸入多個(gè)運(yùn)算符，則需要將之前的運(yùn)算符刪除，并用新的運(yùn)算符代替。舉例說明，當(dāng)用戶同時(shí)輸入1+++---***///2時(shí)，屏幕上只顯示1/2，中間的運(yùn)算符全部被最后一個(gè)運(yùn)算符替換。目前的系統(tǒng)還存在一定的不足，升級方向?yàn)榭梢詫?shí)現(xiàn)負(fù)數(shù)的運(yùn)算，如3*-5。具體代碼如下：

if (c == "+" || c == '-' || c == '÷' || c == '×')

{this.setData({express: str.substr(0, str.length - 1) + op}) }

其中c為表達(dá)式的最后一個(gè)字符。str.substr為字符串的截取，str.length為求字符串的長度。op為當(dāng)前輸入的運(yùn)算符字符。

6 刪除操作

每次刪除完一個(gè)字符前，都需要判斷表達(dá)式是否為空，若為空則直接實(shí)現(xiàn)清屏結(jié)果，若不為空則計(jì)算表達(dá)式并顯示新的結(jié)果。這里主要介紹刪除后不為空的情況：

刪除最后一個(gè)字符后，若數(shù)字?jǐn)?shù)組最后一項(xiàng)為空則刪除，若輸入2+3*4會計(jì)算出正確結(jié)果，當(dāng)刪除4后，數(shù)字?jǐn)?shù)組為[‘2’，‘3’，‘’]，運(yùn)算符為[‘+’，‘×’]，根據(jù)運(yùn)算符的優(yōu)先級，先計(jì)算‘3’ב’得0，后2+0=2，“2+3*”結(jié)果并不是5,而是2，所以需要將最后一個(gè)空字符串刪除，只計(jì)算2+3即可。

if (numbers[numbers.length - 1]== '') numbers.splice(-1, 1)//刪除最后一個(gè)空字符串

經(jīng)過上述操作后，numbers數(shù)組與options數(shù)組的長度相等，只需要?jiǎng)h除options數(shù)組的最后一個(gè)數(shù)組元素即可。具體代碼如下：

if (numbers.length == options.length) options.splice(-1, 1)

經(jīng)過上述操作后，即可完成刪除操作，繼續(xù)進(jìn)行字符串表達(dá)式的運(yùn)算。由于運(yùn)算操作在用戶輸入運(yùn)算數(shù)時(shí)也會執(zhí)行，所以該項(xiàng)目中使用模塊化編程的方法，將運(yùn)算操作封裝成函數(shù)，需要使用的時(shí)候直接調(diào)用即可，減少了代碼的冗余性，增強(qiáng)了代碼可讀性，同時(shí)也便于后期的測試與維護(hù)。

7 測試與維護(hù)

為了增加計(jì)算器的正確性和強(qiáng)壯性，充分利用家人、朋友，以及微信朋友圈、抖音等通信工具廣泛征集測試結(jié)果，計(jì)算器運(yùn)行頁面如圖4所示。為了更好的觀察表達(dá)式分割后的數(shù)組內(nèi)容，再每次運(yùn)算時(shí)，都將數(shù)組內(nèi)容在控制臺輸出?？刂婆_的輸出效果如圖5所示。

圖4：計(jì)算器運(yùn)行

為了讓讀者更好的體驗(yàn)該小程序的運(yùn)行效果，同時(shí)針對小程序中存在的不足，也歡迎讀者提出您的寶貴意見。讀者可以使用微信掃一掃功能運(yùn)行計(jì)算器小程序。二維碼如圖6所示。

圖6：計(jì)算器小程序的二維碼

8 結(jié)束語

由于本學(xué)期所帶課程即為微信小程序的開發(fā)，所以講到測試章節(jié)的時(shí)候，將該項(xiàng)目與課堂內(nèi)容結(jié)合。讓學(xué)生找錯(cuò)，并將調(diào)試的內(nèi)容作為課堂內(nèi)容講解。調(diào)試的技能在編程中占了舉足輕重的作用，不會調(diào)試的程序員是不存在的，幾乎沒有哪個(gè)軟件項(xiàng)目是能一次性測試通過的。

在不斷的測試、調(diào)試的過程中，不僅讓學(xué)生掌握了測試的知識點(diǎn)，同時(shí)也完善了計(jì)算器軟件的功能。如0的處理，小數(shù)點(diǎn)的處理，刪除操作，清屏操作，數(shù)學(xué)運(yùn)算符到計(jì)算機(jī)算術(shù)運(yùn)算符的轉(zhuǎn)變等。