|
2019-07-02 自定義組件能夠幫我們更好的復用代碼和重構(gòu)簡化代碼復雜度。一起來學習一下小程序自定義組件的內(nèi)容吧。 從小程序基礎庫版本 1.6.3 開始，小程序支持簡潔的組件化編程。所有自定義組件相關特性都需要基礎庫版本 1.6.3 或更高。 開發(fā)者可以將頁面內(nèi)的功能模塊抽象成自定義組件，以便在不同的頁面中重復使用；也可以將復雜的頁面拆分成多個低耦合的模塊，有助于代碼維護。自定義組件在使用時與基礎組件非常相似 總覽 一、Component概念 Component像頁面一樣由wxml、wxss、js和json4個文件組成，且需要把這4個文件放在同一個目錄中。與頁面不一樣的是，Component中的構(gòu)造函數(shù)（也可以稱構(gòu)造器）是Component({})，而頁面中的構(gòu)造函數(shù)是Page({})。要編寫一個自定義組件，首先需要在 JSON 文件中進行自定義組件聲明（將component字段設為true可這一組文件設為自定義組件）： { "component": true } slot Component的slot（slot意思是插槽），主要是讓你在外部的wxml可以自由的在你的Component的wxml里插入模塊。默認情況下，一個組件的wxml只可能有一個slot。需要使用多個時，可以在組件js中聲明啟用。 Component({ options: { multipleSlots: true // 在組件定義時的選項中啟用多slot支持 }, properties: { /* ... */ }, methods: { /* ... */ } }) 此時，可以在這個組件的wxml中使用多個slot，以不同的 name 來區(qū)分。 <!-- 組件模板 --> <view class="wrapper"> <slot name="before"></slot> <view>這里是組件的內(nèi)部細節(jié)</view> <slot name="after"></slot> </view> 使用時，用 slot 屬性來將節(jié)點插入到不同的slot上。 <!-- 引用組件的頁面模板 --> <view> <component-tag-name> <!-- 這部分內(nèi)容將被放置在組件 <slot name="before"> 的位置上 --> <view slot="before">這里是插入到組件slot name="before"中的內(nèi)容</view> <!-- 這部分內(nèi)容將被放置在組件 <slot name="after"> 的位置上 --> <view slot="after">這里是插入到組件slot name="after"中的內(nèi)容</view> </component-tag-name> </view> 組件樣式編寫注意事項 組件和引用組件的頁面不能使用id選擇器（#a）、屬性選擇器（[a]）和標簽名選擇器，請改用class選擇器。 組件和引用組件的頁面中使用后代選擇器（.a .b）在一些極端情況下會有非預期的表現(xiàn)，如遇，請避免使用。 子元素選擇器（.a>.b）只能用于 view 組件與其子節(jié)點之間，用于其他組件可能導致非預期的情況。 繼承樣式，如 font 、 color ，會從組件外繼承到組件內(nèi)。 除繼承樣式外， app.wxss 中的樣式、組件所在頁面的的樣式對自定義組件無效。 #a { } /* 在組件中不能使用 */ [a] { } /* 在組件中不能使用 */ button { } /* 在組件中不能使用 */ .a > .b { } /* 除非 .a 是 view 組件節(jié)點，否則不一定會生效 */ 外部樣式類 使用外部樣式類可以讓組件使用指定的組件外樣式類，如果希望組件外樣式類能夠完全影響組件內(nèi)部，可以將組件構(gòu)造器中的options.addGlobalClass字段置為true。 /* 組件 custom-component.js */ Component({ externalClasses: ['my-class'] }) <!-- 組件 custom-component.wxml --> <custom-component class="my-class">這段文本的顏色由組件外的 class 決定</custom-component> /* 組件外的樣式定義 */ .red-text { color: red; } 創(chuàng)建一個組件 一個組件需要包括json、wxml、wxss、js四個文件組成，下面我們先看看一個簡單的入門： <!--components/component/component.wxml--> <view class="inner"> {{innerText}} </view> <slot></slot> 編寫JS文件，組件的屬性值和內(nèi)部數(shù)據(jù)將被用于組件 wxml 的渲染，其中，屬性值是可由組件外部傳入的 // components/component/component.js Component({ /** * 組件的屬性列表 */ properties: { innerText: { type: String, value: 'hello world' }, myProperties:String }, /** * 組件的初始數(shù)據(jù) */ data: { }, /** * 組件的方法列表 */ methods: { } }) 設置字體的顏色 /* components/component/component.wxss */ .inner{color: red;} 完成對組件的初始化，包括設置屬性列表，初始化數(shù)據(jù)，以及設置相關的方法。 使用自定義組件 使用已注冊的自定義組件前，首先要在頁面的 json 文件中進行引用聲明。此時需要提供每個自定義組件的標簽名和對應的自定義組件文件路徑： { "usingComponents": { "component": "/components/component/component" } } 在page頁面下添加聲明過的自定義組件： <component></component> <view> <component> <!-- 這部分內(nèi)容將被放置在組件 <slot> 的位置上 --> <view>這里是插入到組件slot中的內(nèi)容</view> </component> </view> 上方的是一個最簡單的自定義組件。 注意事項： 1.對于基礎庫的1.5.x版本， 1.5.7 也有部分自定義組件支持。 2.因為WXML節(jié)點標簽名只能是小寫字母、中劃線和下劃線的組合，所以自定義組件的標簽名也只能包含這些字符。 3.自定義組件也是可以引用自定義組件的，引用方法類似于頁面引用自定義組件的方式（使用 usingComponents 字段）。 4.自定義組件和使用自定義組件的頁面所在項目根目錄名不能以“wx-”為前綴，否則會報錯。 5.舊版本的基礎庫不支持自定義組件，此時，引用自定義組件的節(jié)點會變?yōu)槟J的空節(jié)點。 Component構(gòu)造器 使用component構(gòu)造器，進行構(gòu)造。 該構(gòu)造函數(shù)用于定義組件。調(diào)用Component函數(shù)能指定組件的數(shù)據(jù)，屬性和方法。來看看這個完整的列表代碼含義： Component({ behaviors: [], properties: { myProperty: { // 屬性名 type: String, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型） value: '', // 屬性初始值（可選），如果未指定則會根據(jù)類型選擇一個 observer: function (newVal, oldVal) { this._propertyChange(newVal, oldVal); } // 屬性被改變時執(zhí)行的函數(shù)（可選），也可以寫成在methods段中定義的方法名字符串, 如：'_propertyChange' }, myProperty2: String // 簡化的定義方式 }, data: { A: [{ B: 'init data.A[0].B' }] }, // 私有數(shù)據(jù)，可用于模版渲染 lifetimes: { // 生命周期函數(shù)，可以為函數(shù)，或一個在methods段中定義的方法名 attached: function () { }, moved: function () { }, detached: function () { }, }, // 生命周期函數(shù)，可以為函數(shù)，或一個在methods段中定義的方法名 attached: function () { }, // 此處attached的聲明會被lifetimes字段中的聲明覆蓋 ready: function() { }, pageLifetimes: { // 組件所在頁面的生命周期函數(shù) show: function () { }, }, methods: { onMyButtonTap: function () { this.setData({ // 更新屬性和數(shù)據(jù)的方法與更新頁面數(shù)據(jù)的方法類似 myProperty: 'Test' }) }, _myPrivateMethod: function () { // 內(nèi)部方法建議以下劃線開頭 this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 這里將 data.A[0].B 設為 'myPrivateData' this.applyDataUpdates() }, _propertyChange: function (newVal, oldVal) { console.log(newVal); console.log(oldVal); } } }) 組件與數(shù)據(jù)通信 組件間的通信方法有以下幾種： WXML 數(shù)據(jù)綁定：用于父組件向子組件的指定屬性設置數(shù)據(jù)，僅能設置 JSON 兼容數(shù)據(jù)（自基礎庫版本 2.0.9 開始，還可以在數(shù)據(jù)中包含函數(shù)）。具體在 組件模板和樣式 章節(jié)中介紹。 事件：用于子組件向父組件傳遞數(shù)據(jù)，可以傳遞任意數(shù)據(jù)。 如果以上兩種方式不足以滿足需要，父組件還可以通過 this.selectComponent 方法獲取子組件實例對象，這樣就可以直接訪問組件的任意數(shù)據(jù)和方法。 通過在頁面中給組件加了一個id值，這樣子我們就能查到組件的方法了。 <compontent id="modal"></compontent> /*js*/ var modal = this.setlectComponet('#modal'); 這樣子就能在外面調(diào)用組件里面的任意數(shù)據(jù)和方法了。 properties：主頁面?zhèn)魅霐?shù)據(jù)到組件，相當于Vue的props，是傳入外部數(shù)據(jù)的入口。 data：則用于組件的內(nèi)部數(shù)據(jù)變化，外部數(shù)據(jù)沒法初始化 在 properties 定義段中，屬性名采用駝峰寫法（propertyName）；在 wxml 中，指定屬性值時則對應使用連字符寫法（component-tag-name property-name="attr value"），應用于數(shù)據(jù)綁定時采用駝峰寫法（attr="{{propertyName}}"） 傳入的數(shù)據(jù)，不管是簡單數(shù)據(jù)類型，還是引用類型，都如同值復制一樣 方法函數(shù)調(diào)用 methods：需要在組件中調(diào)用的方法，都寫在這個對象里面。跟Page中的對象里面的方法同級。 生命周期：可單獨某個生命周期放在Components下（舊式的定義方式，可以保持對 <2.2.3 版本基礎庫的兼容），也可以放在lifetimes，如果兩個地方有同名生命周期，則lifetimes里面的方法會覆蓋前者。 Component({ lifetimes: { attached: function() { // 在組件實例進入頁面節(jié)點樹時執(zhí)行 }, detached: function() { // 在組件實例被從頁面節(jié)點樹移除時執(zhí)行 }, }, // 以下是舊式的定義方式，可以保持對 <2.2.3 版本基礎庫的兼容 attached: function() { // 在組件實例進入頁面節(jié)點樹時執(zhí)行 }, detached: function() { // 在組件實例被從頁面節(jié)點樹移除時執(zhí)行 }, // ... }) 組件所在的生命周期 還有一些特殊的生命周期，它們并非與組件有很強的關聯(lián)，但有時組件需要獲知，以便組件內(nèi)部處理。這樣的生命周期稱為“組件所在頁面的生命周期”，在 pageLifetimes 定義段中定義。其中可用的生命周期包括： 生成的組件實例可以在組件的方法、生命周期函數(shù)和屬性 observer 中通過 this 訪問。組件包含一些通用屬性和方法 image.png 組件傳出數(shù)據(jù)到主頁面 組件間交互的主要形式是自定義事件。 組件通過 this.triggerEvent() 觸發(fā)自定義事件，主頁面在組件上 bind:myevent="onMyEvent" 來接收自定義事件。 其中，this.triggerEvent() 方法接收自定義事件名稱外，還接收兩個對象，eventDetail 和 eventOptions。 <!-- 在自定義組件中 --> <button bindtap="onTap">點擊這個按鈕將觸發(fā)“myevent”事件</button> Component({ properties: {} methods: { // 子組件觸發(fā)自定義事件 ontap () { // 所有要帶到主頁面的數(shù)據(jù)，都裝在eventDetail里面 var eventDetail = { name:'sssssssss', test:[1,2,3] } // 觸發(fā)事件的選項 bubbles是否冒泡，composed是否可穿越組件邊界，capturePhase 是否有捕獲階段 var eventOption = { composed: true } this.triggerEvent('myevent', eventDetail, eventOption) } } }) 觸發(fā)的事件包括： 監(jiān)聽事件 自定義組件可以觸發(fā)任意的事件，引用組件的頁面可以監(jiān)聽這些事件。監(jiān)聽自定義組件事件的方法與監(jiān)聽基礎組件事件的方法完全一致： 在Page事件中監(jiān)聽組件中傳遞過來的值。 Page({ onMyEvent: function(e){ e.detail // 自定義組件觸發(fā)事件時提供的detail對象 } }) behaviors behaviors 是用于組件間代碼共享的特性，類似于一些編程語言中的“mixins”或“traits”。 每個 behavior 可以包含一組屬性、數(shù)據(jù)、生命周期函數(shù)和方法，組件引用它時，它的屬性、數(shù)據(jù)和方法會被合并到組件中，生命周期函數(shù)也會在對應時機被調(diào)用。每個組件可以引用多個 behavior 。 behavior 也可以引用其他 behavior 。 // my-behavior.js module.exports = Behavior({ behaviors: [], properties: { myBehaviorProperty: { type: String } }, data: { myBehaviorData: {} }, attached: function(){}, methods: { myBehaviorMethod: function(){} } }) 組件引用時，在 behaviors 定義段中將它們逐個列出即可。 // my-component.js var myBehavior = require('my-behavior') Component({ behaviors: [myBehavior], properties: { myProperty: { type: String } }, data: { myData: {} }, attached: function(){}, methods: { myMethod: function(){} } }) 字段的覆蓋和組合規(guī)則 組件和它引用的 behavior 中可以包含同名的字段，對這些字段的處理方法如下： 如果有同名的屬性或方法，組件本身的屬性或方法會覆蓋 behavior 中的屬性或方法，如果引用了多個 behavior ，在定義段中靠后 behavior 中的屬性或方法會覆蓋靠前的屬性或方法； 如果有同名的數(shù)據(jù)字段，如果數(shù)據(jù)是對象類型，會進行對象合并，如果是非對象類型則會進行相互覆蓋； 生命周期函數(shù)不會相互覆蓋，而是在對應觸發(fā)時機被逐個調(diào)用。如果同一個 behavior 被一個組件多次引用，它定義的生命周期函數(shù)只會被執(zhí)行一次。 內(nèi)置behavior 組件間關系 <custom-ul> <custom-li> item 1 </custom-li> <custom-li> item 2 </custom-li> </custom-ul> 這個例子中， custom-ul 和 custom-li 都是自定義組件，它們有相互間的關系，相互間的通信往往比較復雜。此時在組件定義時加入 relations 定義段，可以解決這樣的問題。示例： // path/to/custom-ul.js Component({ relations: { './custom-li': { type: 'child', // 關聯(lián)的目標節(jié)點應為子節(jié)點 linked: function(target) { // 每次有custom-li被插入時執(zhí)行，target是該節(jié)點實例對象，觸發(fā)在該節(jié)點attached生命周期之后 }, linkChanged: function(target) { // 每次有custom-li被移動后執(zhí)行，target是該節(jié)點實例對象，觸發(fā)在該節(jié)點moved生命周期之后 }, unlinked: function(target) { // 每次有custom-li被移除時執(zhí)行，target是該節(jié)點實例對象，觸發(fā)在該節(jié)點detached生命周期之后 } } }, methods: { _getAllLi: function(){ // 使用getRelationNodes可以獲得nodes數(shù)組，包含所有已關聯(lián)的custom-li，且是有序的 var nodes = this.getRelationNodes('path/to/custom-li') } }, ready: function(){ this._getAllLi() } }) // path/to/custom-li.js Component({ relations: { './custom-ul': { type: 'parent', // 關聯(lián)的目標節(jié)點應為父節(jié)點 linked: function(target) { // 每次被插入到custom-ul時執(zhí)行，target是custom-ul節(jié)點實例對象，觸發(fā)在attached生命周期之后 }, linkChanged: function(target) { // 每次被移動后執(zhí)行，target是custom-ul節(jié)點實例對象，觸發(fā)在moved生命周期之后 }, unlinked: function(target) { // 每次被移除時執(zhí)行，target是custom-ul節(jié)點實例對象，觸發(fā)在detached生命周期之后 } } } }) 更多： 關聯(lián)一類組件 抽象節(jié)點 自定義組件擴展 開發(fā)第三方自定義組件 制作一個彈窗組件 |
|
|
