起因

那天兰姐突然就说，前端面试搞什么CSS3特效那种很炫的其实面试官是不在意的。倒不如用JS实现一个简单的计算器来的实在。所以，我就突然来了兴致，用小程序做个计算器来试试水？

经过

2017.8.25日下午五点开始：

1、界面设计

界面图1

整体使用flex布局。界面分成两部分，上面是数据展示区域，下面是数据操作区域。

如上图所示：初始界面要有一个0的展示，下面分成title（用来折叠下面操作区域）和operate（用来进行数据计算）两个部分。operate又分为num（数字，删除，归零，负值）和symbol（ 加减乘除等。红色区域）两个部分。

1、title部分：采用flex布局，中间的三条横线是用固定宽度的三个view设置border-top实现。由于是flex布局所以整体垂直水平居中（用justify-content: space-around;align-items: center;实现）。
2、operate部分：采用flex布局，左三右一（num的flex:3;symbol的flex:1）。
3、num与symbol：采用flex布局，分成五部分。设置flex-description: column;以及子元素flex:1使其垂直五等分。

2、icon引入

在小程序中引入iconfont可真是不容易。不同于h5页面，小程序中没有对应的i标签，没办法用&#xe61c类似这种的字符编码来实现一个icon，说了这么多废话，到底怎么解决呢？

解决方法：

1、还是在淘宝的iconfont上选择自己想要的icon图标，与往常一样，选择好之后，下载到本地。找到.ttf结尾的字体文件。没有显示隐藏文件名称的如下图：

ttf文件

2、这时候用到 https://transfonter.org/ 这个网站将我们的字体文件转换成base64格式的编码。如下图：

网站截图

3、将转换好编码的文件下载下来。找到stylesheet.css文件。将形如下图的代码片段拷贝下来

stylesheet

4、将上面代码放到你要用的.wxss。不过我还是建议放在一个公共区域，比如app.wxss里面或者一个其他的.wxss里面，在用到的时候@import进去。
5、最重要的一步啊。这时候很多小伙伴估计还是懵逼的。要怎么用这些图标呢。我们知道每个图标都有自己的形如 &#xe61c 的字符表示。那么我们就可以在.wxml中用一个text标签并对其用css修饰后就可以有相应的图标了。如下所示：

    //html部分，iconfont类必须要，后面的icon-c是我自定义的         
    <text class="iconfont icon-c"></text>
    //css部分。假设我们现在就要用 &#xe61c 这个图标，那么就在其content处设为 \e61c
    .icon-c:after {
     font-family: "iconfont";
    content: '\e61c';
    font-size: 80rpx;
    color:#ffffff;
  }

好的，现在你就会发现，你的图标已经出现了，接下来把对应的图标填充到对应的格子处即可，如下图所示：。我想这部分应该对要用到iconfont字体库小程序开发者有一些作用。欢迎补充。关于脚本实现计算的，下周继续开发。

第一次选出的字体

这是第一次选出的图标，参差不齐。有没有前辈告诉我怎么选出很统一的图标。

第二次选出的字体

相比于第一次已经有了很大进步。但是这个C仍有问题，后续我会继续优化。

8.26~8.27 休息中。。。。

3、界面一些效果设计与实现：

2017年8月28日晚上重新开始：

点击背景色修改效果

在写之前，请允许我好好吐槽一下小程序。你为什么没有DOM操作，你为什么与这么多东西格格不入。可是，还是要坚持写完这个小程序。
首先是界面每个区块点击的变色效果，没有DOM操作好难受啊：

区块点击变色效果

小程序如何来控制某个区块改变其CSS呢？我们就以这个8为例：

首先，我们在8这个区块上动态地定义一个这个区块自己的eightColor字段，wxtm代码如下所示：

    <!--  wxtm代码部分-->  
    <view class="num-item" bindtap="eight" style="background: {{eightColor}}">
        <text class="iconfont icon-eight"></text>
    </view>

然后，在js文件中的data中定义eightColor属性，如下所示：

    data: {
        //.....其他属性
        eightColor: '#454545',
        //......其他属性
    }

这里我们就可以固定显示8这一区块的背景色。接着通过8这个区块绑定的eight事件，动态地改变eightColor的值，即可达到改变区块背景颜色的效果，代码如下所示：

eight: function () {
  var that = this;
    that.setData({
    eightColor: '#383838',
  });
}

至于点击后恢复原色的与改变颜色的思路差不多。可以设置一个定时器，点击后xxx ms后将eightColor值恢复即可。

数值的显示

接下来，最重要的一个界面部分就是数值在上方界面上的一个显示了。我这里的思路很简单：

1、展示区域由正在输入的数字和已经输入过的部分构成 show = currentNum + lastShow

2、当输入数字时，动态改变currentNum即可。比如输入了5，那么 currentNum = currentNum + "5"
currentNum 初始值为""。一个空字符串。

3、当输入操作符时，比如 + ，那么currentNum直接加入到lastShow中， lastShow = lastShow + currentNum即可。同时currentNum置空。如果再输入操作符时，不做显示。

接下来是整个小程序的JavaScript部分，很多功能的实现的思路和代码图。

github地址 觉得不错的可以点个星星给我好吗。