Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

WeChat Program Abstract Node


May 17, 2021 WeChat Mini Program Development Document


Table of contents


Abstract node

This feature has been supported since the base library version 1.9.6 of the small program.

Use abstract nodes in components

Sometimes, some nodes in a custom component template, whose corresponding custom components are determined not by the custom component itself, but by the caller of the custom component. This node can then be declared an "abstract node."

For example, we now implement a "selectable-group" component where you can place a custom-radio or checkbox. The wxml of this component can be written like this:

Code example:

<!-- selectable-group.wxml -->
<view wx:for="{{labels}}">
  <label>
    <selectable disabled="{{false}}"></selectable>
    {{item}}
  </label>
</view>

Where "selectable" is not any component declared in the usingComponents field of the json file, but is an abstract node. It needs to be declared in the componentGenerics field:

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

Use components that contain abstract nodes

When using selectable-group components, you must specify which component selectable is:

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

This way, when an instance of this selectable-group component is generated, the selectable node generates an instance of the custom-radio component. Similarly, if you use this:

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

The selectable node generates an instance of the custom-checkbox component.

Note: The custom-radio and custom-checkbox above need to be included in this wxml usingComponents definition segment for the json file.

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

The default component of the abstract node

Abstract nodes can specify a default component, and instances of the default component are created when the specific component is not specified. The default component can be specified in the componentGenerics field:

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

Tips:

  • The node's generic reference generic: xxx is "yyy" and the value yyy can only be static and cannot contain data binding. Therefore, abstract node characteristics are not applicable to scenarios that dynamically determine node names.