后浪云百度小程序教程：抽象节点

2022-12-22
  • 抽象节点
    • 在组件中使用抽象节点
    • 使用包含抽象节点的组件
    • 抽象节点的默认组件
    • 常见问题
      • Q：createSelectorQuery 如何获取组件内的节点？

    抽象节点

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

    在组件中使用抽象节点

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

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

    代码示例

    在开发者工具中预览效果

     
 
 
      
  
  
  
    1. <!-- selectable-group.swan -->
      2. 
  
  
  
    2. <view s-for="{{labels}}">
      3. 
  
  
  
    3.  <label bindtap="itemTap" data-index="{{index}}">
      4. 
  
  
  
    4.  <selectable disabled="{{false}}" selected="{{selected[index]}}" name="{{name}}"></selectable>
      5. 
  
  
  
    5.  {{item}}
      6. 
  
  
  
    6.  </label>
      7. 
  
  
  
    7. </view>
      8.

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

     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  "componentGenerics": {
      3. 
  
  
  
    3.  "selectable": true
      4. 
  
  
  
    4.  }
      5. 
  
  
  
    5. }
      6.

    使用包含抽象节点的组件

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

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

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

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

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

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

     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  "usingComponents": {
      3. 
  
  
  
    3.  "custom-radio": "path/to/custom/radio",
      4. 
  
  
  
    4.  "custom-checkbox": "path/to/custom/checkbox"
      5. 
  
  
  
    5.  }
      6. 
  
  
  
    6. }
      7.

    抽象节点的默认组件

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

     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  "componentGenerics": {
      3. 
  
  
  
    3.  "selectable": {
      4. 
  
  
  
    4.  "default": "path/to/default/component"
      5. 
  
  
  
    5.  }
      6. 
  
  
  
    6.  }
      7. 
  
  
  
    7. }
      8.

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

    常见问题

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

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

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

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • JS
     
 
 
      
  
  
  
    1. // 自定义组件逻辑 (custom.js)
      2. 
  
  
  
    2. Component({
      3. 
  
  
  
    3.  properties: {
      4. 
  
  
  
    4.  // 定义了name属性，可以在使用组件时，由外部传入。此变量可以直接在组件模板中使用
      5. 
  
  
  
    5.  name: {
      6. 
  
  
  
    6.  type: String,
      7. 
  
  
  
    7.  value: 'swan',
      8. 
  
  
  
    8.  }
      9. 
  
  
  
    9.  },
      10. 
  
  
  
    10.  data: {
      11. 
  
  
  
    11.  age: 1
      12. 
  
  
  
    12.  },
      13. 
  
  
  
    13.  methods: {
      14. 
  
  
  
    14.  queryMultipleNodes: function(){
      15. 
  
  
  
    15.  var SelectorQuery = swan.createSelectorQuery().in(this)
      16. 
  
  
  
    16.  SelectorQuery.select('.name').boundingClientRect(function(res){
      17. 
  
  
  
    17.  swan.showModal({
      18. 
  
  
  
    18.  title: '节点信息为',
      19. 
  
  
  
    19.  content: JSON.stringify(res)
      20. 
  
  
  
    20.  });
      21. 
  
  
  
    21.  }).exec()
      22. 
  
  
  
    22.  }
      23. 
  
  
  
    23.  }
      24. 
  
  
  
    24. });
      25.

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

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • JS
     
 
 
      
  
  
  
    1. queryNodeInfo() {
      2. 
  
  
  
    2.  const query = swan.createSelectorQuery();
      3. 
  
  
  
    3.  query.select('.target').boundingClientRect();
      4. 
  
  
  
    4.  query.exec(res => {
      5. 
  
  
  
    5.  console.log(res)
      6. 
  
  
  
    6.  });
      7. 
  
  
  
    7. }
      8.
    版权声明：
    作者：后浪云
    链接：https://www.idc.net/help/186175/
    文章版权归作者所有，未经允许请勿转载。
    THE END
    IDC.NET智能小程序后浪云百度小程序
    Copyright © 2025 后浪云 网站地图