摘要:組件三要素組件的三要素就是小程序定義的三種文件因為本身就是模塊化開發(fā),所以這天然有利于組件化。日歷組件所以利用和就可以打造一款組件了。這樣就完成了一個組件編寫,任何需要用到的地方都可以引入了。
背景
先談下背景,在做一款產(chǎn)品的時候需要用到日期選擇器,但是官方的卻不太滿足需求,因為無法選擇農(nóng)歷啊。所以自己來造一個輪子好了,造輪子之前先想想啊,萬一以后多個地方要用到,多個項目要用,怎么辦呢?
那把這個輪子抽象,定義輸入輸出,即接口。組件里面怎么運轉(zhuǎn)調(diào)用方不管啊,給了什么輸入,就只管結(jié)果好了。
組件三要素組件的三要素就是小程序定義的三種文件:
js
wxml
wxss
因為js本身就是模塊化開發(fā),所以這天然有利于組件化。wxml和wxss呢,定義了組件的皮膚,小程序的模板template標簽可以方便wxml的復(fù)用。至于wxss,沒有獨立出來,目前沒發(fā)現(xiàn)要怎么整合到獨立的組件中去,而不與其他的wxss發(fā)生耦合。
{{index}}: {{msg}} Time: {{time}}
用法
// 如果模板是寫在多帶帶的wxml文件,則要inport,引入。路徑則是當前文件的相對路徑。
需要注意的是data數(shù)據(jù)是有多帶帶的作用域的,只能使用data傳入的數(shù)據(jù)。具體的理解就是:
data: { item: { index: int msg: string time: string }, index: int msg: string time: string }
模板里面的數(shù)據(jù)實際顯示的是item的屬性,而不是和item同級的屬性。
模板還有一種用法
這樣就要傳入模板中用到的三個變量,而不是item一個對象。模板渲染的結(jié)果則是最外層的index屬性,而不是item的index屬性值。
...符號是擴展運算符,理解為將一個對象所以的屬性展開傳遞給模板,這樣的好處是不要傳遞多個,寫出的代碼更加簡潔。擴展運算符是ES6的特性,有興趣可以深入學習。
如果運用擴展運算符給模板傳入數(shù)據(jù),像上面怎么去更新單個key的值呢?小程序提供了可以根據(jù)屬性路徑更新的方法:
// 更新單個key, this.setData({ index: 1 }); /* 更新對象中的單個key item: { index: int msg: string time: string } */ this.setData({ "item.index": 1 }); // path必須是字符串,不能是變量替代。下面是不行的 path = "item.index"; this.setData({ path: 1 });
雖然用法上是有點限制,但也避免了傳入一堆的參數(shù)給模板。
值得注意的是入?yún)ata的item必須是有初始化值,否則會報錯。
日歷組件所以利用template和js就可以打造一款組件了。先看下我所做的組件:
定義一個wxml文件
...
定義一個js文件
class Calendar { ... }
日期類有自己的作用域名,所以組件內(nèi)部的事件導致數(shù)據(jù)更新的時候,還是要用頁面更新數(shù)據(jù)的方法this.setData,所以必須要將頁面對象傳遞給組件內(nèi)部。
頁面調(diào)用組件:
// this 是當前頁面page對象,含有setData方法。 var calendar = new Calendar(this, function(date) { that.setData({ date: date }) }); // 當選擇日期變化的時候,組件內(nèi)部事件: this.pageCtx 則是page上下文,即上面實例化組件入?yún)⒌膖his對象。 changeCalendarTab(e) { this.pageCtx.setData({ "calendar_data.selectDateType": +e.target.dataset.tap }); this.data.selectDateType = +e.target.dataset.tap; this.changeCallBack && this.changeCallBack(this.getCurrentSelectDate()); }
具體組件請參考我的github:calendar。
這樣就完成了一個組件編寫,任何需要用到的地方都可以引入了。小程序一個不太好的地方是沒有包管理的概念,導致跨項目見的公共模塊復(fù)用起來比較麻煩,下次進行多帶帶講解。
by addy 原創(chuàng)文章,歡迎轉(zhuǎn)載,但希望全文轉(zhuǎn)載,注明本文地址。本文地址:http://www.iamaddy.net/2017/0...
憋走,點贊是美意,打賞是鼓勵~
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/87379.html
摘要:順便補充一句,微信官方提供的判斷依舊不全面,最新出來的蘋果手機還沒有完全支持相關(guān)的坑可以在官方社區(qū)的問答中找到。 首次在這里寫點東西,還請各位大佬擔待點。 摘要:昨天的placeholder-class只是希望各位看官注意,而今天的textarea就絕對是一個超級大坑!而且如果看官手中沒有蘋果手機測試的話,這個可就真的是個坑了!為啥?難道要等到用戶向你反饋你們產(chǎn)品有bug???.......
摘要:假如圖片鏈接有問題比如,依然展示占位圖。使用單文件組件將配置模板腳本樣式寫在一個文件中,方便維護。 零、問題的由來 一般在前端展示圖片時都會碰到這兩個常見的需求: 圖片未加載完成時先展示占位圖,等到圖片加載完畢后再展示實際的圖片。 假如圖片鏈接有問題(比如 404),依然展示占位圖。甚至你還可以增加點擊圖片再次加載的功能。(例如知乎) 然鵝,小程序原生組件 image 并沒有提供這...
摘要:并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔,優(yōu)化項目,在瀏覽器端的層面上提升速度,幫助初中級前端工程師快速搭建項目。 本文是關(guān)注微信小程序的開發(fā)和面試問題,由基礎(chǔ)到困難循序漸進,適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔,優(yōu)化項目,在瀏覽器端的層面上提升速度,幫助初中級前端工程師快...
摘要:并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔,優(yōu)化項目,在瀏覽器端的層面上提升速度,幫助初中級前端工程師快速搭建項目。 本文是關(guān)注微信小程序的開發(fā)和面試問題,由基礎(chǔ)到困難循序漸進,適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔,優(yōu)化項目,在瀏覽器端的層面上提升速度,幫助初中級前端工程師快...
閱讀 3607·2021-11-22 15:22
閱讀 3388·2019-08-30 15:54
閱讀 2778·2019-08-30 15:53
閱讀 993·2019-08-29 11:22
閱讀 3606·2019-08-29 11:14
閱讀 2142·2019-08-26 13:46
閱讀 2280·2019-08-26 13:24
閱讀 2346·2019-08-26 12:22