微信小程序之externalClasses属性

需求来源

若部分样式表依赖特定的外部逻辑、有2种方案可参考:
1. 传入判定条件、样式由component组件内部控制;
2. 采用外传入class的方式控制;
接下来看看组件的externalClasses属性是怎么使用的~

用法

1. Component js中用externalClasses定义外部样式类 >>> 声明为数组格式
2. Component wxml中绑定class样式类 >>> class="自定义类名"
3. Page wxml中写入该样式类 >>> 跟使用普通属性一样  >>> 自定义类名="页面/组件中声明的class"
4. Page wxss中写入对应的样式表

Tips: 2.7.1版本之后才支持多class、注意库兼容问题

Demo演示

// 组件层级该做的一些事情:
// comp.js
Component({
  externalClasses: ['outer-class']
})

// comp.wxml
<view class="outer-class">这段文本的颜色由外部class决定</view>

// 页面层级该做的一些事情:
// page.wxml
<comp outer-class="red-txt">红色</comp>
<comp outer-class="blue-txt">蓝色</comp>
<comp outer-class="red-txt large-txt"></comp>

// page.wxss
.red-txt{
  color: red;
}
.blue-txt{
  color: blue;
}
.large-txt{
  font-size: 100rpx;
}

接下来直观看看微信开发者工具-wxml-style会发现: 外部传进去的样式已作用到组件层.

总结

     在封装一些公共或业务组件, 若需要考虑暴露class给到使用方来决定该组件的部分样式, 可以考虑该属性。