新聞中心
- Component 構(gòu)造器
- 定義字段與示例方法
- 使用 Component 構(gòu)造器構(gòu)造頁面
Component 構(gòu)造器
基礎(chǔ)庫 3.260.6 及以上版本開始,使用 Component 構(gòu)造器構(gòu)造的頁面開始支持
onInit生命周期。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴,公司提供的服務(wù)項目有:申請域名、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、巴東網(wǎng)站維護(hù)、網(wǎng)站推廣。
定義字段與示例方法
解釋: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 | Array. |
否 | 類似于 mixins 和 traits 的組件間代碼復(fù)用機(jī)制,參見 behaviors | |
| onInit | Function | 否 | 頁面生命周期函數(shù),僅在使用 Component 構(gòu)造器構(gòu)造頁面時有效,在頁面初始化時執(zhí)行,與 Page.onInit 使用方法一致,參見在 onInit 請求首屏主數(shù)據(jù) | 3.260.6 |
| created | Function | 否 | 組件生命周期函數(shù),在組件實例剛剛被創(chuàng)建時執(zhí)行,注意此時不能調(diào)用 setData ,參見組件生命周期 | |
| attached | Function | 否 | 組件生命周期函數(shù),在組件實例進(jìn)入頁面節(jié)點樹時執(zhí)行,參見組件生命周期 | |
| ready | Function | 否 | 組件生命周期函數(shù),在組件布局完成后執(zhí)行,此時可以獲取節(jié)點信息,參見組件生命周期 | |
| detached | Function | 否 | 組件生命周期函數(shù),在組件實例被從頁面節(jié)點樹移除時執(zhí)行,參見組件生命周期 | |
| externalClasses | Array. |
否 | 組件接受的外部樣式類,參見組件模板和樣式 | 1.13.27 |
| options | Object Map | 否 | 一些選項(文檔中介紹相關(guān)特性時會涉及具體的選項設(shè)置,這里暫不列舉) | 1.13.27 |
| lifetimes | Object | 否 | 組件生命周期聲明對象,組件的生命周期:created、attached、ready、detached 將收歸到 lifetimes 字段內(nèi)進(jìn)行聲明,原有聲明方式仍舊有效,如同時存在兩種聲明方式,則 lifetimes 字段內(nèi)聲明方式優(yōu)先級最高,參見組件生命周期 | 1.13.27 |
| pageLifetimes | Object | 否 | 組件所在頁面的生命周期聲明對象,目前僅支持頁面的 show 和 hide 兩個生命周期,參見組件生命周期 | 1.13.27 |
| definitionFilter | Function | 否 | 定義段過濾器,用于自定義組件擴(kuò)展,參見自定義組件擴(kuò)展 | 1.13.27 |
生成的組件實例可以在組件的方法、生命周期函數(shù)和屬性 observer 中通過 this 訪問。組件包含一些通用屬性和方法。
| 屬性名 | 類型 | 描述 | 最低版本 |
|---|---|---|---|
| is | String | 組件的文件路徑 | 1.13.27 |
| id | String | 節(jié)點 id | 1.13.27 |
| dataset | String | 節(jié)點 dataset | 1.13.27 |
| 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) | 1.13.27 |
| triggerEvent | String name, Object detail, Object options |
觸發(fā)事件,參見組件事件 | |
| createSelectorQuery | Object newData | 創(chuàng)建一個 SelectorQuery 對象,選擇器選取范圍為這個組件實例內(nèi),與 swan.createSelectorQuery().in(this) 是等效 | 2.5.3 |
| createIntersectionObserver | Object options | 創(chuàng)建一個 IntersectionObserver 對象,選擇器選取范圍為這個組件實例內(nèi) | 2.5.3 |
| selectComponent | String selector | 使用選擇器選擇組件實例節(jié)點,返回匹配到的第一個組件實例對象(會被 swan://component-export 影響),在生命周期 onReady 開始時生效 | |
| selectAllComponents | String selector | 使用選擇器選擇組件實例節(jié)點,返回匹配到的全部組件實例對象組成的數(shù)組 | |
| groupSetData | Function callback | 立刻執(zhí)行 callback ,其中的多個 setData 之間不會觸發(fā)界面進(jìn)行重復(fù)繪制 | 2.10.7 |
代碼示例
在開發(fā)者工具中打開
在開發(fā)者工具中打開
在 WEB IDE 中打開
- JS
// 自定義組件jsComponent({properties: {// 屬性名propName: {// 類型(必填),目前接受的類型包括:String, Number, Boolean, Object, Array, null(表示任意類型)type: String,// 屬性初始值(必填)value: 'val',observer: function(newVal, oldVal) {// 屬性被改變時執(zhí)行的函數(shù)(可選)}}},// 私有數(shù)據(jù),可用于模板渲染data: {},// 生命周期函數(shù),可以為函數(shù),或一個在methods段中定義的方法名attached: function () {},detached: function () {},methods: {onTap: function () {this.setData({// 更新屬性和數(shù)據(jù)的方法與更新頁面數(shù)據(jù)的方法類似});}}});
注意:
在 properties 定義段中,屬性名應(yīng)該采用駝峰寫法(propsName);在 swan 模板中,指定屬性值時則對應(yīng)使用連字符寫法( component-tag-name props-name="props value" )。
使用 Component 構(gòu)造器構(gòu)造頁面
解釋:
事實上,一個自定義組件也可以視為一個頁面,故頁面也可以使用 Component 構(gòu)造器構(gòu)造,擁有與普通組件一樣的定義字段與實例方法,其必要配置項( json )與正常自定義組件一致,即需要有component: true字段。
關(guān)于頁面?zhèn)鲄?/strong>:
從其它頁面跳轉(zhuǎn)到由自定義組件構(gòu)造的頁面時,如跳轉(zhuǎn)到頁面 /components/custom/custom?paramA=123¶mB=xyz ,你可以在由 custom 組件構(gòu)造的頁面 onInit 或 onLoad 生命周期中獲取傳遞的 query 字段。
注意:
頁面的生命周期方法(即 on 開頭的方法),應(yīng)寫在 methods 定義段中。
代碼示例
- JSON
- JS
{"component": true,"usingComponents": {}}
/* /components/custom/custom.js */Component({methods: {onLoad: function(options) {// 123console.log(options.paramA);// xyzconsole.log(options.paramB);}}});
使用 Component 構(gòu)造器來構(gòu)造頁面的一個好處是可以使用 behaviors 來提取所有頁面中公用的代碼段。例如,在所有頁面被創(chuàng)建和銷毀時都要執(zhí)行同一段代碼,就可以把這段代碼提取到 behaviors 中。
代碼示例
在開發(fā)者工具中打開
在開發(fā)者工具中打開
在 WEB IDE 中打開
- JS
// behavior.jsmodule.exports = Behavior({attached: function() {// 頁面創(chuàng)建時執(zhí)行console.info('Page loaded!')},detached: function() {// 頁面銷毀時執(zhí)行console.info('Page unloaded!')}})
- JS
// 自定義組件 Avar pageCommonBehavior = require('../behavior.js')Component({behaviors: [pageCommonBehavior],data: { /* ... */ },methods: { /* ... */ },})
- JS
// 自定義組件 Bvar pageCommonBehavior = require('../behavior.js')Component({behaviors: [pageCommonBehavior],data: { /* ... */ },methods: { /* ... */ },})
從基礎(chǔ)庫 3.260.6 版本開始,使用 Component 構(gòu)造器構(gòu)建的頁面開始支持使用 onInit 生命周期,執(zhí)行時機(jī)與 Page.onInit 相同,開發(fā)者可以使用該生命周期提前發(fā)起首屏請求,參見 在 onInit 請求首屏主數(shù)據(jù)
注意:
Component.onInit 具有和 Page.onInit 完全相同的限制,即不能進(jìn)行任何依賴視圖層的操作等。
代碼示例
- JS
function getData(param) {return new Promise((resolve, reject) => {swan.request({url: 'xxx',success: res => resolve(res)});});}Component(// 使用一個標(biāo)記位,確保只請求一次主數(shù)據(jù),用于低版本兼容hasRequest: falsedata: {value: ''},methods: {onInit(param) {if (!this.hasRequest) {this.hasRequest = true;getData(param).then(res => {this.setData({value: res.data});})}},onLoad(param) {if (!this.hasRequest) {this.hasRequest = true;getData(param).then(res => {this.setData({value: res.data});})}}});
說明:
- 使用 this.data 可以獲取內(nèi)部數(shù)據(jù)和屬性值,但不要直接修改它們,應(yīng)使用 setData 修改;
- 屬性名應(yīng)避免以 data- 開頭,因為在 SWAN 中,
data-name='swan'會被作為節(jié)點 dataset 來處理; - 屬性名應(yīng)避免以 prop- 開頭 在處理過程中會將該前綴刪除;
- 屬性名應(yīng)避免包含 “ _ ” 字符,因為在渲染過程中將會以 “ _ ” 字符進(jìn)行拆分。
分享文章:創(chuàng)新互聯(lián)百度小程序教程:Component構(gòu)造器
URL地址:http://fisionsoft.com.cn/article/dhcegsh.html


咨詢
建站咨詢

