小程序组件模板与样式注意事项

1、抽象节点

使用场景：组件中使用其他组件但不确定使用哪一个组件

组件json中：

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

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

调用组件时

使用generic:selectable制定抽象组件的具体调用并在json中声明组件

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

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

 2、slot  指定name

组件中

<!-- 组件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>
</view>

调用时

 

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </component-tag-name>
</view>

 3、外部样式类与全局样式类

/* 组件 custom-component.js */
Component({
  externalClasses: ['my-class']
})

<!-- 组件 custom-component.wxml -->
<custom-component class="my-class">这段文本的颜色由组件外的 class 决定</custom-component>

<!-- 页面的 WXML -->
<custom-component my-class="red-text" />

 全局样式

/* 组件 custom-component.js */
Component({
  options: {
    addGlobalClass: true,
  }
})