计算器小程序技术要求C语言,微信小程序--简单计算器（界面实现）

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

好！

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

计算器本器.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：虽然我的水平不是很高，但是希望也能帮助到你= =。我希望能坚持在简书记录我的成长，一起加油吧！