這篇文章跟大家分享一個(gè)小程式開發(fā)實(shí)戰(zhàn)，介紹一下怎麼開發(fā)一個(gè)內(nèi)容清單元件，希望對大家有幫助！

我們開發(fā)了一個(gè)首頁常見的搜尋輸入框，但其程式碼是直接寫在首頁檔案中的，所以這樣還不能稱為是一個(gè)組件。這篇我們來介紹如何寫一個(gè)完整的小程式元件。 【相關(guān)學(xué)習(xí)推薦：小程式開發(fā)教學(xué)】

元件的組成

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

#首先，元件同頁面類似，都有一個(gè)單獨(dú)的資料夾來維護(hù)。我們先在小程式專案中建立一個(gè)components目錄用於存放我們的元件，然後建立一個(gè)名為search-bar的目錄用來作為我們的搜尋框元件。

上面提到，元件其實(shí)跟頁面很像，都由一個(gè)目錄組成，所以自然其實(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)為這是一個(gè)元件，所以需要我們在元件目錄中建立index.json宣告這個(gè)目錄是一個(gè)有效的元件，方法如下圖。

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

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

#元件使用

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

#其中，"search-bar" 定義的是該元件的標(biāo)籤名稱，正如我們使用的小程式內(nèi)建元件input、image一樣，而後面的內(nèi)容則對應(yīng)該元件對於目前引用者的相對位置，這個(gè)位置的尋找方法同image標(biāo)籤中對於圖片位置的尋找。

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

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

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

內(nèi)容清單元件

那麼介紹完一個(gè)完整的自訂元件組成後，我們接著來完成內(nèi)容列表組件的開發(fā)。

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

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

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

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

然後，我們在index.js中定義元件接收的外部傳入的資料如下

這樣，在index.wxml中使用wx:for進(jìn)行遍歷的就是index.js中透過properties屬性接收到的外部傳入的資料清單。那麼我們隨即在首頁中引入該元件，並對其傳入真實(shí)的資料列表。使用方法仍然是先在index.json中宣告對元件的引用，然後在頁面檔案中使用引用時(shí)宣告的標(biāo)籤名稱即可。

這裡我們透過宣告items屬性，為我們定義的內(nèi)容清單元件傳入了數(shù)據(jù)，而該數(shù)據(jù)又來自首頁內(nèi)部定義的listData，這需要我們在首頁的index.js的data#中聲明該數(shù)據(jù)。

data和properties

#這裡我們來講data和properties有什麼不同，data是用來定義頁面或元件內(nèi)部自己的資料的，而properties是用來接收外部傳入的資料的，所以只有元件才有這個(gè)屬性。

例如對於內(nèi)容列表元件，其需要外部傳入真實(shí)的列表數(shù)據(jù)，所以在properties中相當(dāng)於自訂了元件的參數(shù)，然後外部使用此組件時(shí)可透過組件聲明的參數(shù)向其傳入資料。

資料傳入

因此，我們需要了解元件參數(shù)所需要的資料結(jié)構(gòu)是怎樣的，例如這裡我們定義的清單元件需要傳入一個(gè)資料列表，而資料列表中的每一項(xiàng)都包含正文和圖片，所以我們在首頁的listData定義如下資料

可以看到，列表的每一項(xiàng)要剛好符合我們元件所使用的資料結(jié)構(gòu)，即每個(gè)資料項(xiàng)都有text欄位用來展示正文內(nèi)容，並且有image字段用於展示正文的配圖。

然後回到我們的元件內(nèi)部，我們根據(jù)wx:for的語法，使用了代表每項(xiàng)資料的item欄位存取了清單的資料項(xiàng)並進(jìn)行展示。也使用了內(nèi)建標(biāo)籤image的mode參數(shù)聲明了圖片展示的尺寸風(fēng)格。

並透過一系列樣式的寫

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

#最後，我們透過真機(jī)預(yù)覽我們截止目前開發(fā)的小程式效果，並比較知乎小程式的首頁如下。

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

總結(jié)

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

• 元件建立
• 元件定義及宣告
• 元件引用
• 元件資料傳入

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

更多程式相關(guān)知識，請?jiān)煸L：程式設(shè)計(jì)入門！ ！

以上是淺析如何在小程式中開發(fā)一個(gè)內(nèi)容清單元件的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！