簡介小程序自定義組件

自定義Component

styleIsolation

當咱們在使用組件的頁面編寫自定義組件的樣式無效時，咱們能夠使用styleIsolation屬性的shared值

Page({
    options: {
     styleIsolation: 'shared'
    },
})
複製代碼

組件樣式的限制

1. 組件和引用組件的頁面不能使用id選擇器（#a）、屬性選擇器（[a]）和標籤名選擇器，請改用class選擇器。
2. 組件和引用組件的頁面中使用後代選擇器（.a .b）在一些極端狀況下會有非預期的表現，如遇，請避免使用。
3. 子元素選擇器（.a>.b）只能用於 view 組件與其子節點之間，用於其餘組件可能致使非預期的狀況。
4. 繼承樣式，如 font 、 color ，會從組件外繼承到組件內。
5. 除繼承樣式外， 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屬性

複製代碼