淺析如何在小程式中開發一個內容清單元件

這篇文章跟大家分享一個小程式開發實戰，介紹一下怎麼開發一個內容清單元件，希望對大家有幫助！

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

元件的組成

元件結構

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

上面提到，元件其實跟頁面很像，都由一個目錄組成，所以自然其實要展示的內容也都由index.wxml進行編寫。所以我們直接將之前關於搜尋框的部分貼過來。

貼到components/search-bar/index.wxml後，程式碼格式可能會不太好，可以在文件內容的空白地方右鍵，或選取程式碼，然後點選格式化文件進行自動格式化。

這裡要注意的是，如果我們的結構文件中如果有資源的位置引用，當修改文件位置後，要確認修改後的位置對於資源的引用是否正確。例如這裡，我們將原本pages/index/index.wxml下的內容貼到components/search-bar/index.wxml，其中image標籤引用了assets/images下的文件，需要確認新位置下的圖片引用路徑仍然有效。

元件樣式

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

#元件宣告

這樣，我們就完成了元件的結構和樣式定義，但開發者工具還不認為這是一個元件，所以需要我們在元件目錄中建立index.json宣告這個目錄是一個有效的元件，方法如下圖。

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

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

#元件使用

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

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

經過上面的元件引用聲明，我們即可在頁面結構檔中進行元件的使用

在此過程中，如遇到右下角控制台報錯，可透過點擊開發者工具頂部中央的編譯按鈕對專案進行重新編譯，以對各種檔案進行重寫解析。如果經過編譯還有報錯，那麼一方面可以檢查程式碼中是否確實存在錯誤，另一方面可透過重啟開發者工具進行嘗試（因為開發者工具本身也存在一定bug，有時候會偶發奇怪的問題）

另外，我在開發者工具的設定中按照個人開發習慣進行了一些列自訂的設置，例如自動儲存和程式碼縮排等，可供參考。

內容清單元件

那麼介紹完一個完整的自訂元件組成後，我們接著來完成內容列表組件的開發。

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

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

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

既然是列表，那麼就會用到小程式中的循環遍歷語法，關於這部分可參考 官方文件 進行學習，具體使用如下。

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

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

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

data和properties

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

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

資料傳入

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

可以看到，列表的每一項要剛好符合我們元件所使用的資料結構，即每個資料項都有text欄位用來展示正文內容，並且有image字段用於展示正文的配圖。

然後回到我們的元件內部，我們根據wx:for的語法，使用了代表每項資料的item欄位存取了清單的資料項並進行展示。也使用了內建標籤image的mode參數聲明了圖片展示的尺寸風格。

並透過一系列樣式的寫

最終使得頁面展現出的效果如下圖所示

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

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

總結

最後，我們總結今天學習了哪些內容。其實透過目錄可以清楚地看到，今天我們介紹了一個自訂元件開發的完成過程如下

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

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

更多程式相關知識，請造訪：程式設計入門！ ！

以上是淺析如何在小程式中開發一個內容清單元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！