微信小程序计算器实现（更新中）

页面配置（index.json)

代码：

{
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "计算器",
  "navigationBarTextStyle": "black"
}

逐行分析：

第一行：navigationBarBackgroundColor设置导航栏标题的背景颜色，

第二行：navigatinBarTitleText设置导航栏标题

第三行：navigationBarTextStyle设置标题的颜色，仅黑色与白色可选。

页面配置（index.wxml)

代码：

<view class="result">
  <view class="result-num">{{num}}</view>
  <view class="result-op">{{op}}</view>
</view>
<view class="btns">
  <view>
    <view hover-class="bg" bindtap="resetBtn">C</view>
    <view hover-class="bg" bindtap="delBtn">DEL</view>
    <view hover-class="bg" bindtap="opBtn" data-val="%">%</view>
    <view hover-class="bg" bindtap="opBtn" data-val="/">÷</view>
  </view>
  <view>
    <view hover-class="bg" bindtap="numBtn" data-val="7">7</view>
    <view hover-class="bg" bindtap="numBtn" data-val="8">8</view>
    <view hover-class="bg" bindtap="numBtn" data-val="9">9</view>
    <view hover-class="bg" bindtap="opBtn" data-val="*">×</view>
  </view>
  <view>
    <view hover-class="bg" bindtap="numBtn" data-val="4">4</view>
    <view hover-class="bg" bindtap="numBtn" data-val="5">5</view>
    <view hover-class="bg" bindtap="numBtn" data-val="6">6</view>
    <view hover-class="bg" bindtap="opBtn" data-val="-">-</view>
  </view>
  <view>
    <view hover-class="bg" bindtap="numBtn" data-val="1">1</view>
    <view hover-class="bg" bindtap="numBtn" data-val="2">2</view>
    <view hover-class="bg" bindtap="numBtn" data-val="3">3</view>
    <view hover-class="bg" bindtap="opBtn" data-val="+">+</view>
  </view>
  <view>
    <view hover-class="bg" bindtap="numBtn" data-val="0">0</view>
    <view hover-class="bg" bindtap="dotBtn">.</view>
    <view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
  </view>
</view>

逐行分析：

view：容器组件。

class：组件被wxss渲染的标志物。

{{num}}：插值表达式，显示变量num的值，num定义在js文件中。

hover-class：鼠标点在组件上，组件由hover-class的类渲染（wxss）。

第一行：创建view组件，class="result"，说明在wxss中.result定义的样式可以应用于此组件上。

第二行：创建子组件，class="result-num"，说明在wxss中.result-num定义的样式可以应用于此组件上。{{num}}显示num的值。

第三行：创建子组件，class="result-op"，说明在wxss中.result-op定义的样式可以应用于此组件上。{{op}}显示op的值。

第六行：子组件view

第七行：子组件view ，hover-class="bg"：当鼠标点在view组件上，此组件由wxss中的.bg渲染。bindtap="resetBtn"：当view组件被点击时，触发resetBth事件处理函数。C:在一行上显示。

第八行：子组件view，hover-class="bg"：当鼠标点在view组件上，此组件由wxss中的.bg渲染。bindtap="delBtn"：当view组件被点击时，触发delBtn事件处理函数。DEL:在一行上显示。

渲染页面（index.wxss)

代码

page {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #555;
}

.result {
  flex: 1;
  background: #f3f6fe;
  position: relative;
}

.result-num {
  position: absolute;
  font-size: 27pt;
  bottom: 5vh;
  right: 3vw;
}

.result-op {
  font-size: 15pt;
  position: absolute;
  bottom: 1vh;
  right: 3vw;
}

.btns {
  flex: 1;
}

/* 按钮样式 */

.bg {
  background: #eee;
}

.btns {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 17pt;
  border-top: 1rpx solid #ccc;
  border-left: 1rpx solid #ccc;
}

.btns > view {
  flex: 1;
  display: flex;
}

.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;
}

.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: #fc8e00;
}

分析1：

page {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #555;
}

page下

flex：弹性盒（Flexbox）容器

flex-direction:元素排列原则，按列或按行。

height：页面高度

color：页面字体颜色

page: 设置使用页面。display：flex，页面为弹性布局。flex-direction：column，页面中的元素按列放置。height：100%，页面占屏幕的全部。color：#555，页面中字体的颜色为深灰色。

分析2

.result与.btns：都设计了flex：1；这使得它们平分页面的空间。

.result {
  flex: 1;
  background: #f3f6fe;
  position: relative;
}

background：元素背景颜色

position：定位方式

.result：flex：1；占用页面剩余的100%。bakcgroud：#f3f6fe；背景颜色为#f3f6fe。position：relative；相对定位，可偏移。

分析4

.result-num {
  position: absolute;
  font-size: 27pt;
  bottom: 5vh;
  right: 3vw;
}

position：absolute class=result-num的视图位置是绝对的

font-size：27pt 字体大小

bottom：5vh 距离底部是整个容器的百分之五

right：3vw 显示的字与容器右边的距离是宽度的百分之3

分析四：

.bg {
  background: #eee;
}

background：#eee 设置class=’bg‘的视图背景颜色为#eee

分析五：

.btns {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 17pt;
  border-top: 1rpx solid #ccc;
  border-left: 1rpx solid #ccc;
}

flex：1；class=btns的容器将占满剩余空间。

display：flex；设置flex布局。

flex-direction：column；子元素垂直排列。

border-top：1rpx solid  #ccc；

border-left：1rpx solid  #ccc；设置1rpx的实线边框，#ccc为颜色。

分析六

.btns > view {
  flex: 1;
  display: flex;
}

.btns > view ：btn下的第一类子元素

flex: 1; 子元素平分btns的空间

display: flex; 子元素进行flex布局

.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;
}

.btns > view > view ：定义btn类下的view下的view的样式

flex-basis: 25%; 每个孙子元素占父元素的25%

border-right: 1rpx solid #ccc;

border-bottom: 1rpx solid #ccc;每个孙子子元素有#ccc颜色的1rpx宽的实线边框

box-sizing: border-box; 元素的宽度和高度将包括内容、内边距和边框

display: flex;

align-items: center; 垂直居中

justify-content: center;水平居中

分析7：

.btns > view:last-child > view:first-child {
  flex-basis: 50%;
}

.btns > view:last-child > view:first-child  btn下子元素的最后一个中的第一个孙元素。

flex-basis: 50%; 占据父元素的50%。

分析8:

.btns > view:first-child > view:first-child {
  color: #f00;
}

.btns > view > view:last-child {
  color: #fc8e00;
}

.btns > view:first-child > view:first-child  btns下的第一个子元素下的第一个孙元素

color: #f00;颜色控制

.btns > view > view:last-child btns所有子元素下的最后一个孙元素

逻辑实现

Page({
  data: {
    num: '0',
    op: '',
    result: null,
    isClear: false,
  },

页面初始化，num为字符0，op为空字符

numBtn: function(e) {
    var num = e.target.dataset.val
    if (this.data.num === '0' || this.isClear) {
      this.setData({
        num: num
      })
      this.isClear = false
    } else {
      this.setData({
        num: this.data.num + num
      })
    }
  },

自定义点击函数函数numBtn

e.target.datasetl.val获取自定义data-val的值。

this.data.num === '0' || this.isClear：｜｜是或者，两者其一成立即可，this.data.num=0 or this.Clear=True。

this.setData：重新赋值并重新渲染视图层。

num: this.data.num + num：字符串拼接

opBtn: function(e) {
    var op = this.data.op
    var num = Number(this.data.num)
    this.setData({
      op: e.target.dataset.val
    })
    if (this.isClear) {
      return
    }
    this.isClear = true
    if (this.result === null) {
      this.result = num
      return
    }
    if (op === '+') {
      this.result = calc.add(this.result, num)
    } else if (op === '-') {
      this.result = calc.sub(this.result, num)
    } else if (op === '*') {
      this.result = calc.mul(this.result, num)
    } else if (op === '/') {
      this.result = calc.div(this.result, num)
    } else if (op === '%') {
      this.result = this.result % num
    }
    this.setData({
      num: this.result + ''
    })
  },

var op = this.data.op：起初页面原始op值

var num=Number(this.data.val)：起初页面原始this.data.val的值的数字化

this.setData({op: e.target.dataset.val})：将获取的val的值赋给op

if (this.isClear) {return}：如果页面的中的isClear为True，停止执行函数。