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

我們開(kāi)發(fā)了一個(gè)首頁(yè)常見(jiàn)的搜索輸入框，但其代碼是直接寫(xiě)在首頁(yè)文件中的，所以這樣還不能稱(chēng)為是一個(gè)組件。這篇我們來(lái)介紹一下如何編寫(xiě)一個(gè)完整的小程序組件。【相關(guān)學(xué)習(xí)推薦：小程序開(kāi)發(fā)教程】

組件的組成

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

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

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

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

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

組件樣式

同樣地，我們將之前寫(xiě)好的組件樣式也粘過(guò)來(lái)

組件聲明

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

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

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

組件使用

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

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

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

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

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

內(nèi)容列表組件

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

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

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

接著，我們通過(guò)index.wxml和index.wxss的編寫(xiě)來(lái)完成列表組件的元素定義。

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

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

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

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

data和properties

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

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

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

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

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

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

并通過(guò)一系列樣式的編寫(xiě)

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

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

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

總結(jié)

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

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

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

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問(wèn)：編程入門(mén)！！

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