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

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

祝大家新年好，新年快樂，新年升職加薪~ ~ ！

微信小計算器

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

主要修改點：

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

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

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

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

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

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

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

1. 效果圖

   工具上：

   

   微信上：

   

2. 視圖部分

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

   // 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)建計算器實例，后者綁定事件處理，這里能讓人感受到模塊化和對象化的好處，和優(yōu)雅（(^__^)），只需要簡單的兩行代碼就搞定，當然文件最開頭的 require 模塊的引入不能忽略，這都有賴于前面辛苦的結果，面向對象編程的益處。

   
   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,
   
     //事件處理函數(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 里的核心控制邏輯代碼了，這個在這就不贅述了，前面的文章有更詳細的設計和說明；

總結：

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

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