基于微信小程序的表达式计算器的设计与实现

赵素萍

（晋中信息学院 山西省晋中市 030800）

本项目将字符串分割为数和运算符两个数组，从运算符的第一个数组元素开始，先进行乘除的运算，即从左到右，将所有的乘除运算计算完，再进行第二次循环，计算所有的加减。本文从此观点出发，设计并实现了计算器的表达式求值。不使用栈而是直接将对字符串进行操作，可实现表达式的实时计算。通过实验发现，该方法能大大提高计算的执行效率。

1 页面布局

本项目采用的是flex布局。Flex（Flexible Box）为”弹性布局”，用来为盒状模型内容的容器成员项提供最大的灵活性。具体使用方法为将容器的显示方式设置为flex，为容器成员分配其占比即可。

页面样式中较难的为flex布局，但只要掌握了基础知识，即找到对应的容器和项目，并为容器设置显示方式和显示方向；为项目设置各自的所占比例即可，写代码就会变的很容易。为了更好的理解代码，程序员必须充分了解并熟练掌握调试器的使用，最终运行时调试器中显示的wxml结构如图1所示。

根据图1可以看出，小程序进行渲染时，结构文件中的所有内容都会被包含到这样一对组件中，所有在该项目中，可以将page视为容器，显示屏与按钮为其成员，可灵活分配占比，本项目中采用的2:3。Page的样式设置为flex布局方式，flex方向设置为纵向布局；容器成员设置为1:1即可。参考代码如下：

图1：计算器结构

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

.num{flex：2}

.btns{flex：3}

显示区域不需要采用flex布局，只需要采用绝对定位方式将其放置到合理的位置即可。即表达式和结果的样式设置为“display：absolute；……