先談下背景,在作一款產品的時候須要用到日期選擇器,可是官方的卻不太知足需求,由於沒法選擇農曆啊。因此本身來造一個輪子好了,造輪子以前先想一想啊,萬一之後多個地方要用到,多個項目要用,怎麼辦呢?html
那把這個輪子抽象,定義輸入輸出,即接口。組件裏面怎麼運轉調用方無論啊,給了什麼輸入,就只管結果好了。git
組件的三要素就是小程序定義的三種文件:es6
jsgithub
wxml小程序
wxssapp
由於js自己就是模塊化開發,因此這自然有利於組件化。wxml和wxss呢,定義了組件的皮膚,小程序的模板template標籤能夠方便wxml的複用。至於wxss,沒有獨立出來,目前沒發現要怎麼整合到獨立的組件中去,而不與其餘的wxss發生耦合。xss
<!-- index: int msg: string time: string --> <template name="myTemplate"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view> </template>
用法模塊化
// 若是模板是寫在單獨的wxml文件,則要inport,引入。路徑則是當前文件的相對路徑。 <import src="../cal/calendar.wxml"></import> <template is="myTemplate" data="{{...item}}"/>
須要注意的是data數據是有單獨的做用域的,只能使用data傳入的數據。具體的理解就是:組件化
data: { item: { index: int msg: string time: string }, index: int msg: string time: string }
模板裏面的數據實際顯示的是item的屬性,而不是和item同級的屬性。
模板還有一種用法學習
<template is="myTemplate" data="{{index,msg,time}}"/>
這樣就要傳入模板中用到的三個變量,而不是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文件
<template name="calendar"> ... </template>
定義一個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...
憋走,點贊是美意,打賞是鼓勵~