新年快樂(lè),開(kāi)工咯~~?。?017年,新年上班第一天,大家都忙著串領(lǐng)導(dǎo)辦公室領(lǐng)紅包,我這人比較懶,就工位旁邊領(lǐng)導(dǎo)領(lǐng)了個(gè),閑著無(wú)聊,來(lái)寫(xiě)這新年第一遍博客,程序其實(shí)是去年回家前搞定的,今天算是給補(bǔ)上這篇記錄(表情 ...
2017年,新年上班第一天,大家都忙著串領(lǐng)導(dǎo)辦公室領(lǐng)紅包,我這人比較懶,就工位旁邊領(lǐng)導(dǎo)領(lǐng)了個(gè),閑著無(wú)聊,來(lái)寫(xiě)這新年第一遍博客,程序其實(shí)是去年回家前搞定的,今天算是給補(bǔ)上這篇記錄(表情:害羞~~)!
祝大家新年好,新年快樂(lè),新年升職加薪~ ~ !
前言:這個(gè)計(jì)算器承接該文章中的計(jì)算器的繼續(xù)和延伸,同時(shí)將其做了稍微調(diào)整移植到了微信上,經(jīng)測(cè)試微信運(yùn)行正常。
DOM
相關(guān)的操作部分,修改成,直接修改數(shù)據(jù)去刷新視圖;DOM
情況下需要去改變視圖,則需要將該對(duì)象與小程序功能相關(guān)聯(lián)起來(lái),采取方式是:通過(guò)構(gòu)造器參數(shù),將 Page
對(duì)象傳給 Calculator
來(lái)實(shí)現(xiàn)數(shù)據(jù)綁定和修改;
模塊化處理:這個(gè)簡(jiǎn)單,直接將獲取計(jì)算器對(duì)象實(shí)例的函數(shù)導(dǎo)出即可;
module.exports = { getInstance: getInstance };
getInstance
屬于單例實(shí)現(xiàn)方式,實(shí)現(xiàn)原理這里采用的是直接使用全局變量方式,這種方式算是最簡(jiǎn)捷的(偷了下懶 ~~)
字體的處理,因?yàn)樵扔玫氖峭獠孔煮w DigifaceWide
原來(lái)情況直接使用 @font-face
簡(jiǎn)單就能搞定,這里折騰了下,經(jīng)過(guò) baidu + google
也簡(jiǎn)單完成了,主要實(shí)現(xiàn)原理也簡(jiǎn)單:
stylesheet.css
里的代碼拷貝出來(lái)放到 index.wxss
中的 @font-face
體中,就可以在樣式中直接使用該字體了,后面在使用 awesome
圖標(biāo)的時(shí)候也通過(guò)這種方式實(shí)現(xiàn)了,還不錯(cuò)!!
最后需要處理的就是布局的轉(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í)步伐,↖(^ω^)↗)。
效果圖
工具上:
微信上:
視圖部分
一開(kāi)始計(jì)劃用模版去實(shí)現(xiàn),后面發(fā)現(xiàn)用模版可能更麻煩點(diǎn),中間有些地方還是要單獨(dú)處理,并且涉及到數(shù)據(jù)更新問(wèn)題,因此還是決定直接這種排版方式來(lái)寫(xiě)控件部分。
控制部分代碼
控制部分主要就 onLoad
和 bindKeyTap
里面的處理,前者里面創(chuàng)建計(jì)算器實(shí)例,后者綁定事件處理,這里能讓人感受到模塊化和對(duì)象化的好處,和優(yōu)雅((^__^)),只需要簡(jiǎn)單的兩行代碼就搞定,當(dāng)然文件最開(kāi)頭的 require
模塊的引入不能忽略,這都有賴于前面辛苦的結(jié)果,面向?qū)ο缶幊痰囊嫣帯?/p>
最后就是 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),步步高升??!
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)