起因
那天蘭姐突然就說昼弟，前端面試搞什么CSS3特效那種很炫的其實(shí)面試官是不在意的。倒不如用JS實(shí)現(xiàn)一個(gè)簡單的計(jì)算器來的實(shí)在奕筐。所以舱痘，我就突然來了興致，用小程序做個(gè)計(jì)算器來試試水离赫？
經(jīng)過
2017.8.25日下午五點(diǎn)開始：
1芭逝、界面設(shè)計(jì)
整體使用flex布局。界面分成兩部分渊胸，上面是數(shù)據(jù)展示區(qū)域旬盯，下面是數(shù)據(jù)操作區(qū)域。
如上圖所示：初始界面要有一個(gè)0的展示，下面分成title（用來折疊下面操作區(qū)域）和operate（用來進(jìn)行數(shù)據(jù)計(jì)算）兩個(gè)部分瓢捉。operate又分為num（數(shù)字频丘，刪除，歸零泡态，負(fù)值）和symbol（ 加減乘除等。紅色區(qū)域）兩個(gè)部分迂卢。
1某弦、title部分：采用flex布局，中間的三條橫線是用固定寬度的三個(gè)view設(shè)置border-top實(shí)現(xiàn)而克。由于是flex布局所以整體垂直水平居中（用justify-content: space-around;align-items: center;實(shí)現(xiàn)）靶壮。
2、operate部分：采用flex布局员萍，左三右一（num的flex:3;symbol的flex:1）腾降。
3、num與symbol：采用flex布局碎绎，分成五部分螃壤。設(shè)置flex-description: column;以及子元素flex:1使其垂直五等分。
2筋帖、icon引入
在小程序中引入iconfont可真是不容易奸晴。不同于h5頁面，小程序中沒有對(duì)應(yīng)的i標(biāo)簽日麸，沒辦法用類似這種的字符編碼來實(shí)現(xiàn)一個(gè)icon寄啼，說了這么多廢話，到底怎么解決呢代箭？
解決方法：
1墩划、還是在淘寶的iconfont上選擇自己想要的icon圖標(biāo)，與往常一樣嗡综，選擇好之后乙帮，下載到本地。找到.ttf結(jié)尾的字體文件蛤高。沒有顯示隱藏文件名稱的如下圖：
2蚣旱、這時(shí)候用到 https://transfonter.org/ 這個(gè)網(wǎng)站將我們的字體文件轉(zhuǎn)換成base64格式的編碼。如下圖：
3戴陡、將轉(zhuǎn)換好編碼的文件下載下來塞绿。找到stylesheet.css文件。將形如下圖的代碼片段拷貝下來
4恤批、將上面代碼放到你要用的.wxss异吻。不過我還是建議放在一個(gè)公共區(qū)域，比如app.wxss里面或者一個(gè)其他的.wxss里面，在用到的時(shí)候@import進(jìn)去诀浪。
5棋返、最重要的一步啊。這時(shí)候很多小伙伴估計(jì)還是懵逼的雷猪。要怎么用這些圖標(biāo)呢睛竣。我們知道每個(gè)圖標(biāo)都有自己的形如  的字符表示。那么我們就可以在.wxml中用一個(gè)text標(biāo)簽并對(duì)其用css修飾后就可以有相應(yīng)的圖標(biāo)了求摇。如下所示：
//html部分射沟，iconfont類必須要，后面的icon-c是我自定義的
<text class="iconfont icon-c"></text>
//css部分与境。假設(shè)我們現(xiàn)在就要用  這個(gè)圖標(biāo)验夯，那么就在其content處設(shè)為 \e61c
.icon-c:after {
font-family: "iconfont";
content: '\e61c';
font-size: 80rpx;
color:#ffffff;
}
好的，現(xiàn)在你就會(huì)發(fā)現(xiàn)摔刁，你的圖標(biāo)已經(jīng)出現(xiàn)了破衔，接下來把對(duì)應(yīng)的圖標(biāo)填充到對(duì)應(yīng)的格子處即可魔招，如下圖所示：。我想這部分應(yīng)該對(duì)要用到iconfont字體庫小程序開發(fā)者有一些作用。歡迎補(bǔ)充父泳。關(guān)于腳本實(shí)現(xiàn)計(jì)算的典尾，下周繼續(xù)開發(fā)脚作。
這是第一次選出的圖標(biāo)放椰，參差不齊。有沒有前輩告訴我怎么選出很統(tǒng)一的圖標(biāo)寺擂。
相比于第一次已經(jīng)有了很大進(jìn)步暇务。但是這個(gè)C仍有問題，后續(xù)我會(huì)繼續(xù)優(yōu)化怔软。
8.26~8.27 休息中垦细。。挡逼。括改。
3、界面一些效果設(shè)計(jì)與實(shí)現(xiàn)：
2017年8月28日晚上重新開始：
點(diǎn)擊背景色修改效果
在寫之前家坎，請(qǐng)?jiān)试S我好好吐槽一下小程序嘱能。你為什么沒有DOM操作，你為什么與這么多東西格格不入虱疏∪锹睿可是，還是要堅(jiān)持寫完這個(gè)小程序做瞪。
首先是界面每個(gè)區(qū)塊點(diǎn)擊的變色效果对粪，沒有DOM操作好難受坝叶场：
小程序如何來控制某個(gè)區(qū)塊改變其CSS呢？我們就以這個(gè)8為例：
首先著拭，我們?cè)?這個(gè)區(qū)塊上動(dòng)態(tài)地定義一個(gè)這個(gè)區(qū)塊自己的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這一區(qū)塊的背景色乳蛾。接著通過8這個(gè)區(qū)塊綁定的eight事件，動(dòng)態(tài)地改變eightColor的值鄙币，即可達(dá)到改變區(qū)塊背景顏色的效果屡久，代碼如下所示：
eight: function () {
var that = this;
that.setData({
eightColor: '#383838',
});
}
至于點(diǎn)擊后恢復(fù)原色的與改變顏色的思路差不多“疲可以設(shè)置一個(gè)定時(shí)器，點(diǎn)擊后xxx ms后將eightColor值恢復(fù)即可糙及。
數(shù)值的顯示
接下來详幽，最重要的一個(gè)界面部分就是數(shù)值在上方界面上的一個(gè)顯示了。我這里的思路很簡單：
1浸锨、展示區(qū)域由正在輸入的數(shù)字和已經(jīng)輸入過的部分構(gòu)成 show = currentNum + lastShow
2唇聘、當(dāng)輸入數(shù)字時(shí)，動(dòng)態(tài)改變currentNum即可柱搜。比如輸入了5迟郎，那么 currentNum = currentNum + "5"
currentNum 初始值為""。一個(gè)空字符串聪蘸。
3宪肖、當(dāng)輸入操作符時(shí)，比如 + 健爬，那么currentNum直接加入到lastShow中控乾， lastShow = lastShow + currentNum即可。同時(shí)currentNum置空娜遵。如果再輸入操作符時(shí)蜕衡，不做顯示。
接下來是整個(gè)小程序的JavaScript部分设拟，很多功能的實(shí)現(xiàn)的思路和代碼圖慨仿。
github地址 覺得不錯(cuò)的可以點(diǎn)個(gè)星星給我好嗎。
