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

一、运行效果

二、知识储备

（一）data-*自定义属性

（二）模块

三、实现步骤

（一）准备工作

（二）实现页面结构

• pages/index/index.wxml文件

1、编写页面的整体结构

2 、编写结果区域的结构

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

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

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

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

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

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

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

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

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

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

• 第五行包含三个按钮：0按钮、点按钮、等号按钮
  
• 第58行设置了data-val 自定义属性，用于区分不同按钮

（三）实现页面样式

• pages/index/index.wxml文件

1、页面样式

• 设置pges样式
  

2、编写结果区域样式

• 结果区域有三个样式类：resulit,result-sub和result-
  

• 修改页面结构，暂时查看预览效果
  

• 查看预览效果之后，将页面改回来
  

3、编写按钮区域样式

（1）按钮区域总体样式

• btns样式
  
• 查看预览效果
  

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

• btns > view 样式类
  

• 查看预览效果
  

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

• 预览效果
  

（5）让0按钮跨2列

• • btns>view:last-child>view:first-child样式类
    
    

（6）清除按钮样式

• .btns > view:first-child > view:first-child样式类
  
• 预览效果
  

（7）最后一列按钮样式

• .btns >view > view:last-child样式类
  
• 预览效果
  

（四） 创建工具模块

• 创建utils目录
  

1、数学模块 - math.js

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

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