從小程式基礎庫版本1.6.3開始，小程式支援簡潔的元件化程式設計

為什麼寫元件呢？

主要是避免在不同的頁面中重複使用，也可以將複雜的頁面拆分成多個低耦合的模組，有助於程式碼維護。

自定義元件在使用時與基礎元件非常相似。

如何編寫一個自定義元件？

每個自定義元件由四個程式碼檔案組成：

json檔案 用於於放置一些最基本的元件配置

wxml 檔案 元件模版

wxss 檔案 元件的樣式，只在元件內部節點上生效

js 檔案 元件的 JS 程式碼，承載元件的主要邏輯

這四個檔案與編寫一個頁面時用到的四個檔案非常類似，但也有區別。下面將介紹如何利用這四個檔案編寫一個簡單的自定義元件。

1、元件配置

json 配置檔案資訊

這裡我們把檔案放置在小程式的 components目錄下 命名為 emptyPage。

命名為 emptyPage.json 。

{
  "component": true,
  "usingComponents": {}
}

2、元件模板

在同一目錄下，建立一個模版檔案 emptyPage.wxml

<view class='emptyPage-view' wx:if='{{isShow}}'>
  <image class='emptyPage-image' src='../../images/wuneirong.png'></image>
  <view class='emptyPage-text'>這裡什麼也沒有哦！</view>
</view>
 

3、元件樣式

在同一目錄下，建立一個模版檔案 emptyPage.wxss

.emptyPage-view{
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}

.emptyPage-image{
  margin-top: 266rpx;
  width: 360rpx;
  height: 188rpx;
}
.emptyPage-text{
  margin-top: 28rpx;
  font-family: PingFangSC-Regular;
  font-size: 28rpx;
  color: #C6C6C6;
  text-align: center
}
 

4、元件定義

元件的 JS 檔案中必須包含元件定義。定義時使用 Component 構造器：

Component({
  /**
   * 元件的屬性列表
   */
  properties: {
    isShow: Boolean,//是否顯示
  },

  /**
   * 元件的初始資料
   */
  data: {

  },

  /**
   * 元件的方法列表
   */
  methods: {

  }
})

簡單的 Component 構造器呼叫包含3個定義段：

methods 中的方法可以用來包含元件的事件回撥函式；

data 是元件的內部資料，可以用 this.setData 方法來改變；

properties 中宣告這個元件的屬性，上例中聲明瞭 isShow 屬性，這樣，元件外部在使用元件時就可以指定這個屬性的值。

這樣我們就編寫好了 emptyPage 這個元件。

如何使用自定義元件呢？

使用上面這個自定義元件的方法很簡單。

1、宣告元件

在需要使用這個元件的頁面所對應的 json 檔案中，新增下面的自定義元件宣告：

{
    "usingComponents": {
      "emptyPage": "/components/emptyPage/emptyPage"
    }
}

2、使用元件

在頁面對應的wxml檔案中使用    是否顯示該介面

    <emptyPage isShow='{{true}}' />

除了上述的基本功能外，自定義元件還提供了一組基礎介面，用來實現各種各樣的功能。

這裡只是寫一個簡單的小元件， 如果想學習更多最好到官網檢視更加詳細資訊

微信自定義元件地址