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