新年快樂，開工咯~~！！

2017年(nian)，新(xin)年(nian)上(shang)班第一天(tian)，大家都忙著串領(ling)導(dao)辦(ban)公室領(ling)紅包，我這(zhe)人比較懶，就工位旁邊領(ling)導(dao)領(ling)了個，閑著無聊，來寫(xie)這(zhe)新(xin)年(nian)第一遍博客，程序其(qi)實(shi)是去年(nian)回家前(qian)搞定的，今天(tian)算是給補上(shang)這(zhe)篇(pian)記錄（表情：害(hai)羞~~）！

祝大家新(xin)(xin)年好，新(xin)(xin)年快(kuai)樂(le)，新(xin)(xin)年升職(zhi)加薪~ ~ ！

微信小計算器

前言：這個計算器承接該文章中的計算器的繼續和延伸，同時將其做了稍微調整移植到了微信上，經測試微信運行正常。

主要修改點：

1. 去掉原先的 DOM 相關的操作部分，修改成，直接修改數據去刷新視圖；
2. 由于該計算器是通過對象形式，構造器方式封裝和創建的，但是沒有DOM情況下需要去改變視圖，則需要將該對象與小程序功能相關聯起來，采取方式是：通過構造器參數，將 Page 對象傳給 Calculator 來實現數據綁定和修改；

3. 模塊化處理：這個簡單，直接將獲取計算器對象實例的函數導出即可; 
   module.exports = { getInstance: getInstance };

   getInstance 屬于(yu)單例(li)實現方式(shi)，實現原理這(zhe)里采用的是(shi)直接使用全局變量方式(shi)，這(zhe)種方式(shi)算是(shi)最簡(jian)捷的（偷了下懶 ~~）

4. 字體的處理，因為原先用的是外部字體 DigifaceWide 原來情況直接使用 @font-face 簡單就能搞定，這里折騰了下，經過 baidu + google 也簡(jian)單完成(cheng)了，主要(yao)實現原(yuan)理也簡(jian)單：

   • 將目標字體文件拷貝出來，放到 //transfonter.org/ 這個鏈接去處理下就行；
   • 然后把生成的文件 stylesheet.css 里的代碼拷貝出來放到 index.wxss 中的 @font-face 體中，就可以在樣式中直接使用該字體了，后面在使用 awesome 圖標的時候也通過這種方式實現了，還不錯！！

5. 最后需要處理的就是布局的轉換了，由于開始對 view 的特性還不能完全熟悉，導致糾結了挺久，總是每個按鈕成了單獨一行，通過浮動，絕對定位都沒能解決，因為一開始按鍵直接用 view 去處理了，最后換成 <button> 然后通過浮動按鍵元素解決，最后行的浮動，直接使用overflow: auto; 解決，并沒采用之前方式：clearfix，發現用(yong)(yong)溢出處理更快更好(hao)用(yong)(yong)，深層原(yuan)理還沒深入去(qu)了解（不(bu)能(neng)做(zuo)拿(na)來主(zhu)義，不(bu)可(ke)以，不(bu)能(neng)，要加緊(jin)獲取知(zhi)識步(bu)伐，↖(^ω^)↗）。

主要部分實現代碼：

1. 效(xiao)果(guo)圖

   工具上：

   

   微(wei)信上：

   

2. 視圖部分

   一開始(shi)計劃(hua)用模(mo)版(ban)去(qu)實現，后面(mian)發現用模(mo)版(ban)可(ke)能更麻煩點(dian)，中(zhong)間有些地方還是要單獨處(chu)理，并且涉及到數據更新問(wen)題，因此(ci)還是決定直接這種排版(ban)方式來寫控件(jian)部分。

   // 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. 控制(zhi)部(bu)分(fen)代碼

   控制部分主要就 onLoad 和 bindKeyTap 里面的處理，前者里面創建計算器實例，后者綁定事件處理，這里能讓人感受到模塊化和對象化的好處，和優雅（(^__^)），只需要簡單的兩行代碼就搞定，當然文件最開頭的 require 模(mo)塊的引入不能(neng)忽略，這都有賴于前面辛苦的結果，面向對象編程(cheng)的益(yi)處。

   
   var calculator = require('./Calculator.js');
   
   //獲取應用實例
   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,
   
     //事件處理函數(shu)
     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 里的核心控制邏輯(ji)代(dai)碼了，這個在這就不贅述了，前面的文(wen)章有更詳細的設(she)計和(he)說明；

總結：

總的(de)(de)來說，微信小(xiao)程序(xu)算是(shi)有了(le)個大概的(de)(de)了(le)解，至(zhi)少稍微有點(dian)了(le)解是(shi)個什(shen)么(me)東西(xi)了(le)，怎么(me)開始著手(shou)去開發，針對這個計(ji)算器也算是(shi)個練手(shou)，加(jia)前期的(de)(de)改(gai)進和功能(neng)添加(jia)，至(zhi)于小(xiao)程序(xu)其他(ta)的(de)(de)東西(xi)，學習起來也就沒那么(me)困難了(le)（最近小(xiao)程序(xu)有點(dian)冷淡了(le)啊(a)，自(zi)(zi)己也試(shi)用(yong)了(le)一(yi)些，感覺一(yi)開始進入方式就不(bu)是(shi)很方便，比較針對心(xin)中有特定目標，或者有特定關鍵(jian)字(zi)的(de)(de)使用(yong)群體(ti)，畢竟(jing)需要通過搜索(suo)才能(neng)找(zhao)到自(zi)(zi)己心(xin)儀的(de)(de)應用(yong)，希望以(yi)后能(neng)改(gai)進 ~~ 學習步伐還(huan)是(shi)不(bu)能(neng)停止~~~）

最后(hou)祝所(suo)有(you)努力，所(suo)有(you)奮斗在(zai)人生旅(lv)途(tu)的(de)人新年快(kuai)樂，恭喜(xi)發財，步步高升！！