微信小程序自定義組件

微信小程序自定義組件

從微信小程序基礎(chǔ)庫版本 1.6.3 開始，微信小程序支持簡潔的組件化編程，微信小程序開發(fā)者可以將頁面內(nèi)的功能模塊抽象成自定義組件，以便在不同的頁面中重復(fù)使用；也可以將復(fù)雜的頁面拆分成多個低耦合的模塊，有助于代碼維護，微信小程序自定義組件在使用時與基礎(chǔ)組件非常相似。

創(chuàng)建自定義組件

類似于頁面，一個自定義組件由 json wxml wxss js 4個文件組成。要編寫一個自定義組件，首先需要在 json 文件中進行自定義組件聲明（將 component 字段設(shè)為 true 可這一組文件設(shè)為自定義組件）：

{ "component": true }

同時，還要在 wxml 文件中編寫組件模版，在 wxss 文件中加入組件樣式，它們的寫法與頁面的寫法類似。具體細節(jié)和注意事項參見 組件模版和樣式 。

代碼示例：

<!-- 這是自定義組件的內(nèi)部WXML結(jié)構(gòu) --> <view class="inner"> {{innerText}} </view> <slot></slot>

/* 這里的樣式只應(yīng)用于這個自定義組件 */ .inner { color: red;
}

注意：在組件wxss中不應(yīng)使用ID選擇器、屬性選擇器和標(biāo)簽名選擇器。

在自定義組件的 js 文件中，需要使用 Component() 來注冊組件，并提供組件的屬性定義、內(nèi)部數(shù)據(jù)和自定義方法。

組件的屬性值和內(nèi)部數(shù)據(jù)將被用于組件 wxml 的渲染，其中，屬性值是可由組件外部傳入的。更多細節(jié)參見 Component構(gòu)造器 。

代碼示例：

Component({
  properties: { // 這里定義了innerText屬性，屬性值可以在組件使用時指定 innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: { // 這里是一些組件內(nèi)部數(shù)據(jù) someData: {}
  },
  methods: { // 這里是一個自定義方法 customMethod: function(){}
  }
})

使用自定義組件

使用已注冊的自定義組件前，首先要在頁面的 json 文件中進行引用聲明。此時需要提供每個自定義組件的標(biāo)簽名和對應(yīng)的自定義組件文件路徑：

{ "usingComponents": { "component-tag-name": "path/to/the/custom/component" }
}

這樣，在頁面的 wxml 中就可以像使用基礎(chǔ)組件一樣使用自定義組件。節(jié)點名即自定義組件的標(biāo)簽名，節(jié)點屬性即傳遞給組件的屬性值。

代碼示例：

<view> <!-- 以下是對一個自定義組件的引用 --> <component-tag-name inner-text="Some text"></component-tag-name> </view>

自定義組件的 wxml 節(jié)點結(jié)構(gòu)在與數(shù)據(jù)結(jié)合之后，將被插入到引用位置內(nèi)。

Tips:

• 對于基礎(chǔ)庫的1.5.x版本， 1.5.7 也有部分自定義組件支持。

• 因為WXML節(jié)點標(biāo)簽名只能是小寫字母和下劃線的組合，所以自定義組件的標(biāo)簽名也只能包含小寫字母和下劃線。

• 自定義組件也是可以引用自定義組件的，引用方法類似于頁面引用自定義組件的方式（使用 usingComponents 字段）。

• 自定義組件和使用自定義組件的頁面所在項目根目錄名不能以“wx-”為前綴，否則會報錯。

• 舊版本的基礎(chǔ)庫不支持自定義組件，此時，引用自定義組件的節(jié)點會變?yōu)槟J的空節(jié)點。