? ??? ??? ???? ??? ?? ??? ???? ??? ?? ?? ??? ???? ??? ?????. ?? ???? ??? ??? ????!

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

組件的組成

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

首先，組件同頁(yè)面類似，都有一個(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ì)象，其中可以定義類似頁(yè)面的各種內(nèi)容，具體可參考 官方文檔

組件使用

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

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

???? ??

???? ??

?? ????? ???? ?????. . ????? ?? ??? ??? ????. ?? ?? ???? ?????? ?? ??? ???? ?? comments ????? ??? ?? ?? ??? ??? <code>search-bar?? ????? ?????. ??> ?? ??.

? ??? ?? ?? ????? ??? ???? ?? ???? ????? ???? ???? ????? ???? ??? index.wxml? ?????. ??? ???? ?? ?? ??? ?? ??????.

??????????comComponents/search-bar/index.wxml? ?? ?? ??? ?? ?? ? ????. ?? ?? ? ? ??? ??? ??? ???? ????? ??? ??? ? ??? ?????. ??. ?? ??. ??????? ???? ? ?? ??? ?? ??? ??? ?? ??? ?? ?? ?? ??? ??? ? ??? ??? ???? ???? ????? ???? ??? ????. ?? ?? ???? pages/index/index.wxml ??? ?? ???? comComponents/search-bar/index.wxml? ??????. ??? ??? code >??? <code>assets/images ??? ??? ?????. ? ??? ??? ?? ??? ??? ???? ???? ???. ??

???? ???

??????? ?? ??? ???? ???? ????????????????

???? ??

????? ?? ????? ??? ??? ??? ????? ??? ????? ?? ?????? ???? ?? ??? index.json? ???? ???. ?? ?? ???? ?? ??? ?? ? ????? ??? ?? ??? ?????. ?????? index.json?? "comComponent": true? ???? ??? ?? ???? ???? ???????????? ??? index.js ????? ????? ?? ???? <code>Component()? ??????. ? ???? ????? ???? ??? ??? ???? ??? ? ?? ?????. ="https://developers .weixin.qq.com/miniprogram/dev/framework/custom-comComponent/" target="_blank" ref="nofollow noopener noreferrer">?? ????????

???? ???

??????? ?? ??? ?? ? ?? ????? ??? ? ????. ? ??? ?? ????? ?????? ???. ?? ??? ???? ?? ??????????? ? "search-bar"? ??? ???? ?? ????? ??? ??? ?????. ?? ????? ?? ?? ? input ? image? ????, ?? ??? ?? ?? ???? ?? ?? ??? ??? ??? ?????. ?? ?? ??? ??? ????. ??? image? ?????. ???? ??? ??? ?????. ????? ???? ?? ?? ? ??? ?? ???? ????? ??? ? ????????????

? ???? ??? ?? ??? ??? ???? ??? ?? ?? ??? ?? ??? ??? ???? ????? ?? ????? ??? ??? ?? ???? ?? ??? ? ????. ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ? ??, ?? ????? ??? ??? ?? ???? ??? ? ? ????(??? ?? ???? ?? ??? ?? ???, ?? ??? ??? ????? ???)

?? ????? ??? ?? ???? ?? ??, ?? ???? ? ???? ?? ??? ?? ? ?? ?? ??? ??????.

??? ?? ?? ??

??? ??? ?? ?? ??? ??? ? ??? ?? ?? ?? ??? ?????. 內(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)簽名稱即可。

這里我們通過(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字段訪問(wèn)了列表的數(shù)據(jù)項(xiàng)并進(jìn)行展示。還使用了內(nèi)置標(biāo)簽image的mode

??? ??? ?? ?? ?? ???? ??? ? ????? ???? ?? ??? ?????. ? ??? ?? ????? ???? ???.

?? ????? ???? 4?? ?? ??? ??? ?? ?????. ? ? index.js? index.json? ?? ??? ?? ?????.

???? , index.wxml ? index.wxss? ???? list ?? ??? ?? ??? ?????. ????????? ?? ????? loop traversal ??? ???? ???. ? ??? ?? ??? ????? ???? ???? ??? ????. ??????????? , index.js? ?? ??? ??? ?? ?? ???? ??? ?? ????????????? ?? ??? index.wxml?? wx:for? ???? traverse? index.js? properties ??? ???? ??? ???? ??? ??? ?????. ?? ?? ?? ????? ?? ??? ???? ?? ??? ??? ?????. ?? ??? ??? ??index.json?? ?? ??? ?? ??? ?? ??? ?? ??? ???? ?? ?? ??? ?? ??? ???? ????. ??????????????? ??? ??? ?????. items ??? ??? ??? ??? ?? ?? ??? ?? ???? ????, ???? ???? ??? ??? listData?? ?????. ?? ???? ??? ???? ???. ? ???? ????? ?? index.js? data? ????. ??????

????? ? ????

??????? ???? ??, ???? ???? ?? ?? ??? ?? ???? ???? ? ???? ?? <code>??? ?? ?? ???? ???? ? ????? ?? ???? ? ??? ????. ?????? ?? ??? ?? ?? ??? ?? ?? ?? ???? ??? ???? ??? ????? ?? ??? ????? ??? ???? ?? ?????. ?? ?? ???? ?? ??? ???? ?? ???? ??? ?? ??? ?? ???? ?? ??? ??? ? ????. ??

?????? ?????????????? ???? ???? ?? ?? ??? ?? ?? ?? ?? ??? ??? ??? ??? ???? ???? ???. code >??? ??? ???? ??, ??? ??? ? ???? ???? ??? ???? ???? ????????<img src="https:%20<code>listData%EC%97%90%20%EB%8B%A4%EC%9D%8C%20%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A5%BC%20%EC%A0%95%EC%9D%98%ED%95%A9%EB%8B%88%EB%8B%A4.%20//img%20.php.cn/upload/image/401/959/787/1636685634217080.png" title="1636685634217080.png" alt="1?? ?????? ??? ?? ?? ??? ???? ??? ?? ??? ??">??????? ? ??? ?? ???? ???? ??? ??? ??? ?????. ?, ? ??? ???? ??? ??? ???? text ??? ?? ?? ???? ???? image ??? ????. ???. ?????? ?? ?? ?? ??? ???? ? ??? ??? ???? item ??? ???? ??? ??? ??? ????? wx:for??? ?? ?????. > . ?? ?? image? mode ????? ??? ??? ?? ???? ???? ??? ?????. ?????????? ??? ???? ??????? ??

???? ?? ??? ?? ??? ????

????? ???? ??? ?? ????? ??? ?? ???? ?? ??, ????? ????????. Zhihu ?? ????? ??? ????.

??? Zhihu ?? ????? ??????, ???? ??? ?? ??? ?? ???? ??? ? ?? ????

Summary

????? ?? ?? ??? ??? ?????. ??? ????? ?? ?? ??? ??? ??? ???? ?? ??? ??? ????自定義組件開(kāi)發(fā)的完成過(guò)程如下

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

通過(guò)如上方法，結(jié)合之前所講的頁(yè)面開(kāi)發(fā)

• ???? ??
• ???? ?? ? ?? / li>
• ???? ??
• ???? ???? ???

?? ??? ?? ?? ??? ??? ?? ??? ???? ??? ???? ?????. ??? ???? ??? ?? ??. ? ?, ??? ?? ??? ???? ?? ??? ??? ???? ?? ???? ???? ??? ? ??, ??? ??? ??? ?? ?? ? ???? ??? ??? ???? ??? ??? ?? ?? ??? ??? ? ????.

? ?? ????? ?? ??? ??? ????? ??

? ?????! ! ??

? ??? ?? ?????? ??? ?? ?? ??? ???? ??? ?? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!