抽象节点

抽象节点自小程序基础库版本 3.90.18 、开发者工具正式版 2.9.1,beta 版 2.9.0-beta 开始支持。

# 在组件中使用抽象节点

抽象节点:自定义组件模板中的一些节点,其对应的自定义组件不是由自定义组件本身确定的,而是由自定义组件的调用者确定的。这时可以把这个节点声明为“抽象节点”。

例如,我们现在来实现一个“选框组”(selectable-group)组件,它其中可以放置单选框(custom-radio)或者复选框(custom-checkbox)。这个组件的 swan 可以这样编写:

代码示例

在开发者工具中预览效果

<!-- selectable-group.swan -->
<view s-for="{{labels}}">
    <label bindtap="itemTap" data-index="{{index}}">
        <selectable disabled="{{false}}" selected="{{selected[index]}}" name="{{name}}"></selectable>
        {{item}}
    </label>
</view>

其中,"selectable"不是任何在json文件的usingComponents字段中声明的组件,而是一个抽象节点。它需要在 componentGenerics 字段中声明:

{
    "componentGenerics": {
        "selectable": true
    }
}

# 使用包含抽象节点的组件

在使用selectable-group组件时,必须指定"selectable"具体是哪个组件:

<selectable-group generic:selectable="custom-radio" />

这样,在生成这个selectable-group组件的实例时,"selectable"节点会生成“custom-radio”组件实例。类似地,如果这样使用:

<selectable-group generic:selectable="custom-checkbox" />

“selectable”节点则会生成“custom-checkbox”组件实例。

上述的 custom-radiocustom-checkbox 需要包含在这个 swan 对应 json 文件的 usingComponents 定义段中。

{
    "usingComponents": {
        "custom-radio": "path/to/custom/radio",
        "custom-checkbox": "path/to/custom/checkbox"
    }
}

# 抽象节点的默认组件

抽象节点可以指定一个默认组件,当具体组件未被指定时,将创建默认组件的实例。默认组件可以在 componentGenerics 字段中指定:

{
    "componentGenerics": {
        "selectable": {
            "default": "path/to/default/component"
        }
    }
}

节点的generic引用generic:xxx="yyy"中,值yyy只能是静态值,不能包含数据绑定。因而抽象节点特性并不适用于动态决定节点名的场景。

# 常见问题

# Q :createSelectorQuery 如何获取组件内的节点

A: swan.createSelectorQuery()返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点,并使用 boundingClientRect 等方法选择需要查询的信息。

代码示例: 获取自定义组件内节点

// 自定义组件逻辑 (custom.js)
Component({
    properties: {
        // 定义了name属性,可以在使用组件时,由外部传入。此变量可以直接在组件模板中使用
        name: {
            type: String,
            value: 'swan',
        }
    },
    data: {
        age: 1
    },
    methods: {
        queryMultipleNodes: function(){
            var SelectorQuery = swan.createSelectorQuery().in(this)
            SelectorQuery.select('.name').boundingClientRect(function(res){
                swan.showModal({
                    title: '节点信息为',
                    content: JSON.stringify(res)
                });
            }).exec()
        }
    }
});

代码示例: 获取基础组件内节点

queryNodeInfo() {
    const query = swan.createSelectorQuery();
    query.select('.target').boundingClientRect();
    query.exec(res => {
        console.log(res)
    });
}