今天我们用微信小程序来写一个计算器的案例
页面布局
首先我们需要对页面进行一个简单的规划,计算器一般在页面中都分为两部分,一部分是上面的结果显示区,另一部分就是下面的数字按钮及其运算符按钮,整体页面布局如图所示
下面我们就来进行代码的实现
首先我们在index.json文件中给页面设置样式,如图
然后我们就开始在index.wxml中进行主页面的布局设计
上面结果展示区我们分别需要用两个位置来显示数字和运算符
下面计算按钮区我们则需要四行来显示我们的数字键和运算符
代码如下
每个按钮分别绑定上不同的事件,接下来我们开始在index.wxss中对页面的样式进行美化。
如图
对页面布局样式完成后,其页面如下
功能实现
接下来就是功能的实现,在index.js中完成各事件处理函数
其具体代码如下
这样,我们的计算器小案列就算完成了
但是值得注意的是,原生的js带有bug,当我们在进行浮点数的运算时,运算结果会出现错误,如果需要解决这个问题,可以在网上找一些精确计算的方法放到我们的事件处理函数中,此类问题就可以解决