微信小程式自定義元件

LinDaiDai發表於2017-11-14
微信小程式元件

前言

微信小程式自1月19號釋出後,可謂是有人歡喜有人憂啊.曾經對它一度抱有各種期待的前端工作者們在張總的一句句:"不行","不能"中小失所望.
但它作為一種輕型應用工具,給我們開發者帶來的便利也是無可厚非的.
而自定義元件這個大功能呢也是從小程式基礎庫版本 1.6.3 開始支援的，低版本需做相容處理,在搜了網上一堆微信小程式自定義元件的說明後,我好像發現都沒有太好的介紹到它,所以今天在這裡博主也是想給大家仔細的介紹介紹微信小程式的這個自定義功能,有說的不好的地方望小夥們指正,謝謝!(╹▽╹)

使用自定義元件

應用場景:
當我們在設計我們專案的時候會發現在不同的頁面中,有時候會用到相同的功能模組,此時我們就可以將這些相同的部分提取出來並且單獨設為一個"頁面",然後在要應用到它的地方引用就可以了,以上就是我對自定義元件的個人理解,具體做法請閱讀以下內容.

1.建立自定義元件

在上面我介紹了,自定義元件其實就像是一個頁面,所以我們在編寫它的時候也應該像設計頁面一樣,具備json wxml wxss js這四個檔案.

在這裡博主就以編寫案例的形式向大家介紹自定義元件.

一. 前期準備
1.首先,新建一個名為wxcomponent的專案,
2.在pages資料夾下建立一個components資料夾用來盛放我們所有的自定義元件.
3.在components資料夾下建立一個cpt的資料夾用來盛放cpt這個自定義元件,並分別建立好對應的配置檔案,如下圖:

component.png
component.png

二. 自定義元件宣告
要在cpt.json中進行自定義元件宣告,也就是告訴開發者這是一個元件:

{
  "component": true
}複製程式碼

三. 設計元件結構
在 wxml 檔案中編寫元件模版，在 wxss 檔案中加入元件樣式:
cpt.wxml檔案

<!-- 這是自定義元件的內部WXML結構 -->
<view class="inner">
  {{innerText}}
  <button bindtap='customMethod'>點選</button>
  <slot></slot>
</view>複製程式碼

cpt.wxss檔案

/* 這裡的樣式只應用於這個自定義元件 */
.inner {
  color: red;
}複製程式碼

這裡的`暫時可以不用管它.

並且自定義元件在設計結構的時候是不應該使用給便籤加上id或者使用屬性選擇器和標籤名選擇器的.
這是因為元件就是被我們那裡重用的,而頁面中只能允許有一個id.

四: 註冊元件

在自定義元件的js檔案中,需要使用 Component() 來註冊元件，並提供元件的屬性定義、內部資料和自定義方法,如在cpt.js中:

Component({
  properties: {
    // 這裡定義了innerText屬性，屬性值可以在元件使用時指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 這裡是一些元件內部資料
    someData: 1
  },
  methods: {
    // 這裡是一個自定義方法
    customMethod: function () {
      console.log('customMethod')
    }
  }
})複製程式碼

五: 使用自定義元件
這裡我為了簡便一點,就直接用自帶的logs頁面來進行自定義元件的呼叫吧.
首先,你應該在你要用元件的那個頁面中引用宣告.也就是在.json檔案.
如在logs.json中:

{
  "navigationBarTitleText": "檢視啟動日誌",
  "usingComponents": {
    "component-tag-name": "../components/cpt/cpt"
  }
}複製程式碼

接下來我們就可以在頁面中像使用其他元件一樣的使用自定義元件了.
比如我在logs.wxml中使用:

<!--logs.wxml-->
<view class="container log-list">
  <!-- 以下是對一個自定義元件的引用 -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>複製程式碼

跳轉到logs頁面如下圖的效果:

result.png
result.png

六: 使用slot
在上面的例子中,在cpt.wxml中寫入了標籤,在引用cpt這個元件時我們要是不在元件的標籤中寫入其他的內容,是不會顯示標籤的

也就是說如果我們把上面logs.wxml改動一下:

<!--logs.wxml-->
<view class="container log-list">
  <!-- 以下是對一個自定義元件的引用 -->
  <component-tag-name inner-text="Some text">
    <view>這裡是插入到元件slot中的內容</view>
  </component-tag-name>
</view>複製程式碼

此時檢視logs頁面:

slot.png
slot.png

並且<slot></slot>的位置在哪裡也是由你在設計cpt元件時決定的
上面的例子中我是將slot放在button之下:

<!-- 這是自定義元件的內部WXML結構 -->
<view class="inner">
  {{innerText}}
  <button bindtap='customMethod'>點選</button>
  <slot></slot>
</view>複製程式碼

你也可以將它放在其他位置來達到不同的效果.

七: 使用多個slot
正常情況下,一個元件中只有一個slot,但有時候我們的自定義元件可能不止使用一個slot,別怕,我們的微信小程式也是可以允許你這樣的.
需要使用多slot時，可以在元件js中宣告啟用
1.在cpt.json(你自定義元件的json檔案)中宣告

Component({
  options: {
    multipleSlots: true // 在元件定義時的選項中啟用多slot支援
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})複製程式碼

2.此時，可以在這個元件的wxml中使用多個slot,以不同的 name 來區分:

<!-- 這是自定義元件的內部WXML結構 -->
<view class="inner">
  <slot name="header"></slot>    <-- 一定要記得使用name屬性 -->
  {{innerText}}
  <button bindtap='customMethod'>點選</button>
  <slot name="footer"></slot>
</view>複製程式碼

3.使用時，用 slot 屬性來將節點插入到不同的slot上。

<!--logs.wxml-->
<view class="container log-list">
  <!-- 以下是對一個自定義元件的引用 -->
  <component-tag-name inner-text="Some text">
    <view slot="header">頭部的內容</view>
    <view slot="footer">底部的內容</view>
  </component-tag-name>
</view>複製程式碼

後語

微信小程式中自定義元件的用法還有很多,比如元件生命週期,事件等等,更多的內容可以參考官方文件.

相關文章