抽象节点

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

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

代码示例

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

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

在使用selectable-group组件时，必须指定”selectable”具体是哪个组件：

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

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

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

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

Q：createSelectorQuery 如何获取组件内的节点？

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

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

在开发者工具中打开

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

在开发者工具中打开

在 WEB IDE 中打开

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