新年快樂(lè)，開(kāi)工咯~~?。?/h3>

2017年，新年上班第一天，大家都忙著串領(lǐng)導(dǎo)辦公室領(lǐng)紅包，我這人比較懶，就工位旁邊領(lǐng)導(dǎo)領(lǐng)了個(gè)，閑著無(wú)聊，來(lái)寫(xiě)這新年第一遍博客，程序其實(shí)是去年回家前搞定的，今天算是給補(bǔ)上這篇記錄（表情：害羞~~）！

祝大家新年好，新年快樂(lè)，新年升職加薪~ ~ ！

微信小計(jì)算器

前言：這個(gè)計(jì)算器承接該文章中的計(jì)算器的繼續(xù)和延伸，同時(shí)將其做了稍微調(diào)整移植到了微信上，經(jīng)測(cè)試微信運(yùn)行正常。

主要修改點(diǎn)：

1. 去掉原先的 DOM 相關(guān)的操作部分，修改成，直接修改數(shù)據(jù)去刷新視圖；
2. 由于該計(jì)算器是通過(guò)對(duì)象形式，構(gòu)造器方式封裝和創(chuàng)建的，但是沒(méi)有DOM情況下需要去改變視圖，則需要將該對(duì)象與小程序功能相關(guān)聯(lián)起來(lái)，采取方式是：通過(guò)構(gòu)造器參數(shù)，將 Page 對(duì)象傳給 Calculator 來(lái)實(shí)現(xiàn)數(shù)據(jù)綁定和修改；

3. 模塊化處理：這個(gè)簡(jiǎn)單，直接將獲取計(jì)算器對(duì)象實(shí)例的函數(shù)導(dǎo)出即可; 
   module.exports = { getInstance: getInstance };

   getInstance 屬于單例實(shí)現(xiàn)方式，實(shí)現(xiàn)原理這里采用的是直接使用全局變量方式，這種方式算是最簡(jiǎn)捷的（偷了下懶 ~~）

4. 字體的處理，因?yàn)樵扔玫氖峭獠孔煮w DigifaceWide 原來(lái)情況直接使用 @font-face 簡(jiǎn)單就能搞定，這里折騰了下，經(jīng)過(guò) baidu + google 也簡(jiǎn)單完成了，主要實(shí)現(xiàn)原理也簡(jiǎn)單：

   • 將目標(biāo)字體文件拷貝出來(lái)，放到 https://transfonter.org/ 這個(gè)鏈接去處理下就行；
   • 然后把生成的文件 stylesheet.css 里的代碼拷貝出來(lái)放到 index.wxss 中的 @font-face 體中，就可以在樣式中直接使用該字體了，后面在使用 awesome 圖標(biāo)的時(shí)候也通過(guò)這種方式實(shí)現(xiàn)了，還不錯(cuò)！！

5. 最后需要處理的就是布局的轉(zhuǎn)換了，由于開(kāi)始對(duì) view 的特性還不能完全熟悉，導(dǎo)致糾結(jié)了挺久，總是每個(gè)按鈕成了單獨(dú)一行，通過(guò)浮動(dòng)，絕對(duì)定位都沒(méi)能解決，因?yàn)橐婚_(kāi)始按鍵直接用 view 去處理了，最后換成 <button> 然后通過(guò)浮動(dòng)按鍵元素解決，最后行的浮動(dòng)，直接使用overflow: auto; 解決，并沒(méi)采用之前方式：clearfix，發(fā)現(xiàn)用溢出處理更快更好用，深層原理還沒(méi)深入去了解（不能做拿來(lái)主義，不可以，不能，要加緊獲取知識(shí)步伐，↖(^ω^)↗）。

主要部分實(shí)現(xiàn)代碼：

1. 效果圖

   工具上：

   

   微信上：

   

2. 視圖部分

   一開(kāi)始計(jì)劃用模版去實(shí)現(xiàn)，后面發(fā)現(xiàn)用模版可能更麻煩點(diǎn)，中間有些地方還是要單獨(dú)處理，并且涉及到數(shù)據(jù)更新問(wèn)題，因此還是決定直接這種排版方式來(lái)寫(xiě)控件部分。

   // index.wxml
   
   <view class="container">
    <view id="main-board">
       <view id="board-title">CALCULATOR</view>
       <view id="board-result">
           <view id="result-date">{{dateContent}}</view>
           <view id="result-up"><span>{{resultUp}}</span></view>
           <view id="result-down">{{resultDown}}</view>
       </view>
       <view id="board-keys" bindtap="bindKeyTap">
           <view id="board-line-0" class="board-row">
               <button data-text="AC" class="bg-red">AC</button>
               <button data-text="CE" class="bg-red">CE</button>
               <button data-text="÷" id="divide">÷</button>
               <button data-text="×">×</button>
           </view>
           <view class="board-row">
               <button data-text="7">7</button>
               <button data-text="8">8</button>
               <button data-text="9">9</button>
               <button data-text="-">-</button>
           </view>
           <view class="board-row">
               <button data-text="4">4</button>
               <button data-text="5">5</button>
               <button data-text="6">6</button>
               <button data-text="+">+</button>
           </view>
           <view class="board-row">
               <view class="equal-left">
                   <view>
                       <button data-text="1">1</button>
                       <button data-text="2">2</button>
                       <button data-text="3">3</button>
                   </view>
                   <view id="btn-0">
                       <button data-text="0" class="btn-0">0</button>
                       <button data-text=".">.</button>
                   </view>
               </view>
               <view class="equal-right">
                   <button data-text="=" class="btn-equal">=</button>
               </view>
           </view>
       </view>
   </view>

   • 1
   • 2
   • 3
   • 4
   • 5
   • 6
   • 7
   • 8
   • 9
   • 10
   • 11
   • 12
   • 13
   • 14
   • 15
   • 16
   • 17
   • 18
   • 19
   • 20
   • 21
   • 22
   • 23
   • 24
   • 25
   • 26
   • 27
   • 28
   • 29
   • 30
   • 31
   • 32
   • 33
   • 34
   • 35
   • 36
   • 37
   • 38
   • 39
   • 40
   • 41
   • 42
   • 43
   • 44
   • 45
   • 46
   • 47
   • 1
   • 2
   • 3
   • 4
   • 5
   • 6
   • 7
   • 8
   • 9
   • 10
   • 11
   • 12
   • 13
   • 14
   • 15
   • 16
   • 17
   • 18
   • 19
   • 20
   • 21
   • 22
   • 23
   • 24
   • 25
   • 26
   • 27
   • 28
   • 29
   • 30
   • 31
   • 32
   • 33
   • 34
   • 35
   • 36
   • 37
   • 38
   • 39
   • 40
   • 41
   • 42
   • 43
   • 44
   • 45
   • 46
   • 47

3. 控制部分代碼

   控制部分主要就 onLoad 和 bindKeyTap 里面的處理，前者里面創(chuàng)建計(jì)算器實(shí)例，后者綁定事件處理，這里能讓人感受到模塊化和對(duì)象化的好處，和優(yōu)雅（(^__^)），只需要簡(jiǎn)單的兩行代碼就搞定，當(dāng)然文件最開(kāi)頭的 require 模塊的引入不能忽略，這都有賴于前面辛苦的結(jié)果，面向?qū)ο缶幊痰囊嫣帯?/p>

   
   var calculator = require('./Calculator.js');
   
   //獲取應(yīng)用實(shí)例
   var app = getApp()
   Page({
     data: {
       motto: 'Hello World',
       userInfo: {},
       digits: [ ['AC', 'CE', '÷'], ['7', '8', '9'], ['4', '5', '6'], ['1', '2', '3'] ],
       calculator: null,
       resultUp: '',
       resultDown: '',
       dateContent: ''
     },
   
     calculator: null,
   
     //事件處理函數(shù)
     bindViewTap: function() {
       wx.navigateTo({
         url: '../logs/logs'
       })
     },
     onLoad: function () {
       var that = this;
   
       that.calculator = calculator.getInstance(that);
   
       console.log( that.calculator );
     },
   
     bindKeyTap: function(event) {
   
       var that = this;
   
       that.calculator.calculatorClickEvent(event)
     }
   })
   

   • 1
   • 2
   • 3
   • 4
   • 5
   • 6
   • 7
   • 8
   • 9
   • 10
   • 11
   • 12
   • 13
   • 14
   • 15
   • 16
   • 17
   • 18
   • 19
   • 20
   • 21
   • 22
   • 23
   • 24
   • 25
   • 26
   • 27
   • 28
   • 29
   • 30
   • 31
   • 32
   • 33
   • 34
   • 35
   • 36
   • 37
   • 38
   • 39
   • 40
   • 1
   • 2
   • 3
   • 4
   • 5
   • 6
   • 7
   • 8
   • 9
   • 10
   • 11
   • 12
   • 13
   • 14
   • 15
   • 16
   • 17
   • 18
   • 19
   • 20
   • 21
   • 22
   • 23
   • 24
   • 25
   • 26
   • 27
   • 28
   • 29
   • 30
   • 31
   • 32
   • 33
   • 34
   • 35
   • 36
   • 37
   • 38
   • 39
   • 40

4. 最后就是 Calculator.js 里的核心控制邏輯代碼了，這個(gè)在這就不贅述了，前面的文章有更詳細(xì)的設(shè)計(jì)和說(shuō)明；

總結(jié)：

總的來(lái)說(shuō)，微信小程序算是有了個(gè)大概的了解，至少稍微有點(diǎn)了解是個(gè)什么東西了，怎么開(kāi)始著手去開(kāi)發(fā)，針對(duì)這個(gè)計(jì)算器也算是個(gè)練手，加前期的改進(jìn)和功能添加，至于小程序其他的東西，學(xué)習(xí)起來(lái)也就沒(méi)那么困難了（最近小程序有點(diǎn)冷淡了啊，自己也試用了一些，感覺(jué)一開(kāi)始進(jìn)入方式就不是很方便，比較針對(duì)心中有特定目標(biāo)，或者有特定關(guān)鍵字的使用群體，畢竟需要通過(guò)搜索才能找到自己心儀的應(yīng)用，希望以后能改進(jìn) ~~ 學(xué)習(xí)步伐還是不能停止~~~）

最后祝所有努力，所有奮斗在人生旅途的人新年快樂(lè)，恭喜發(fā)財(cái)，步步高升??！