起因

那天蘭姐突然就說，前端面試搞什么CSS3特效那種很炫的其實(shí)面試官是不在意的。倒不如用JS實(shí)現(xiàn)一個(gè)簡單的計(jì)算器來的實(shí)在。所以，我就突然來了興致，用小程序做個(gè)計(jì)算器來試試水？

經(jīng)過

2017.8.25日下午五點(diǎn)開始：

1、界面設(shè)計(jì)

界面圖1

整體使用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頁面，小程序中沒有對應(yīng)的i標(biāo)簽，沒辦法用&#xe61c類似這種的字符編碼來實(shí)現(xiàn)一個(gè)icon，說了這么多廢話，到底怎么解決呢？

解決方法：

1、還是在淘寶的iconfont上選擇自己想要的icon圖標(biāo)，與往常一樣，選擇好之后，下載到本地。找到.ttf結(jié)尾的字體文件。沒有顯示隱藏文件名稱的如下圖：

ttf文件

2、這時(shí)候用到 https://transfonter.org/ 這個(gè)網(wǎng)站將我們的字體文件轉(zhuǎn)換成base64格式的編碼。如下圖：

網(wǎng)站截圖

3、將轉(zhuǎn)換好編碼的文件下載下來。找到stylesheet.css文件。將形如下圖的代碼片段拷貝下來

stylesheet

4、將上面代碼放到你要用的.wxss。不過我還是建議放在一個(gè)公共區(qū)域，比如app.wxss里面或者一個(gè)其他的.wxss里面，在用到的時(shí)候@import進(jìn)去。
5、最重要的一步啊。這時(shí)候很多小伙伴估計(jì)還是懵逼的。要怎么用這些圖標(biāo)呢。我們知道每個(gè)圖標(biāo)都有自己的形如 &#xe61c 的字符表示。那么我們就可以在.wxml中用一個(gè)text標(biāo)簽并對其用css修飾后就可以有相應(yīng)的圖標(biāo)了。如下所示：

    //html部分，iconfont類必須要，后面的icon-c是我自定義的         
    <text class="iconfont icon-c"></text>
    //css部分。假設(shè)我們現(xiàn)在就要用 &#xe61c 這個(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)了，接下來把對應(yīng)的圖標(biāo)填充到對應(yīng)的格子處即可，如下圖所示：。我想這部分應(yīng)該對要用到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)擊背景色修改效果

在寫之前，請?jiān)试S我好好吐槽一下小程序。你為什么沒有DOM操作，你為什么與這么多東西格格不入。可是，還是要堅(jiān)持寫完這個(gè)小程序。
首先是界面每個(gè)區(qū)塊點(diǎn)擊的變色效果，沒有DOM操作好難受?。?/p>

區(qū)塊點(diǎn)擊變色效果

小程序如何來控制某個(gè)區(qū)塊改變其CSS呢？我們就以這個(gè)8為例：

首先，我們在8這個(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ù)原色的與改變顏色的思路差不多?？梢栽O(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è)星星給我好嗎。