计算器的大致效果如下（图27-1）：
图27-1实际演示：
上面是显示区，下面是5行按钮。先写好1行，以下复制粘贴，把内容修改一下即可。
app.json中创建新页面“cal”（图27-2）。
图27-2在“cal.wxml”中写入如下代码（图27-3）。
图27-3初步效果如下（图27-4）。
图27-4进一步修饰一下它的样式。让4个按钮横向排列，屏幕规定是rpx，/4=.5rpx，可逐渐调试。在“cal.wxss”中写入代码（图27-5）。
图27-5修饰效果如下（图27-6）。
图27-6其它按钮在“cal.wxml”中复制粘贴，稍作改动（图27-7）。
图27-7效果如下（图27-8）。
图27-8这时第5行按钮，只有3个，想让“0”按钮占两个格，上面一个按钮宽度约为.5rpx，占两个格则约为.5*2=rpx，再逐渐调整至合适为止即可（图27-9，图27-10）。
图27-9图27-10调整后效果如下（图27-11）。
图27-11