简介小程序自定义组件

自定义Component

styleIsolation

当我们在使用组件的页面编写自定义组件的样式无效时，我们可以使用styleIsolation属性的shared值

Page({
    options: {
     styleIsolation: 'shared'
    },
})

组件样式的限制

组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。
组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
继承样式，如 font 、 color ，会从组件外继承到组件内。
除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。

#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */

externalClasses

自定义组件中怎么使用外部样式

Page({
  externalClasses: ['tag-class'],
})

wxml文件

  <view class="tag-class"></view>

page页面

  <v-tag tag-class="custom-class"></v-tag>

page页面的wxss

.custom-class {
  color:red
}

slot插槽

如果要使用具名slot，必须设置multipleSlots为true

Component({
  
  options: {
     multipleSlots: false, // 设置slot
  },
})

wxml文件

<view>
    <text></text>
    <slot name="number"></slot>
</view>

Behavior

behaviors是用于组件间代码共享的特性, 每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。每个组件可以引用多个 behavior ，behavior 也可以引用其它 Behavior

// behavior.js
module.exports = Behavior({
    behaviors: [],
    properties: {
      count: {
        type: Number
      }
    },
    methods: {
        getCount: function() {
            console.log(this.count)
        }
    }
})

组件中使用

const commonBehavior = require("../behavior.js");
Component({
    ...
    behaviors: [commonBehavior],
    ...
})

wxml文件

// v-tag组件中使用
<view>
  <text bindtap = "getCount">总数：{{ count }}</text>
  <slot></slot>
</view>

triggerEvent

触发自定义事件，类似emit wxml文件

// page页面
<v-tag bindmyevent="handleMyEvent">
</v-tag>

 handleEvent(detail) {
   console.log(detail)
 }

组件的js文件

// 自动触发myevent事件
   this.triggerEvent('myevent', {data: 233})

wxss文件中使用background-image无效

在wxss中是无法引用本地包文件中存放的图片的 background-image只支持线上图片和base64图片

// 方案一，使用网络图片
<view class="banner-img"></view>
.banner-img {
  height: 200rpx;
  width: 100%;
  background-size: cover;
  background-image: url(https://test-pulick.oss-cn-beijing.aliyuncs.com/data/1508923002430.png);
}

// 方案二，使用base64,
// 方案三，使用style属性
<view style="background-image: url(../../images/bg1.png);width: 200rpx;height: 200rpx;"></view>

// 方案四，使用image标签，设置z-index属性