Component 构造器

基础库 3.260.6 及以上版本开始，使用 Component 构造器构造的页面开始支持onInit生命周期。

定义字段与示例方法

解释：Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等。

生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this 访问。组件包含一些通用属性和方法。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• JS

// 自定义组件js
Component({
    properties: {
        // 属性名
        propName: { 
            // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
            type: String, 
            // 属性初始值（必填）
            value: 'val', 
            observer: function(newVal, oldVal) {
                // 属性被改变时执行的函数（可选）
            }
        }
    },
    // 私有数据，可用于模板渲染
    data: {}, 
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () {},
    detached: function () {},
    methods: {
        onTap: function () {
            this.setData({
               // 更新属性和数据的方法与更新页面数据的方法类似
            });
        }
    }
});

注意：
在 properties 定义段中，属性名应该采用驼峰写法（propsName）；在 swan 模板中，指定属性值时则对应使用连字符写法（ component-tag-name props-name="props value" ）。

使用 Component 构造器构造页面

解释：
事实上，一个自定义组件也可以视为一个页面，故页面也可以使用 Component 构造器构造，拥有与普通组件一样的定义字段与实例方法，其必要配置项（ json ）与正常自定义组件一致，即需要有component: true字段。

关于页面传参：
从其它页面跳转到由自定义组件构造的页面时，如跳转到页面 /components/custom/custom?paramA=123&paramB=xyz ，你可以在由 custom 组件构造的页面 onInit 或 onLoad 生命周期中获取传递的 query 字段。

注意：
页面的生命周期方法（即 on 开头的方法），应写在 methods 定义段中。

代码示例

• JSON
• JS

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

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

使用 Component 构造器来构造页面的一个好处是可以使用 behaviors 来提取所有页面中公用的代码段。例如，在所有页面被创建和销毁时都要执行同一段代码，就可以把这段代码提取到 behaviors 中。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• JS

// behavior.js
module.exports = Behavior({
    attached: function() {
        // 页面创建时执行
        console.info('Page loaded!')
    },
    detached: function() {
        // 页面销毁时执行
        console.info('Page unloaded!')
    }
})

• JS

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

• JS

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

从基础库 3.260.6 版本开始，使用 Component 构造器构建的页面开始支持使用 onInit 生命周期，执行时机与 Page.onInit 相同，开发者可以使用该生命周期提前发起首屏请求，参见 在 onInit 请求首屏主数据
注意：
Component.onInit 具有和 Page.onInit 完全相同的限制，即不能进行任何依赖视图层的操作等。

代码示例

• JS

function getData(param) {
    return new Promise((resolve, reject) => {
        swan.request({
            url: 'xxx',
            success: res => resolve(res)
        });
    });
}
Component(
    // 使用一个标记位，确保只请求一次主数据，用于低版本兼容
    hasRequest: false
    data: {
       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 可以获取内部数据和属性值，但不要直接修改它们，应使用 setData 修改；
• 属性名应避免以 data- 开头，因为在 SWAN 中，data-name='swan'会被作为节点 dataset 来处理；
• 属性名应避免以 prop- 开头 在处理过程中会将该前缀删除；
• 属性名应避免包含 “ _ ” 字符，因为在渲染过程中将会以 “ _ ” 字符进行拆分。