QQ小程序 Component構(gòu)造器

2020-07-01 16:07 更新

定義段與示例方法

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 一同用于組件的模板渲染
observers Object 組件數(shù)據(jù)字段監(jiān)聽器,用于監(jiān)聽 properties 和 data 的變化,參見 數(shù)據(jù)監(jiān)聽器
methods Object 組件的方法,包括事件響應(yīng)函數(shù)和任意的自定義方法,關(guān)于事件響應(yīng)函數(shù)的使用,參見 組件事件
behaviors String Array 類似于mixins和traits的組件間代碼復(fù)用機制,參見 behaviors
created Function 組件生命周期函數(shù),在組件實例剛剛被創(chuàng)建時執(zhí)行,注意此時不能調(diào)用 setData ,參見 組件生命周期
attached Function 組件生命周期函數(shù),在組件實例進入頁面節(jié)點樹時執(zhí)行,參見 組件生命周期
ready Function 組件生命周期函數(shù),在組件布局完成后執(zhí)行,參見 組件生命周期
moved Function 組件生命周期函數(shù),在組件實例被移動到節(jié)點樹另一個位置時執(zhí)行,參見 組件生命周期
detached Function 組件生命周期函數(shù),在組件實例被從頁面節(jié)點樹移除時執(zhí)行,參見 組件生命周期
relations Object 組件間關(guān)系定義,參見 組件間關(guān)系
externalClasses String Array 組件接受的外部樣式類,參見 外部樣式類
options Object Map 一些選項(文檔中介紹相關(guān)特性時會涉及具體的選項設(shè)置,這里暫不列舉)
lifetimes Object 組件生命周期聲明對象,參見 組件生命周期
pageLifetimes Object 組件所在頁面的生命周期聲明對象,支持頁面的 show 、 hide 等生命周期,參見 組件生命周期
definitionFilter Function 定義段過濾器,用于自定義組件擴展,參見 自定義組件擴展

生成的組件實例可以在組件的方法、生命周期函數(shù)和屬性 observer 中通過 this 訪問。組件包含一些通用屬性和方法。

屬性名 類型 描述
is String 組件的文件路徑
id String 節(jié)點id
dataset String 節(jié)點dataset
data Object 組件數(shù)據(jù),包括內(nèi)部數(shù)據(jù)和屬性值
properties Object 組件數(shù)據(jù),包括內(nèi)部數(shù)據(jù)和屬性值(與 data 一致)

方法名 參數(shù) 描述
setData Object newData 設(shè)置data并執(zhí)行視圖層渲染
hasBehavior Object behavior 檢查組件是否具有 behavior (檢查時會遞歸檢查被直接或間接引入的所有behavior)
triggerEvent String name, Object detail, Object options 觸發(fā)事件,參見 組件事件
createSelectorQuery 創(chuàng)建一個 SelectorQuery 對象,選擇器選取范圍為這個組件實例內(nèi)
selectComponent String selector 使用選擇器選擇組件實例節(jié)點,返回匹配到的第一個組件實例對象(會被 qq://component-export 影響)
selectAllComponents String selector 使用選擇器選擇組件實例節(jié)點,返回匹配到的全部組件實例對象組成的數(shù)組
getRelationNodes String relationKey 獲取這個關(guān)系所對應(yīng)的所有關(guān)聯(lián)節(jié)點,參見 組件間關(guān)系
groupSetData Function callback 立刻執(zhí)行 callback ,其中的多個 setData 之間不會觸發(fā)界面繪制(只有某些特殊場景中需要,如用于在不同組件同時 setData 時進行界面繪制同步)

代碼示例:

Component({


  behaviors: [],


  properties: {
    myProperty: { // 屬性名
      type: String, // 類型(必填),目前接受的類型包括:String, Number, Boolean, Object, Array, null(表示任意類型)
      value: '', // 屬性初始值(可選),如果未指定則會根據(jù)類型選擇一個
      observer(newVal, oldVal, changedPath) {
        // 屬性被改變時執(zhí)行的函數(shù)(可選),也可以寫成在methods段中定義的方法名字符串, 如:'_propertyChange'
        // 通常 newVal 就是新設(shè)置的數(shù)據(jù), oldVal 是舊數(shù)據(jù)
      }
    },
    myProperty2: String // 簡化的定義方式
  },
  data: {}, // 私有數(shù)據(jù),可用于模板渲染


  lifetimes: {
    // 生命周期函數(shù),可以為函數(shù),或一個在methods段中定義的方法名
    attached() { },
    moved() { },
    detached() { },
  },


  // 生命周期函數(shù),可以為函數(shù),或一個在methods段中定義的方法名
  attached() { }, // 此處attached的聲明會被lifetimes字段中的聲明覆蓋
  ready() { },


  pageLifetimes: {
    // 組件所在頁面的生命周期函數(shù)
    show() { },
    hide() { },
    resize() { },
  },


  methods: {
    onMyButtonTap() {
      this.setData({
        // 更新屬性和數(shù)據(jù)的方法與更新頁面數(shù)據(jù)的方法類似
      })
    },
    // 內(nèi)部方法建議以下劃線開頭
    _myPrivateMethod() {
      // 這里將 data.A[0].B 設(shè)為 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange(newVal, oldVal) {


    }
  }


})
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號