微信小程序 - 自定义组件支持外部class或style样式及参数 (Component - externalClasses)

在小程序开发的时候，我们有时候需要自定义或者封装一个小组件用到多处导入使用，怎么样才能使用外部设置进来的 class 或者 style 样式呢。

通过 externalClasses 既可以导出当前组件需要外部设置的 class 属性，这个属性是个数组，例如：externalClasses: ['new-class', 'new-class', ...]。

my-component.js

Component({
  // 外部样式属性定义，其实也就是把内部需要外部支持的 class 名称放这里导出
  // 在外部直接使用导出的名称字段关联即可，可以同时导出多个，这里是数组 ['','',...]
  externalClasses: ['inner-class'],
  // 外部使用的属性定义
  properties: {
    // 这里定义了 innerText 属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value'
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  observers: {
    innerText(innerText) {
      // 当字段内容发生改变的时候，触发此函数
      console.log('内容变化了', innerText)
    },
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function () {
      console.log('点击了', this.data.innerText)
    }
  }
})

my-component.wxml

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner-class" bind:tap="customMethod">
  {{innerText}}
</view>

使用组件的页面 index.wxml

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <my-component inner-text="Some text" inner-class="inner-class"></my-component>
</view>

使用组件的页面 index.wxss

.inner-class {
  background-color: red;
}

效果