新年快樂,開工咯~~??!
2017年,新年上班第一天,大家都忙著串領導辦公室領紅包,我這人比較懶,就工位旁邊領導領了個,閑著無聊,來寫這新年第一遍博客,程序其實是去年回家前搞定的,今天算是給補上這篇記錄(表情:害羞~~)!
祝大家新年好,新年快樂,新年升職加薪~ ~ !
微信小計算器
前言:這個計算器承接該文章中的計算器的繼續(xù)和延伸,同時將其做了稍微調整移植到了微信上,經(jīng)測試微信運行正常。
主要修改點:
-
去掉原先的
DOM
相關的操作部分,修改成,直接修改數(shù)據(jù)去刷新視圖;
-
由于該計算器是通過對象形式,構造器方式封裝和創(chuàng)建的,但是沒有
DOM
情況下需要去改變視圖,則需要將該對象與小程序功能相關聯(lián)起來,采取方式是:通過構造器參數(shù),將 Page
對象傳給 Calculator
來實現(xiàn)數(shù)據(jù)綁定和修改;
-
模塊化處理:這個簡單,直接將獲取計算器對象實例的函數(shù)導出即可;
module.exports = { getInstance: getInstance };
getInstance
屬于單例實現(xiàn)方式,實現(xiàn)原理這里采用的是直接使用全局變量方式,這種方式算是最簡捷的(偷了下懶 ~~)
-
字體的處理,因為原先用的是外部字體 DigifaceWide
原來情況直接使用 @font-face
簡單就能搞定,這里折騰了下,經(jīng)過 baidu + google
也簡單完成了,主要實現(xiàn)原理也簡單:
-
將目標字體文件拷貝出來,放到 https://transfonter.org/ 這個鏈接去處理下就行;
-
然后把生成的文件
stylesheet.css
里的代碼拷貝出來放到 index.wxss
中的 @font-face
體中,就可以在樣式中直接使用該字體了,后面在使用 awesome
圖標的時候也通過這種方式實現(xiàn)了,還不錯?。?/li>
-
最后需要處理的就是布局的轉換了,由于開始對 view
的特性還不能完全熟悉,導致糾結了挺久,總是每個按鈕成了單獨一行,通過浮動,絕對定位都沒能解決,因為一開始按鍵直接用 view
去處理了,最后換成 <button>
然后通過浮動按鍵元素解決,最后行的浮動,直接使用overflow: auto;
解決,并沒采用之前方式:clearfix
,發(fā)現(xiàn)用溢出處理更快更好用,深層原理還沒深入去了解(不能做拿來主義,不可以,不能,要加緊獲取知識步伐,↖(^ω^)↗)。
主要部分實現(xiàn)代碼:
-
效果圖
工具上:
微信上:
-
視圖部分
一開始計劃用模版去實現(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
-
控制部分代碼
控制部分主要就 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,
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
-
最后就是 Calculator.js
里的核心控制邏輯代碼了,這個在這就不贅述了,前面的文章有更詳細的設計和說明;
總結:
總的來說,微信小程序算是有了個大概的了解,至少稍微有點了解是個什么東西了,怎么開始著手去開發(fā),針對這個計算器也算是個練手,加前期的改進和功能添加,至于小程序其他的東西,學習起來也就沒那么困難了(最近小程序有點冷淡了啊,自己也試用了一些,感覺一開始進入方式就不是很方便,比較針對心中有特定目標,或者有特定關鍵字的使用群體,畢竟需要通過搜索才能找到自己心儀的應用,希望以后能改進 ~~ 學習步伐還是不能停止~~~)
最后祝所有努力,所有奮斗在人生旅途的人新年快樂,恭喜發(fā)財,步步高升??!