微信小程序 - 自定义组件支持外部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;
  }
  

• 效果