微信小程序简易计算器

使用微信开发者工具开发微信小程序简易计算器

一、界面布局

二、布局代码 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">AC</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="*">x</view>
</view>
<view>
<view hover-class="bg" bi ndtap="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>
<view>
<view hover-class="bg" bindtap="opBtn" data-val="%">%</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>

二、渲染代码 index.wxss

page{
  display: flex;
  flex-direction: column;
  height: 100%
}
.result{
  flex: 1;
  background: #f3f6fe;
}
.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: 25%;
}
 .btns > view:first-child > view:first-child{
 color:#f00;
 }

 .btns > view > view:last-child {
color: #020202;
 }
 .result{
   flex: 1;
   background: #f3f6fe;
   position: relative;
 }
 .result-num {
   positi