只显示小方格_微信小程序入门（三）简易计算器页面制作实操（wxml和wxss）

上一篇文章中，我们已经新建了一个页面，并且可以将我们需要的元素组件显示出来。现在我们就一起来做一个简易的计算器，实操是最容易学会的一种手段了。

本文中仅完成计算器的页面布局，具体的逻辑功能之后再继续。

知道了自己想做什么，就要开始分析如何操作，需要哪些元素组件。

这是win10自带的计算器工具

我们今天就来做一个和win10系统自带计算器一样的小程序。

计算器主要分为2大块，一是上方的显示区，一是下面的按钮区。

显示区：

{{result}}，首先我们用view组件把显示区框起来，这里要特别注意，wxml是静态显示的，所以我们如果想显示js逻辑运算中的数据，用的就是双花括号。打开test.js,这里有个data对象(data:{})，页面中的data就是存放数据的地方，我们先在里面加一个result绑定的数据：

data: {

result:0

},

然后编译(Ctrl+B)一下，就能在左侧模拟器中看到左上角出现一个数字0.

现在，要像图中一样，让他靠右显示要怎么操作呢？这就涉及到wxss控制wxml中的格式了。

首先，在{{result}}中加入一个class类，这边的名字都是可以自己改的，英文弱点的，用拼音也行，甚至任何一串字符都行。当然，别用汉字，也别用毫无意义的字符串，毕竟代码是要看的要维护的，写完放一段时间自己都看不懂，那就搞笑了。

然后，去test.wxss中设置result的格式：

.result{

text-align:right;

width: 750rpx;

height:100rpx;

font-size: 50rpx;

font-weight: bold;

padding: 20rpx;

}

text-align是规定元素的内容的位置

width是整个元素的宽度，height是整个元素的高度。注意：rpx是小程序里的一个单位，1px=2rpx，简单总结来说，px是固定的，rpx会根据机型尺寸来变化。所以一般选哪个？你懂的

font：是字体的一些属性，font-size字体大小，font-weight字体粗细

padding：就是内边距，就是说控制上下左右的边距，让界面感觉没有那么拥挤。

编译一下就能看到效果

点击调试器上的wxml，选择刚刚的带有result属性的view，在右边就能看到我们赋予的属性，大家可以取消某些属性看看效果(本操作不影响代码)

按钮区：

按钮区就相对复杂一些，有20个方格，视图代码复杂些，逻辑就会简单些，代码简单些，逻辑部分就会变复杂，这个可以之后再优化。这些按钮可以用button也可以直接用view，其实严格说起来button就是一个特殊的view。

.buttons {

display: flex;

flex-wrap: wrap;

}

这是按钮区的buttons类，主要作用呢就是把各个按钮横向排序，一般每一个view是会占用一行的，如果想将它横向排序，那就要加上display: flex;加完这个就会完全横向排序，如果想要换行，就需要加上flex-wrap: wrap;它的作用是当前行满了，自动换行。所以要用这个来排序，那就需要计算好尺寸(我是按照iphone6的像素比来做的，因为他刚好满足1px=2rpx，计算比较方便)

.item {

width: 175rpx;

height: 120rpx;

margin: 6.25rpx;

background: rgb(240, 239, 239);

display: flex;

align-items: center;

justify-content: center;

font-size: 40rpx;

}

这是每一个小按钮的格式，margin是外边框，和padding刚好一个内一个外，他们的区别其实也很简单，只需要给view加一个背景色就很容易理解它们的区别了

.item:active{

background: rgb(216, 216, 216);

}

这个是wxml没有体现的，它的作用是点击按钮时的操作，这边是把背景色 rgb(240, 239, 239);变成rgb(216, 216, 216);

.color1{

font-size: 35rpx;

font-weight: bold;

background: rgb(255, 255, 255);

}

.color2{

background: rgb(110, 191, 238);

}

我们可以看到，数字部分的class='item color1'，这里相当于给这个class2个格式，相同部分的话，后面一个格式会覆盖前一个格式。

到这边，我们基本就完成了页面的一个简单规划布局，稍作一下总结：

这里我们用到了class类，通过在wxss里定义不同的格式，赋到wxml中的元素上，从而得到我们想要的页面效果(这部分属于前端开发，一般我们需要显示的东西，都是通过这种方法实现的)

其次，我们用到了数据的绑定(双花括号，当然，代码部分全都要用英文字符下的符号才不会报错)，通过这种方法可以把js逻辑中的数据显示在wxml上。

下一篇，我们将一起来完成计算器的逻辑代码~~~文中有什么错误的地方，欢迎大家指出来哦！让我们一起进步！