Component構(gòu)造器可用于定義組件,調(diào)用Component構(gòu)造器時可以指定組件的屬性、數(shù)據(jù)、方法等。
定義段 類型 是否必填 描述
properties Object Map 否 組件的對外屬性,是屬性名到屬性設(shè)置的映射表,屬性設(shè)置中可包含三個字段, type 表示屬性類型、 value 表示屬性初始值、 observer 表示屬性值被更改時的響應(yīng)函數(shù)
data Object 否 組件的內(nèi)部數(shù)據(jù),和 properties 一同用于組件的模版渲染
methods Object 否 組件的方法,包括事件響應(yīng)函數(shù)和任意的自定義方法,關(guān)于事件響應(yīng)函數(shù)的使用,參見 組件事件
behaviors String Array 否 類似于mixins和traits的組件間代碼復(fù)用機制,參見 behaviors
created Function 否 組件生命周期函數(shù),在組件實例進入頁面節(jié)點樹時執(zhí)行,注意此時不能調(diào)用 setData
attached Function 否 組件生命周期函數(shù),在組件實例進入頁面節(jié)點樹時執(zhí)行
ready Function 否 組件生命周期函數(shù),在組件布局完成后執(zhí)行,此時可以獲取節(jié)點信息(使用 SelectorQuery )
moved Function 否 組件生命周期函數(shù),在組件實例被移動到節(jié)點樹另一個位置時執(zhí)行
detached Function 否 組件生命周期函數(shù),在組件實例被從頁面節(jié)點樹移除時執(zhí)行
relations Object 否 組件間關(guān)系定義,參見 組件間關(guān)系
options Object Map 否 一些組件選項,請參見文檔其他部分的說明
生成的組件實例可以在組件的方法、生命周期函數(shù)和屬性 observer 中通過 this 訪問。組件包含一些通用屬性和方法。
屬性名 類型 描述
is String 組件的文件路徑
id String 節(jié)點id
dataset String 節(jié)點dataset
data Object 組件數(shù)據(jù),包括內(nèi)部數(shù)據(jù)和屬性值
方法名 參數(shù) 描述
setData Object newData 設(shè)置data并執(zhí)行視圖層渲染
hasBehavior Object behavior 檢查組件是否具有 behavior (檢查時會遞歸檢查被直接或間接引入的所有behavior)
triggerEvent String name,
Object detail,
Object options 觸發(fā)事件,參見 組件事件
create SelectorQuery 創(chuàng)建一個 SelectorQuery 對象,選擇器選取范圍為這個組件實例內(nèi)
selectComponent String selector 使用選擇器選擇組件實例節(jié)點,返回匹配到的第一個組件實例對象
selectAllComponents String selector使用選擇器選擇組件實例節(jié)點,返回匹配到的全部組件實例對象組成的數(shù)組
getRelationNodesString relationKey 獲取所有這個關(guān)系對應(yīng)的所有關(guān)聯(lián)節(jié)點,參見 組件間關(guān)系
代碼示例:
Component({
behaviors: [],
properties: {
myProperty: { // 屬性名
type: String, // 類型(必填),目前接受的類型包括:String, Number, Boolean, Object, Array, null(表示任意類型)
value: '' // 屬性初始值(可選),如果未指定則會根據(jù)類型選擇一個
observer: function(newVal, oldVal){} // 屬性被改變時執(zhí)行的函數(shù)(可選),也可以寫成在methods段中定義的方法名字符串
},
myProperty2: String // 簡化的定義方式
},
data: {}, // 私有數(shù)據(jù),可用于模版渲染
// 生命周期函數(shù),可以為函數(shù),或一個在methods段中定義的方法名
attached: function(){},
moved: function(){},
detached: function(){},
methods: {
onMyButtonTap: function(){
this.setData({
// 更新屬性和數(shù)據(jù)的方法與更新頁面數(shù)據(jù)的方法類似
})
},
_myPrivateMethod: function(){
// 內(nèi)部方法建議以下劃線開頭
this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 這里將 data.A[0].B 設(shè)為 'myPrivateData'
this.applyDataUpdates()
}
}
})
注意:在 properties 定義段中,屬性名采用駝峰寫法(propertyName);在 wxml 中,指定屬性值時則對應(yīng)使用連字符寫法(component-tag-name property-name="attr value"),應(yīng)用于數(shù)據(jù)綁定時采用駝峰寫法(attr="{{propertyName}}")。
Tips:
Component 構(gòu)造器構(gòu)造的組件也可以作為頁面使用。
使用 this.data 可以獲取內(nèi)部數(shù)據(jù)和屬性值,但不要直接修改它們,應(yīng)使用 setData 修改。
生命周期函數(shù)無法在組件方法中通過 this 訪問到。
屬性名不要命名成 dataXyz 這樣的形式,因為在 WXML 中, data-xyz="" 會被作為節(jié)點 dataset 來處理,而不是組件屬性。
在一個組件的定義和使用時,組件的屬性名和data字段相互間都不能沖突(盡管它們位于不同的定義段中)。
KESION 科汛軟件
KESION 科汛軟件是國內(nèi)領(lǐng)先的在線教育軟件及私域社交電商軟件服務(wù)提供商,長期專注于為企業(yè)提供在線教育軟件及社交電商SaaS平臺解決方案。
公司核心產(chǎn)品云開店SaaS社交電商服務(wù)平臺、在線教育SaaS服務(wù)平臺、教育企業(yè)數(shù)字化SaaS云平臺、企微營銷助手、私有化獨立部署品牌網(wǎng)校和在線教育咨詢等。KESION 不斷通過技術(shù)創(chuàng)新,提供產(chǎn)品和服務(wù),助力企業(yè)向數(shù)字化轉(zhuǎn)型,通過科技驅(qū)動商業(yè)革新,讓商業(yè)變得更智慧!
對于很多企業(yè)想要開發(fā)微信小程序首先需要了解微信小程序如何開發(fā),學(xué)會如何使用微信小程序開發(fā)工具。所謂工欲善其事,必先利其器。 1、首先要下載微信官方的微信Web開發(fā)者工具...
1、公眾號自定義菜單點擊可打開相關(guān)小程序 已認證的公眾號,可將已關(guān)聯(lián)的小程序頁面放置到自定義菜單中,用戶點擊后可打開該小程序頁面。公眾號運營者可在公眾平臺進行設(shè)置,...