起因
那天兰姐突然就说，前端面试搞什么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标签，没办法用类似这种的字符编码来实现一个icon，说了这么多废话，到底怎么解决呢？
解决方法：
1、还是在淘宝的iconfont上选择自己想要的icon图标，与往常一样，选择好之后，下载到本地。找到.ttf结尾的字体文件。没有显示隐藏文件名称的如下图：
ttf文件
2、这时候用到 https://transfonter.org/ 这个网站将我们的字体文件转换成base64格式的编码。如下图：
网站截图
3、将转换好编码的文件下载下来。找到stylesheet.css文件。将形如下图的代码片段拷贝下来
stylesheet
4、将上面代码放到你要用的.wxss。不过我还是建议放在一个公共区域，比如app.wxss里面或者一个其他的.wxss里面，在用到的时候@import进去。
5、最重要的一步啊。这时候很多小伙伴估计还是懵逼的。要怎么用这些图标呢。我们知道每个图标都有自己的形如  的字符表示。那么我们就可以在.wxml中用一个text标签并对其用css修饰后就可以有相应的图标了。如下所示：
//html部分，iconfont类必须要，后面的icon-c是我自定义的
<text class="iconfont icon-c"></text>
//css部分。假设我们现在就要用  这个图标，那么就在其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地址 觉得不错的可以点个星星给我好吗。
网友评论