用微信小程序开发一个计算器

今天我们用微信小程序来写一个计算器的案例

页面布局

首先我们需要对页面进行一个简单的规划，计算器一般在页面中都分为两部分，一部分是上面的结果显示区，另一部分就是下面的数字按钮及其运算符按钮，整体页面布局如图所示

下面我们就来进行代码的实现
首先我们在index.json文件中给页面设置样式，如图

然后我们就开始在index.wxml中进行主页面的布局设计
上面结果展示区我们分别需要用两个位置来显示数字和运算符
下面计算按钮区我们则需要四行来显示我们的数字键和运算符
代码如下

每个按钮分别绑定上不同的事件，接下来我们开始在index.wxss中对页面的样式进行美化。
如图

对页面布局样式完成后，其页面如下

功能实现

接下来就是功能的实现，在index.js中完成各事件处理函数

其具体代码如下

这样，我们的计算器小案列就算完成了

但是值得注意的是，原生的js带有bug，当我们在进行浮点数的运算时，运算结果会出现错误，如果需要解决这个问题，可以在网上找一些精确计算的方法放到我们的事件处理函数中，此类问题就可以解决