實踐分享：小程式自定義元件開發

什麼是小程式自定義元件？

小程式自定義元件是小程式開發中常用的一種技術，它可以將小程式中常用的UI元件封裝成一個獨立的元件，並在不同的頁面中複用，從而提高小程式的程式碼可維護性和複用性。

自定義元件可以包含自定義的樣式、屬性、事件等，它們是一種獨立的封裝單元，可以在不同的頁面中被重複使用。

自定義元件的基本結構

自定義元件的基本結構包括三個檔案：.js、.wxml、.wxss。其中，.js檔案包含元件的屬性、方法和生命週期函式等，.wxml檔案包含元件的UI模板，.wxss檔案包含元件的樣式。

例如下面就是一個簡單的按鈕自定義元件示例：

我們以上圖為例進行說明：

元件模板檔案（custom-button.wxml）

<view class="custom-button {{className}}" bindtap="handleTap">
  <text>{{text}}</text>
</view>

元件樣式檔案（custom-button.wxss）

.custom-button {
  display: inline-block;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 28rpx;
}
.custom-button.active {
  background-color: #0059c6;
}

元件邏輯檔案（custom-button.js）

Component({
  properties: {
    text: String,
    className: String,
  },
  methods: {
    handleTap() {
      this.triggerEvent('tap', {}, {});
    },
  },
});

在上面的示例中，自定義元件為一個簡單的按鈕元件，包含一個文字標籤和一個點選事件處理函式。其中，properties屬性用於定義元件的屬性，methods屬性用於定義元件的方法。

如何開發自定義元件？

介紹了什麼是自定義元件後，再看看如何開發一個簡單的自定義元件，步驟如下：

1. 建立自定義元件資料夾

在小程式專案的根目錄下建立一個名為“components”的資料夾，用於存放自定義元件。在“components”資料夾下建立一個新的資料夾，例如“custom-button”，用於存放自定義元件。

2. 編寫元件wxml模板

在“custom-button”資料夾下建立一個名為“custom-button.wxml”的檔案，並編寫元件的UI模板。例如，下面是一個簡單的按鈕元件的UI模板：

<view class="custom-button {{className}}" bindtap="handleTap">
  <text>{{text}}</text>
</view>

在上面的程式碼中，我們使用了小程式提供的標籤和元件，例如view、text和bindtap等。

3. 編寫元件wxss樣式

在“custom-button”資料夾下建立一個名為“custom-button.wxss”的檔案，並編寫元件的樣式。例如，下面是一個簡單的按鈕元件的樣式：

cssCopy code
.custom-button {
  display: inline-block;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 28rpx;
}
.custom-button.active {
  background-color: #0059c6;
}

在上面的程式碼中，我們使用了小程式提供的樣式屬性和單位，例如display、padding、border-radius和background-color等。

4. 編寫元件js邏輯

在“custom-button”資料夾下建立一個名為“custom-button.js”的檔案，並編寫元件的邏輯。例如，下面是一個簡單的按鈕元件的邏輯：

Component({
  properties: {
    text: String,
    className: String,
  },
  methods: {
    handleTap() {
      this.triggerEvent('tap', {}, {});
    },
  },
});

在上面的程式碼中，我們使用了小程式提供的Component建構函式來建立一個自定義元件，其中properties屬性用於定義元件的屬性，methods屬性用於定義元件的方法。

5. 在頁面中引入元件

在需要使用自定義元件的頁面中，可以透過以下方式引入元件：

<custom-button text="按鈕" className="active" bind:tap="handleButtonTap"></custom-button>

在上面的程式碼中，我們使用了自定義元件的標籤名稱“custom-button”，並設定了元件的屬性和事件處理函式。

自定義元件還能怎麼用？

小程式自定義元件是一種非常有用的技術，可以將小程式中常用的UI元件封裝成一個獨立的元件，並在不同的頁面中複用。除了上面介紹的如何開發自定義元件，包括建立元件資料夾、編寫元件模板、樣式和邏輯，以及在頁面中引入元件。其實我們還可以將已經開發的自定義元件放到除微信小程式以為的小程式中甚至App中使用。

例如我們可以直接將已開發完成的自定義放到相容微信小程式語法的工具中，例如  FinClip 除了能直接執行我們的自定義元件外，還可以將整個微信小程式執行起來，後續能夠透過整合 SDK 的方式把小程式直接放到自有的 App 中執行，相當於復刻了微信的能力。對於既有小程式，也有 App 的公司來講一次開發實現了多端執行。

當然自定義元件的開發和使用還有很多值得探索的地方，希望瞭解的小夥伴能夠交流起來。