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

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

元件的組成

元件結構

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

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

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

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

元件樣式

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

#元件宣告

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

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

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

#元件使用

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

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

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

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

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

內容清單元件

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

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

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

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

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

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

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

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

data和properties

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

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

資料傳入

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

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

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

並透過一系列樣式的寫

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

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

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

總結

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

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

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

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

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