微信小程序> 小程序抽象节点

小程序抽象节点

浏览量:455 时间: 来源:mChales_Liu

目录

一、组件中使用抽象节点

二、使用包含抽象节点的组件

三、抽象节点的默认组件

 


一、组件中使用抽象节点

抽象节点:

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

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

代码示例:

<!-- selectable-group.wxml --><view wx:for="{{labels}}">  <label>    <selectable disabled="{{false}}"></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”组件实例。

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

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

 


三、抽象节点的默认组件

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

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

Tips:

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

 

 

 

 

 

 

 

 

 

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎