微信小程序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按钮、点按钮、等号按钮、
  - 第58行代码设置了data-val自定义属性，用于区分不同按钮
• 此时查看预览效果
  

8、查看野蛮结构源码

<!--index.wxml-->
<!-- 结果区域 -->
<view class="result">
  <!-- 当前计算式 -->
  <view class="result-sub">{
  {sub}}</view>
  <!-- 当前计算结果 -->
  <view class="resut-num">{
  {num}}</view>
</view>
<!-- 按钮区域 -->
<view class="btns">
  <!-- 第一行按钮 -->
  <view>
  <!-- 清除按钮 -->
    <view hover-class="bg" hover-start-time="50" bind:tap="btnReset">C</view>
    <!-- 删除按钮 -->
    <view hover-class="bg" hover-start-time="50" bind:tap="btnDel">DEL</view>
    <!-- 正负号切换按钮 -->
    <view hover-class="bg" hover-start-time="50" bind:tap="btnPosNeg">+/-</view>
    <!-- 除号按钮 (+:Positive,-:Negtive)-->
    <view hover-class="bg" hover-start-time="50" bind:tap="btnOperate" data-val="÷">÷</view>
  </view>
  <!-- 第二行按钮 -->
  <view>
    <!-- 7按钮 -->
    <view hover-class="bg" hover-start-time="50" bind:tap="btnNum" data-val="7"></view>
    <!-- 8按钮 -->
    <view hover-class="bg" hover-start-time="50" bind:tap="btnNum" data-val="8">8</view>
    <!-- 9按钮 -->
    <view hover-class="bg" hover-start-time="50" bind:tap="btnNum" data-val="9">9