舟山闪爸电子技术有限公司

微信小程序Component構(gòu)造器,指定小程序組件的屬性、數(shù)據(jù)、方法

 
 Component構(gòu)造器可用于定義組件,調(diào)用Component構(gòu)造器時可以指定組件的屬性、數(shù)據(jù)、方法等。

微信小程序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字段相互間都不能沖突(盡管它們位于不同的定義段中)。


【本站聲明】
  1、本站文章中所選用的圖片及文字來源于網(wǎng)絡(luò)以及用戶投稿,由于未聯(lián)系到知識產(chǎn)權(quán)人或未發(fā)現(xiàn)有關(guān)知識產(chǎn)權(quán)的登記,如有知識產(chǎn)權(quán)人并不愿意我們使用,如果有侵權(quán)請立即聯(lián)系。
  2、本網(wǎng)站不對文章中所涉及的內(nèi)容真實性、準確性、可靠性負責(zé),僅系客觀性描述,如您需要了解該類商品/服務(wù)詳細的資訊,請您直接與該類商品/服務(wù)的提供者聯(lián)系。


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è)變得更智慧!



▼點擊進入科汛官網(wǎng)了解更多



熱門標簽
微信小程序 SaaS
上/下篇
  • 微信小程序開發(fā)工具推薦,微信小程序開發(fā)工具使用

  • 公眾號模板消息小程序,公眾號消息跳轉(zhuǎn)小程序

換一換相關(guān)推薦
精選內(nèi)容
熱點精選