百度智能小程序 Component構造器

定義段與示例方法

解釋：

Component 構造器可用于定義組件，調用 Component 構造器時可以指定組件的屬性、數(shù)據(jù)、方法等。

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

代碼示例 

// 自定義組件js
Component({
    properties: {
        propName: { // 屬性名
            type: String, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
            value: 'val', // 屬性初始值（必填）
            observer: function(newVal, oldVal) {
                // 屬性被改變時執(zhí)行的函數(shù)（可選）
            }
        }
    },

    data: {}, // 私有數(shù)據(jù)，可用于模板渲染

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

    detached: function () {},

    methods: {
        onTap: function () {
            this.setData({
               // 更新屬性和數(shù)據(jù)的方法與更新頁面數(shù)據(jù)的方法類似
            });
        }
    }
});

注意：在 properties 定義段中，屬性名應該采用駝峰寫法（propsName）；在 swan 模板中，指定屬性值時則對應使用連字符寫法（ component-tag-name props-name="props value" ）。

使用 Component 構造器構造頁面

解釋：

事實上，一個自定義組件也可以視為一個頁面，故頁面也可以使用 Component 構造器構造，擁有與普通組件一樣的定義段與實例方法，其必要配置項（ json ）與正常自定義組件一致，即需要有 component: true 字段。

關于頁面?zhèn)鲄ⅲ?/p>

從其它頁面跳轉到由自定義組件構造的頁面時，如跳轉到頁面 /components/custom/custom?paramA=123&paramB=xyz ，你可以在由 custom 組件構造的頁面 onLoad 生命周期中獲取傳遞的 query 字段。

注意：

頁面的生命周期方法（即 on 開頭的方法），應寫在 methods 定義段中。

代碼示例

{
    "component": true,
    "usingComponents": {}
}

/* /components/custom/custom.js */
Component({
    methods: {
        onLoad: function(options) {
            console.log(options.paramA); // 123
            console.log(options.paramB); // xyz
        }
    }
});

使用 Component 構造器來構造頁面的一個好處是可以使用 behaviors 來提取所有頁面中公用的代碼段。例如，在所有頁面被創(chuàng)建和銷毀時都要執(zhí)行同一段代碼，就可以把這段代碼提取到 behaviors 中。

代碼示例 

// behavior.js
module.exports = Behavior({
    attached: function() {
        // 頁面創(chuàng)建時執(zhí)行
        console.info('Page loaded!')
    },
    detached: function() {
        // 頁面銷毀時執(zhí)行
        console.info('Page unloaded!')
    }
})

// 自定義組件 A
var pageCommonBehavior = require('../behavior.js')
Component({
    behaviors: [pageCommonBehavior],
    data: { /* ... */ },
    methods: { /* ... */ },
})

// 自定義組件 B
var pageCommonBehavior = require('../behavior.js')
Component({
    behaviors: [pageCommonBehavior],
    data: { /* ... */ },
    methods: { /* ... */ },
})

說明：

• 使用 this.data 可以獲取內部數(shù)據(jù)和屬性值，但不要直接修改它們，應使用 setData 修改；
• 屬性名應避免以 data- 開頭，因為在 SWAN 中，data-name='swan'會被作為節(jié)點 dataset 來處理；
• 屬性名應避免以 prop- 開頭 在處理過程中會將該前綴刪除；
• 屬性名應避免包含 “ _ ” 字符，因為在渲染過程中將會以 “ _ ” 字符進行拆分。