前言
微信小程序自1月19號(hào)發(fā)布后,可謂是有人歡喜有人憂啊.曾經(jīng)對(duì)它一度抱有各種期待的前端工作者們?cè)趶埧偟囊痪渚?"不行","不能"中小失所望.
但它作為一種輕型應(yīng)用工具,給我們開發(fā)者帶來的便利也是無可厚非的.
而自定義組件這個(gè)大功能呢也是從小程序基礎(chǔ)庫版本 1.6.3 開始支持的，低版本需做兼容處理,在搜了網(wǎng)上一堆微信小程序自定義組件的說明后,我好像發(fā)現(xiàn)都沒有太好的介紹到它,所以今天在這里博主也是想給大家仔細(xì)的介紹介紹微信小程序的這個(gè)自定義功能,有說的不好的地方望小伙們指正,謝謝!(?▽?)
使用自定義組件
應(yīng)用場(chǎng)景:
當(dāng)我們?cè)谠O(shè)計(jì)我們項(xiàng)目的時(shí)候會(huì)發(fā)現(xiàn)在不同的頁面中,有時(shí)候會(huì)用到相同的功能模塊,此時(shí)我們就可以將這些相同的部分提取出來并且單獨(dú)設(shè)為一個(gè)"頁面",然后在要應(yīng)用到它的地方引用就可以了,以上就是我對(duì)自定義組件的個(gè)人理解,具體做法請(qǐng)閱讀以下內(nèi)容.
1.創(chuàng)建自定義組件
在上面我介紹了,自定義組件其實(shí)就像是一個(gè)頁面,所以我們?cè)诰帉懰臅r(shí)候也應(yīng)該像設(shè)計(jì)頁面一樣,具備json wxml wxss js這四個(gè)文件.
在這里博主就以編寫案例的形式向大家介紹自定義組件.
一. 前期準(zhǔn)備
1.首先,新建一個(gè)名為wxcomponent的項(xiàng)目,
2.在pages文件夾下創(chuàng)建一個(gè)components文件夾用來盛放我們所有的自定義組件.
3.在components文件夾下創(chuàng)建一個(gè)cpt的文件夾用來盛放cpt這個(gè)自定義組件,并分別創(chuàng)建好對(duì)應(yīng)的配置文件,如下圖:
二. 自定義組件聲明
要在cpt.json中進(jìn)行自定義組件聲明,也就是告訴開發(fā)者這是一個(gè)組件:
{
"component": true
}
三. 設(shè)計(jì)組件結(jié)構(gòu)
在 wxml 文件中編寫組件模版，在 wxss 文件中加入組件樣式:
cpt.wxml文件
<!-- 這是自定義組件的內(nèi)部WXML結(jié)構(gòu) -->
<view class="inner">
{{innerText}}
<button bindtap='customMethod'>點(diǎn)擊</button>
<slot></slot>
</view>
cpt.wxss文件
/* 這里的樣式只應(yīng)用于這個(gè)自定義組件 */
.inner {
color: red;
}
這里的`<slot></slot>暫時(shí)可以不用管它.
并且自定義組件在設(shè)計(jì)結(jié)構(gòu)的時(shí)候是不應(yīng)該使用給便簽加上id或者使用屬性選擇器和標(biāo)簽名選擇器的.
這是因?yàn)榻M件就是被我們那里重用的,而頁面中只能允許有一個(gè)id.
四: 注冊(cè)組件
在自定義組件的js文件中,需要使用 Component() 來注冊(cè)組件睁本，并提供組件的屬性定義队丝、內(nèi)部數(shù)據(jù)和自定義方法,如在cpt.js中:
Component({
properties: {
// 這里定義了innerText屬性，屬性值可以在組件使用時(shí)指定
innerText: {
type: String,
value: 'default value',
}
},
data: {
// 這里是一些組件內(nèi)部數(shù)據(jù)
someData: 1
},
methods: {
// 這里是一個(gè)自定義方法
customMethod: function () {
console.log('customMethod')
}
}
})
五: 使用自定義組件
這里我為了簡便一點(diǎn),就直接用自帶的logs頁面來進(jìn)行自定義組件的調(diào)用吧.
首先,你應(yīng)該在你要用組件的那個(gè)頁面中引用聲明.也就是在.json文件.
如在logs.json中:
{
"navigationBarTitleText": "查看啟動(dòng)日志",
"usingComponents": {
"component-tag-name": "../components/cpt/cpt"
}
}
接下來我們就可以在頁面中像使用其他組件一樣的使用自定義組件了.
比如我在logs.wxml中使用:
<!--logs.wxml-->
<view class="container log-list">
<!-- 以下是對(duì)一個(gè)自定義組件的引用 -->
<component-tag-name inner-text="Some text"></component-tag-name>
</view>
跳轉(zhuǎn)到logs頁面如下圖的效果:
六: 使用slot
在上面的例子中,在cpt.wxml中寫入了<slot></slot>標(biāo)簽,在引用cpt這個(gè)組件時(shí)我們要是不在組件的標(biāo)簽中寫入其他的內(nèi)容,是不會(huì)顯示<slot>標(biāo)簽的
也就是說如果我們把上面logs.wxml改動(dòng)一下:
<!--logs.wxml-->
<view class="container log-list">
<!-- 以下是對(duì)一個(gè)自定義組件的引用 -->
<component-tag-name inner-text="Some text">
<view>這里是插入到組件slot中的內(nèi)容</view>
</component-tag-name>
</view>
此時(shí)查看logs頁面:
并且<slot></slot>的位置在哪里也是由你在設(shè)計(jì)cpt組件時(shí)決定的
上面的例子中我是將slot放在button之下:
<!-- 這是自定義組件的內(nèi)部WXML結(jié)構(gòu) -->
<view class="inner">
{{innerText}}
<button bindtap='customMethod'>點(diǎn)擊</button>
<slot></slot>
</view>
你也可以將它放在其他位置來達(dá)到不同的效果.
七: 使用多個(gè)slot
正常情況下,一個(gè)組件中只有一個(gè)slot,但有時(shí)候我們的自定義組件可能不止使用一個(gè)slot,別怕,我們的微信小程序也是可以允許你這樣的.
需要使用多slot時(shí)腹缩，可以在組件js中聲明啟用
1.在cpt.json(你自定義組件的json文件)中聲明
Component({
options: {
multipleSlots: true // 在組件定義時(shí)的選項(xiàng)中啟用多slot支持
},
properties: { /* ... */ },
methods: { /* ... */ }
})
2.此時(shí)屿聋，可以在這個(gè)組件的wxml中使用多個(gè)slot,以不同的 name 來區(qū)分:
<!-- 這是自定義組件的內(nèi)部WXML結(jié)構(gòu) -->
<view class="inner">
<slot name="header"></slot> <-- 一定要記得使用name屬性 -->
{{innerText}}
<button bindtap='customMethod'>點(diǎn)擊</button>
<slot name="footer"></slot>
</view>
3.使用時(shí)，用 slot 屬性來將節(jié)點(diǎn)插入到不同的slot上藏鹊。
<!--logs.wxml-->
<view class="container log-list">
<!-- 以下是對(duì)一個(gè)自定義組件的引用 -->
<component-tag-name inner-text="Some text">
<view slot="header">頭部的內(nèi)容</view>
<view slot="footer">底部的內(nèi)容</view>
</component-tag-name>
</view>
后語
微信小程序中自定義組件的用法還有很多,比如組件生命周期,事件等等,更多的內(nèi)容可以參考官方文檔.
