1.在json檔案輸入定義檔案當前為元件
2.宣告元件後可在.wxml–wxss中編寫內容
3.元件中樣式檔案只應用與當前元件
4.元件wxss中不應使用id選擇器、屬性選擇器、標籤選擇器
5.自定義元件js檔案中,需要使用component()
來註冊元件,來提供元件的屬性定義,內部資料和自定義方法
component(
},data:
},methods:
}})
1.某個頁面需要使用元件前,需要在json
檔案中進行宣告引用元件。
}
2.在wxml
中就可以像基礎元件一樣使用自定義元件:《名稱》
提供子節點,用於使用元件過程中提供子節點
這裡是插入到元件slot中的內容
注意:預設情況下元件中只能有乙個slot
節點,需要使用多個slot
時,可以在json
檔案中宣告
component(,
})這裡是元件的內部細節
這裡是插入到元件slot name="before"中的內容
這裡是插入到元件slot name="after"中的內容
注意:元件樣式只在對應的元件中生效。編寫元件樣式時,需注意:
元件對應 wxss 檔案的樣式,只對元件wxml內的節點生效。編寫元件樣式時,需要注意以下幾點:
1).元件和引用元件的頁面不能使用id選擇器(#a)、屬性選擇器([a])和標籤名選擇器,請改用class選擇器。
2).元件和引用元件的頁面中使用後代選擇器(.a .b)在一些極端情況下會有非預期的表現,如遇,請避免使用。
4).子元素選擇器(.a>.b)只能用於 view 元件與其子節點之間,用於其他元件可能導致非預期的情況。
5).繼承樣式,如 font 、 color ,會從元件外繼承到元件內。
#a /* 在元件中不能使用 */
[a] /* 在元件中不能使用 */
button /* 在元件中不能使用 */
.a > .b /* 除非 .a 是 view 元件節點,否則不一定會生效 */
元件樣式隔離:
預設情況下,自定義元件的樣式只受到自定義元件 wxss 的影響。除非以下兩種情況:
component(
})//isolated 表示啟用樣式隔離,在自定義元件內外,使用 class 指定的樣式將不會相互影響(一般情況下的預設值);
//使用後兩者時,請務必注意元件間樣式的相互影響。
外部樣式:
有時,元件希望接受外部傳入的樣式類。此時可以在component
中用externalclasses
定義段定義若干個外部樣式類。
這個特性可以用於實現類似於 view 元件的 hover-class 屬性:頁面可以提供乙個樣式類,賦予 view 的 hover-class ,這個樣式類本身寫在頁面中而非 view 元件的實現中。
注意:在同乙個節點上使用普通樣式類和外部樣式類時,兩個類的優先順序是未定義的,因此最好避免這種情況。
/* 元件 custom-component.js */
component()
這段文字的顏色由元件外的 class 決定
小程式學習二(模板和元件)
1 輪播圖元件 2 模板定義和使用 定義,傳值 定義模板 name 模板名字 使用模板 3 資料儲存 1 快取 wx.setstorage let oldcollectflag wx.getstoragesync iscollected 獲取資料 2 全域性儲存 isplay false,playp...
小程式元件 map
map元件用於展示地圖 longitude中心經度 latitude中心緯度 markers地圖中的位置標記點 controls在地圖上顯示控制項,控制項不隨著地圖移動 polyline指定一系列座標點,從陣列第一項連線至最後一項 bind 相關事件 page polyline color ff66...
小程式 元件操作
在小程式開發中,難免會遇到一些重複的顯示功能,避免浪費開發資源就需要把公共的部分做成共享的功能,也就是組建。在跟目錄中,建立component目錄,用於存放元件。在component下建立元件資料夾。與頁面一致包含四個檔案。在元件中編寫的內容與頁面中是一樣的方式。在其他頁面呼叫時,需要在其他頁面中的...