微信小程序案例3-2：计算器

一、运行效果

• 录屏演示多次计算
  

二、知识储备

（一）data-*自定义属性

（二）模块

三、实现步骤

（一）准备工作

1、创建项目

• 创建微信小程序项目 - 计算器
  
• 单击【确定】按钮
  
• 按照惯例，做一些初始化工作
  

2、设置导航栏

• 在app.json设置window配置项
  

（二）实现页面结构

• pages/index/index.wxml文件

1、编写页面整体结构

2、编写结果区域结构

• 两行内容：第一行是当前的计算式，第二行是当前计算结果
  

3、编写按钮区域第一行按钮的结构

• 第一行包含四个按钮：清楚按钮、删除按钮、正负号切换按钮、除号按钮
  
• 第20行代码设置了data-val自定义属性，用于区分不同按钮

4、编写按钮区域第二行按钮的结构

• 第二行包含四个按钮：7按钮、8按钮、9按钮、乘号按钮
  
• 四个按钮都设置了data-val自定义属性，用于区分不同按钮

5、编写按钮区域第三行按钮的结构

• 第三行包含四个按钮：4按钮、5按钮、6按钮、减号按钮
  
• 四个按钮都设置了data-val自定义属性，用于区分不同按钮

6、编写按钮区域第四行按钮的结构

• 第四行包含四个按钮：1按钮、2按钮、3按钮、加号按钮
  
• 四个按钮都设置了data-val自定义属性，用于区分不同按钮

7、编写按钮区域第五行按钮的结构

• 第五行包含四个按钮：0按钮、点按钮、3按钮、加号按钮
  
• 第68行设置了data-val自定义属性，用于区分不同按钮
• 查看预览效果
  

（三）实现页面样式

• pages/index/index/wxss文件

1、编写页面样式

• 设置page样式
  

2、编写结果区域样式

• 结果区域有三个样式类：result、result-sub和result-sum
  
• 修改页面结构，暂时查看预览效果
  
• 查看预览效果之后，将页面结构改回去

3、编写按钮区域样式

（1）按钮区域总体样式

• .btns样式类
  
• 查看预览效果
  

（2）按钮区域中每一行的样式

• .btns > view样式类
  
• 查看预览效果
  

（4）按钮区域每一行中每个按钮的样式

• .btns > view > view样式类
  
• 查看预览效果
  

（5）让0按钮垮2列

• .btns > view:first-child > view:first-child选择器
  
• 查看预览效果
  

（6）清除按钮样式

• .btns > view:first-child > view:first-child选择器
  
• 查看预览效果
  

（7）最后一列按钮样式

• .btns > view > view:last-child选择器
  
• 查看预览效果
  

（8）按钮的盘旋样式类

• .bg选择器
  
• 查看预览效果
  

4、页面样式源码

/**index.wxss**/
page {
   
  height: 100vh;
  display: flex;
  flex-direction: column;
  color: #555;
}

/* 结果区域样式 */
.result {
   
  flex: 1; /*平均分布手机屏幕,因为flex-direction: column*/
  background: #f3f3f3;
  position: relative;
}

/* 当前计算式样式 */
.result-sub {
   
  font-size: 52rpx;
  position: absolute;
  bottom: 16vh;
  right: 3vw;
}

/* 当前计算结果样式 */
.result-num {
   
  font-size: 100rpx;
  position: absolute;
  bottom: 3vh;
  right: 3vw;
}

/* 按钮区域样式 */
 .btns {
   
   display: flex;
   flex: 1;
    flex-direction: column;
    font-size: 38rpx;
    border-top: 1rpx solid #ccc;
    border-left: 1rpx solid #ccc;
 }

/* 按钮区域中每一行的样式 */
.btns>view {
   
  display: flex;
  flex: 1;
}

/* 按钮区域每一行中每个按钮的样式 */
.btns > view > view {
   
  flex-basis: 25%; /* 四个按钮均分一行的空间 */
  border-right: 1rpx solid #ccc; /* 右边框线 */
  border-bottom: 1rpx solid #ccc; /* 底边框线 */
  box-sizing: border-box; /* 用于控制盒模型的尺寸计算方式 */
  display: flex; /*弹性布局*/
  align-items: center; /* 交叉轴居中 - 垂直居中 */
  justify-content: center; /* 主轴居中 - 水平居中 */
}

/* 0按钮跨2列, .btns view:last-child view:nth-child(1) */
.btns view:last-child view:first-child {
    
  flex-basis: 50%;
}

/* 清除按钮样式 */
.btns > view:first-child > view:first-child {
   
  color: #f00;
}

/* 最后一列按钮样式 */
.btns > view > view:last-child {
   
  color: orange;
}

/* 按钮的盘旋样式类 */
.bg {
   
  background: #eee;
}

（四）创建工具模块

• 在项目根目录创建utils目录
  

1、数字模块 - math.js

• 在utils目录里创建math.js文件
  

// 精准计算功能，用于解决JavaScript浮点数运算精度不准确的问题
module.exports = {
   
    // 加法
    add: function(arg1, arg2) {
   
      var r1, r2, m
      try {
   
        r1