前言
微信小程序自1月19號發布后,可謂是有人歡喜有人憂啊.曾經對它一度抱有各種期待的前端工作者們在張總的一句句:"不行","不能"中小失所望.
但它作為一種輕型應用工具,給我們開發者帶來的便利也是無可厚非的.
而自定義組件這個大功能呢也是從小程序基礎庫版本 1.6.3 開始支持的，低版本需做兼容處理,在搜了網上一堆微信小程序自定義組件的說明后,我好像發現都沒有太好的介紹到它,所以今天在這里博主也是想給大家仔細的介紹介紹微信小程序的這個自定義功能,有說的不好的地方望小伙們指正,謝謝!(?▽?)
使用自定義組件
應用場景:
當我們在設計我們項目的時候會發現在不同的頁面中,有時候會用到相同的功能模塊,此時我們就可以將這些相同的部分提取出來并且單獨設為一個"頁面",然后在要應用到它的地方引用就可以了,以上就是我對自定義組件的個人理解,具體做法請閱讀以下內容.
1.創建自定義組件
在上面我介紹了,自定義組件其實就像是一個頁面,所以我們在編寫它的時候也應該像設計頁面一樣,具備json wxml wxss js這四個文件.
在這里博主就以編寫案例的形式向大家介紹自定義組件.
一. 前期準備
1.首先,新建一個名為wxcomponent的項目,
2.在pages文件夾下創建一個components文件夾用來盛放我們所有的自定義組件.
3.在components文件夾下創建一個cpt的文件夾用來盛放cpt這個自定義組件,并分別創建好對應的配置文件,如下圖:
二. 自定義組件聲明
要在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;
}
這里的`<slot></slot>暫時可以不用管它.
并且自定義組件在設計結構的時候是不應該使用給便簽加上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頁面如下圖的效果:
六: 使用slot
在上面的例子中,在cpt.wxml中寫入了<slot></slot>標簽,在引用cpt這個組件時我們要是不在組件的標簽中寫入其他的內容,是不會顯示<slot>標簽的
也就是說如果我們把上面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></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>
后語
微信小程序中自定義組件的用法還有很多,比如組件生命周期,事件等等,更多的內容可以參考官方文檔.
