Component 构造器

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

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

    代码示例

    在开发者工具中打开

    • JS

    注意
    在 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
    1. {
    2. "component": true,
    3. "usingComponents": {}
    4. }

    代码示例

    在开发者工具中打开

    • JS
    1. // behavior.js
    2. attached: function() {
    3. // 页面创建时执行
    4. console.info('Page loaded!')
    5. },
    6. detached: function() {
    7. // 页面销毁时执行
    8. console.info('Page unloaded!')
    9. }
    • JS
    • JS
    1. var pageCommonBehavior = require('../behavior.js')
    2. Component({
    3. behaviors: [pageCommonBehavior],
    4. data: { /* ... */ },
    5. methods: { /* ... */ },
    6. })

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

    • JS

    说明

    • 使用 this.data 可以获取内部数据和属性值,但不要直接修改它们,应使用 setData 修改;
    • 属性名应避免以 data- 开头,因为在 SWAN 中,data-name='swan'会被作为节点 dataset 来处理;
    • 属性名应避免以 prop- 开头 在处理过程中会将该前缀删除;
    • 属性名应避免包含 “ _ ” 字符,因为在渲染过程中将会以 “ _ ” 字符进行拆分。