7.slot 插槽的使用
8.component構造器
類似於頁面，自定義元件由json，wxml，wxss，js四個檔案
在wxml檔案中編寫屬於元件自己的模板
在wxss中編寫屬於元件的相關樣式
在js檔案中定義資料結構和相關邏輯
以home頁面為例：
1.先在home.json中進行註冊
"usingcomponents":
//註冊形式： 標籤名：元件的路徑
//路徑可以是相對路徑，也可以是絕對路徑
>
my-cpn
>
/>
}
(2)外部樣式對元件內樣式的影響
(3)結論
(4) 如何讓class可以相互影響
在元件的js檔案中的component物件中傳入options屬性，改變該屬性中styleisolation的對應取值
三個取值：
//預設isolated，隔離的
options:
元件向頁面傳入自定義事件
第一種方式的步驟：
class
="title"
>
}view
>
properties:
,
title
="哈哈哈"
/>
title
="呵呵呵"
/>
title
="嘿嘿嘿"
/>
優化：在定義屬性時寫成物件形式
title:
}
（1）在需要頁面傳遞樣式的地方新增類名（元件wxml檔案）
class
="title titleclass"
>
}view
>
externalclasses:
['titleclass'
]
title
="哈哈哈"
titleclass
="red"
/>
title
="呵呵呵"
titleclass
="green"
/>
title
="嘿嘿嘿"
titleclass
="blue"
/>
.red
.green
.blue
（1） 在wxml中定義該事件名
（2） 在js檔案中定義該事件的函式，並使用函式將該事件傳遞出去
methods:,)
//increment為傳遞出去的事件名稱， 第二個引數是一些其他資料，在event事件中可以去個這些其他資料
}}
>
當前計數counter: }view
>
bind:increment
="handleincrement"
/>
handleincrement
(event))}
,
methods:)}
}
const my_select =
this
.selectcomponent
('#select-id'
) my_select.
incrementcounter(1
)
使用步驟及注意事項:
//元件的wxml
>
我是mslot元件的開始view
>
class
="slot1"
>
name
="slot1"
/>
view
>
class
="slot2"
>
name
="slot2"
/>
view
>
class
="slot3"
>
name
="slot3"
/>
view
>
>
我是mslot元件的結尾view
>
options:
>
slot
="slot2"
>
按鈕button
>
slot
="slot1"
>
slider
>
slot
="slot3"
>
哈哈哈text
>
my-mslot
>
// components/my-cpn/my-cpn.js
component(}
,/**
* 元件的初始資料
*///定義元件內部的初始化資料
data:
,/**
* 元件的方法列表
*///用於定義元件內部的函式
methods:},
//用於定義元件的配置選項
//multipleslots: 使用多插槽時設定為true
// styleisolation: 設定樣式的隔離方式
options:
,//外界給元件傳入額外的樣式
externalclasses：[類名1，類名2],
//可以監聽屬性的改變
observers:},
//---------------元件中監聽生命週期函式----------
//1.監聽所在頁面的生命週期
pagelifetimes:
,hide()
,resize()
},//2.監聽元件本身的生命週期
lifetimes:
,attached()
,ready()
,moved()
,detached()
}})
微信小程式元件化開發
官方介紹 本次demo目錄結構 page下兩個資料夾，乙個components，用於存放元件 乙個home，為我們的主要頁面 components裡面兩個元件，乙個banner，乙個news，都是都過右鍵 新建component 生成的 第一步 配置 home.json 使頁面能使用元件 home....
微信小程式開發 元件 5
編輯器匯出內容支援帶標籤的html和純文字的text，編輯器內部採用delta格式進行儲存。通過setcontents介面設定內容時，解析插入的html可能會由於一些非法標籤導致解析錯誤，建議開發者在小程式內使用時通過 delta 進行插入。富文字元件內部引入了一些基本的樣式使得內容可以正確的展示，...
微信小程式開發 元件 3
group class radio group bindchange radiochange class radio wx for checked color pink page radiochange function e 從底部彈起的滾動選擇器。class section class secti...