微信小程序--简单计算器（界面实现）

最近在学习小程序，于是想多拿点项目练练手，同时在上记录自己的学习经历……

好！

首先看下面，一个计算器的界面，也就是我们本次要实现的最终目标！

计算器本器.png

在lu代码之前，我们先来看一下界面大概的组件布局：

（不愧是入门级的计算器项目，真的是特别简单的只有view组件的布局!）

首先当然是一个最大的container包裹，然后界面分为上下两部分，分别是显示部分screen和按钮群btns。按钮群中因为要考虑 “=” 等于号的跨行，于是我将btns设置为水平方向的弹性布局。代码如下：

  
  
    100+23
    123
  
  

  
 
    
      AC
      7
      4
      1
      .
    

    
      %
      8
      5
      2
      0
    

    
      ÷
      9
      6
      3
      DEL
    

    
      ×
      -
      +
      =
    
  

当然啦~现在的界面就是一个字 “很丑”= =
hhhhhhh

没有css美化的界面.png

但是没关系啊，我们来一步步给组件添加样式进行布局和美化：

.container{
  width: 100%;
  height:100%;
  /*垂直的弹性布局*/
  display: flex;
  flex-direction: column;

  align-items: center;
  box-sizing: border-box;
  background:white;
  background-repeat: repeat;
  padding: 30rpx;
}
/*显示屏的样式*/
.screen{
  width:680rpx;
  height:480rpx;
  line-height: 145rpx;
  padding-right: 30rpx;
  margin-bottom: 30rpx;
  background-color: #fbc32e;
  border-radius: 3px;
  text-align: right;
}
/*显示屏里的第一部分，计划用来放计算的式子*/
.cal-view{
   height:140rpx;
   color:grey;
   /*border:1px white solid;*/
   margin-top:60px;
}
/*显示屏的第二部分，用来放输入的按键*/
.result-view{
    font-size:50px;
    color:white;
}
/*下面的按钮用一个btns的view包裹，设置成水平方向的弹性布局，
*将按钮分成四列，也就是四个btnGroup
*/
.btns{
  display: flex;
  flex-direction: row;
}
/*每一列按钮又重新布局*/
.btnGroup{
  display:flex;
  flex-direction: column;
}
/*按钮的样式*/
.btnItem{
  width:160rpx;
  height:100rpx;
  margin:10rpx;
  border-radius:5px;
  text-align: center;
  line-height: 100rpx;
}
.btnColor{
  color:#838383;
  border:solid 1px #dbdbdb;
  background:#efefef;
}
/*等于号和清屏按钮的特殊样式*/
.equal{
  line-height: 230rpx;
  height:225rpx;
}
.acbtn,.equal{
  color:#fbc32e;
}

把这些写完，开头的计算器界面就实现啦！

PS：虽然我的水平不是很高，但是希望也能帮助到你= =。我希望能坚持在记录我的成长，一起加油吧！