自定義元件

開發者可以將頁面內的功能模組抽象成自定義元件，以便在不同的頁面中重複使用；也可以將複雜的頁面拆分成多個低耦合的模組，有助於程式碼維護。自定義元件在使用時與基礎元件非常相似。

為什麼使用自定義元件

建立元件的流程

1>專案根目錄下建立一個components檔案（預設命名檔案），在資料夾下建立一個元件資料夾，在元件資料夾下，建立對應的四個元件檔案

注意：每個元件都有四個檔案components.wxml ， component.wxss ， component.json ， component.js

components.wxml：元件的模板檔案

component.wxss ：元件的樣式檔案

component.json

{
  "component": true,  //告訴小程式，這是一個元件，如果當做元件使用，這個屬性設定為true
  "usingComponents": {}  //使用其他的元件
}

component.js

// pages/components/heads/heads.js
Component({    //定義元件，記錄了這個元件的所有邏輯任務
  /*** 元件的屬性列表*/
  properties: {},
/*** 元件的初始資料*/
  data: {},
/*** 元件的方法列表*/
  methods: {}
})

使用元件

在新建的資料夾中使用自定義的元件

{
  "usingComponents": {
    "heads":"../components/heads/heads"    //使用鍵值對的形式，“自定義元件的名字”：“自定義元件的地址”
  }
}

在新建資料夾的.wxml檔案中以標籤的形式使用該元件

<!--pages/page1/page1.wxml-->
<text>pages/page1/page1.wxml</text>
<heads>
</heads>

案例

自定義元件名稱nav

<!--pages/components/nav/nav.wxml-->
<view class
 
="nav">
<view 
    wx:for="{{arr}}" 
    wx:key="id"
    class="{{a==index?'active':''}}"
    bindtap="click"
    data-index="{{index}}"
    >
    {{item.title}}</view>
</view>

// pages/components/nav/nav.js
Component({
  /**
   * 元件的屬性列表
   */
  properties: {

  },

  /**
   * 元件的初始資料
   */
  data: {
    arr:[{
      "id":0,
      "title":"推薦",
    },{
      "id":1,
      "title":"排行",
    },{
      "id":2,
      "title":"分類",
    },{
      "id":3,
      "title":"歌手",
    },{
      "id":4,
      "title":"MV",
    }],
      a:0
  },

  /**
   * 元件的方法列表
   */
  methods: {
      click:function(e){
         var index=e.target.dataset.index;
         this.setData({
           a:index
         })
         console.log(index)
        // console.log(e)
      }
  }
})

在使用元件的.json檔案中引入該檔案並在.wxml檔案中使用元件

{
  "usingComponents": {
    "nav":"../components/nav/nav"
  }
}

注意：

• data-index自定義元件屬性
• 列表迴圈注意item和index關鍵字
• 元件中的事件函式放在methods中