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