本篇文章給大家分享一個小程序開發(fā)實(shí)戰(zhàn)，介紹一下怎么開發(fā)一個內(nèi)容列表組件，希望對大家有所幫助！

我們開發(fā)了一個首頁常見的搜索輸入框，但其代碼是直接寫在首頁文件中的，所以這樣還不能稱為是一個組件。這篇我們來介紹一下如何編寫一個完整的小程序組件?！鞠嚓P(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

組件的組成

組件結(jié)構(gòu)

首先，組件同頁面類似，都有一個單獨(dú)的文件夾進(jìn)行維護(hù)。我們先在小程序項目中創(chuàng)建一個components目錄用于存放我們的組件，然后創(chuàng)建一個名為search-bar的目錄用來作為我們的搜索框組件。

上面提到，組件其實(shí)和頁面很像，都由一個目錄所組成，所以自然其要展示的內(nèi)容也都由index.wxml進(jìn)行編寫。所以我們直接將之前關(guān)于搜索框的部分粘貼過來。

粘貼到components/search-bar/index.wxml后，代碼格式可能會不太好，可以在文件內(nèi)容的空白地方右鍵，或者選中代碼，然后點(diǎn)擊格式化文檔進(jìn)行自動格式化。

這里需要注意的是，如果我們的結(jié)構(gòu)文件中如果有資源的位置引用，當(dāng)修改文件位置后，要確認(rèn)修改后的位置對于資源的引用是否正確。比如這里，我們將原本pages/index/index.wxml下的內(nèi)容粘貼至components/search-bar/index.wxml，其中image標(biāo)簽引用了assets/images下的文件，需要確認(rèn)新位置下的圖片引用路徑依然有效。

組件樣式

同樣地，我們將之前寫好的組件樣式也粘過來

組件聲明

這樣，我們就完成了組件的結(jié)構(gòu)和樣式定義，但開發(fā)者工具還不認(rèn)為這是一個組件，所以需要我們在組件目錄創(chuàng)建index.json聲明這個目錄是一個有效的組件，方法如下圖。

首先，我們需要在index.json中使用"component": true聲明這是一個組件

其次，我們需要在index.js中使用全局方法Component()方法注冊該組件，該方法的參數(shù)為一個對象，其中可以定義類似頁面的各種內(nèi)容，具體可參考 官方文檔

組件使用

那么完成了組件的基本定義，我們的組件就可以投入使用了。只要在需要使用該組件的地方進(jìn)行引入即可，引入方法比如在我們的首頁配置文件中聲明如下

其中，"search-bar"定義的是該組件的標(biāo)簽名稱，正如我們使用的小程序內(nèi)置組件input、image一樣，而后面的內(nèi)容則對應(yīng)該組件對于當(dāng)前引用者的相對位置，這個位置的尋找方法同image標(biāo)簽中對于圖片位置的尋找。

經(jīng)過上面的組件引用聲明，我們即可在頁面結(jié)構(gòu)文件中進(jìn)行組件的使用

在此過程中，如遇到右下角控制臺報錯，可通過點(diǎn)擊開發(fā)者工具頂部中央的編譯按鈕對項目進(jìn)行重新編譯，以對各種文件進(jìn)行重寫解析。如果經(jīng)過編譯還有報錯，那么一方面可以檢查代碼中是否確實(shí)存在錯誤，另一方面可通過重啟開發(fā)者工具進(jìn)行嘗試（因為開發(fā)者工具本身也存在一定bug，有時候會偶發(fā)奇怪的問題）

另外，我在開發(fā)者工具的設(shè)置中按照個人開發(fā)習(xí)慣進(jìn)行了一些列自定義的設(shè)置，比如自動保存和代碼縮進(jìn)等，可供參考。

內(nèi)容列表組件

那么介紹完一個完整的自定義組件組成后，我們接著來完成內(nèi)容列表組件的開發(fā)。

內(nèi)容列表顯然要必上面的搜索輸入框復(fù)雜一些，但對于組件的開發(fā)方式都一樣，我們只需要按照這種規(guī)則進(jìn)行組件的開發(fā)即可。

首先，我們創(chuàng)建好組成組件的4個核心文件如下，其中index.js和index.json同之前寫過的一樣。

接著，我們通過index.wxml和index.wxss的編寫來完成列表組件的元素定義。

既然是列表，那么就會用到小程序中的循環(huán)遍歷語法，關(guān)于這部分可參考 官方文檔 進(jìn)行學(xué)習(xí)，具體使用如下。

然后，我們在index.js中定義組件接收的外部傳入的數(shù)據(jù)如下

這樣，在index.wxml中使用wx:for進(jìn)行遍歷的就是index.js中通過properties屬性接收到的外部傳入的數(shù)據(jù)列表。那么我們隨即在首頁中引入該組件，并對其傳入真實(shí)的數(shù)據(jù)列表。使用方法依然是先在index.json中聲明對組件的引用，然后在頁面文件中使用引用時聲明的標(biāo)簽名稱即可。

這里我們通過聲明items屬性，為我們定義的內(nèi)容列表組件傳入了數(shù)據(jù)，而該數(shù)據(jù)又來源于首頁內(nèi)部定義的listData，這需要我們在首頁的index.js的data中聲明該數(shù)據(jù)。

data和properties

這里我們講一下data和properties有什么不同，data是用于定義頁面或組件內(nèi)部自己的數(shù)據(jù)的，而properties是用于接收外部傳入的數(shù)據(jù)的，所以只有組件才有這個屬性。

比如對于內(nèi)容列表組件，其需要外部傳入真實(shí)的列表數(shù)據(jù)，所以在properties中相當(dāng)于自定義了組件的參數(shù)，然后外部使用該組件時可通過組件聲明的參數(shù)向其傳入數(shù)據(jù)。

數(shù)據(jù)傳入

因此，我們需要了解一下組件參數(shù)所需要的數(shù)據(jù)結(jié)構(gòu)是怎樣的，比如這里我們定義的列表組件需要傳入一個數(shù)據(jù)列表，而數(shù)據(jù)列表中的每一項都包含正文和圖片，所以我們在首頁的listData定義如下數(shù)據(jù)

可以看到，列表的每一項要正好符合我們組件所使用的數(shù)據(jù)結(jié)構(gòu)，即每個數(shù)據(jù)項都有text字段用于展示正文內(nèi)容，并且有image字段用于展示正文的配圖。

然后回到我們的組件內(nèi)部，我們根據(jù)wx:for的語法，使用了代表每項數(shù)據(jù)的item字段訪問了列表的數(shù)據(jù)項并進(jìn)行展示。還使用了內(nèi)置標(biāo)簽image的mode參數(shù)聲明了圖片展示的尺寸風(fēng)格。

并通過一系列樣式的編寫

最終使得頁面展現(xiàn)出的效果如下圖所示

最后，我們通過真機(jī)預(yù)覽一下我們截止目前開發(fā)的小程序效果，并對比知乎小程序的首頁如下。

左側(cè)為知乎小程序的首頁，右側(cè)為我們自行開發(fā)的小程序，效果是不是還不錯。

總結(jié)

最后，我們總結(jié)一下今天學(xué)習(xí)了哪些內(nèi)容。其實(shí)通過目錄可以清晰地看到，今天我們介紹了一個自定義組件開發(fā)的完成過程如下

• 組件創(chuàng)建
• 組件定義及聲明
• 組件引用
• 組件數(shù)據(jù)傳入

通過如上方法，結(jié)合之前所講的頁面開發(fā)方法，我們完善了小程序開發(fā)的核心技能。之后，我們可以按照自己的設(shè)計，開發(fā)負(fù)責(zé)不同功能的小程序頁面，并且根據(jù)各個頁面所承載的功能及特點(diǎn)，開發(fā)一系列自定義組件，來達(dá)到可以靈活組合的效果。

更多編程相關(guān)知識，請訪問：編程入門?。?/p>

以上是淺析如何在小程序中開發(fā)一個內(nèi)容列表組件的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！