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

抽象节点

抽象节点自小程序基础库版本 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-radio 和 custom-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 等方法选择需要查询的信息。

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

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• JS

 
 
 

  
  
  
// 自定义组件逻辑 (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()
  
  
  
 }
  
  
  
 }
  
  
  
});
 
 
 

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

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• JS

 
 
 

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