Dieser Artikel zeigt Ihnen eine praktische Anwendung der Entwicklung kleiner Programme und stellt vor, wie Sie eine Inhaltslistenkomponente entwickeln. Ich hoffe, dass er für alle hilfreich ist!

Wir haben ein allgemeines Sucheingabefeld auf der Homepage entwickelt, dessen Code jedoch direkt in die Homepage-Datei geschrieben wird, sodass er nicht als Komponente bezeichnet werden kann. In diesem Artikel stellen wir vor, wie man eine vollst?ndige kleine Programmkomponente schreibt. [Verwandte Lernempfehlungen: Mini-Tutorial zur Programmentwicklung]搜索輸入框，但其代碼是直接寫在首頁文件中的，所以這樣還不能稱為是一個(gè)組件。這篇我們來介紹一下如何編寫一個(gè)完整的小程序組件?！鞠嚓P(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

組件的組成

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

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

上面提到，組件其實(shí)和頁面很像，都由一個(gè)目錄所組成，所以自然其要展示的內(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è)組件，所以需要我們在組件目錄創(chuàng)建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)該組件對于當(dāng)前引用者的相對位置，這個(gè)位置的尋找方法同image

Komponentenzusammensetzung

Komponentenstruktur

Erstens ?hneln Komponenten Seiten . Für die Wartung gibt es einen separaten Ordner. Wir erstellen zun?chst ein components-Verzeichnis im Miniprogrammprojekt, um unsere Komponenten zu speichern, und erstellen dann ein Verzeichnis mit dem Namen search-bar, das wir als unser Suchfeld verwenden. Code> Komponente. <p></p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/648/415/640/1636685566350550.png" class="lazy" title="163668555976737Eine kurze Analyse, wie man eine Inhaltslistenkomponente in einem Miniprogramm entwickelt" alt="Eine kurze Analyse, wie man eine Inhaltslistenkomponente in einem Miniprogramm entwickelt"><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/648/415/640/1636685566350550.png" class="lazy" title="163668559877017Eine kurze Analyse, wie man eine Inhaltslistenkomponente in einem Miniprogramm entwickelt" alt="Eine kurze Analyse, wie man eine Inhaltslistenkomponente in einem Miniprogramm entwickelt">Oben Wie bereits erw?hnt, sind Komponenten tats?chlich Seiten sehr ?hnlich und bestehen aus einem Verzeichnis, sodass der anzuzeigende Inhalt natürlich auch von <code>index.wxml geschrieben wird. Deshalb fügen wir den vorherigen Teil über Suchfeld direkt ein.

??????????In components/search-bar/index.wxml, das Codeformat ist m?glicherweise nicht sehr gut. Sie k?nnen mit der rechten Maustaste auf eine leere Stelle im Dateiinhalt klicken oder den Code ausw?hlen und dann auf Formatieren klicken Dokument. Automatische Formatierung. ????Hier muss beachtet werden, dass wir, wenn in unserer Strukturdatei ein Ressourcenstandortverweis vorhanden ist, nach dem ?ndern des Dateispeicherorts best?tigen müssen, ob der ge?nderte Speicherort korrekt auf die Ressource verweist. Hier fügen wir beispielsweise den ursprünglichen Inhalt unter pages/index/index.wxml in components/search-bar/index.wxml ein, wobei image code >Das Tag bezieht sich auf Dateien unter <code>assets/images. Sie müssen best?tigen, dass der Bildreferenzpfad am neuen Speicherort noch gültig ist. ??

Komponentenstil

??In ?hnlicher Weise fügen wir den Komponentenstil ein, den wir zuvor geschrieben haben??????????

Komponentendeklaration

??Auf diese Weise haben wir die Struktur- und Stildefinition der Komponente abgeschlossen, aber die Entwicklertools denken noch nicht, dass es sich um eine Komponente handelt, also müssen wir index.json in erstellen Komponentenverzeichnis Deklarieren Sie dieses Verzeichnis als gültige Komponente, wie unten gezeigt. ????Zuerst müssen wir "component": true in index.json verwenden, um zu deklarieren, dass es sich um eine Komponente handelt????????Zweitens müssen wir index.js Verwenden Sie die globale Methode <code>Component(), um die Komponente zu registrieren. Der Parameter dieser Methode ist ein Objekt, das verschiedene Inhalte ?hnlich der Seite definieren kann ="https://developers .weixin.qq.com/miniprogram/dev/framework/custom-component/" target="_blank" ref="nofollow noopener noreferrer">Offizielle Dokumentation??????

Komponentenverwendung

??Nach Abschluss der grundlegenden Definition von Komponenten k?nnen unsere Komponenten verwendet werden. Führen Sie einfach die Komponente dort ein, wo Sie sie verwenden müssen. Die Einführungsmethode ist in unserer Homepage-Konfigurationsdatei wie folgt: .png" title="163668559386574Eine kurze Analyse, wie man eine Inhaltslistenkomponente in einem Miniprogramm entwickelt" alt="Eine kurze Analyse, wie man eine Inhaltslistenkomponente in einem Miniprogramm entwickelt"/>????Unter diesen definiert "search-bar" den Labelnamen der Komponente, wie wir ihn verwenden. in Komponenten des Miniprogramms sind die gleichen wie input und image, und der folgende Inhalt entspricht der relativen Position der Komponente zum aktuellen Referrer. Die Methode, dies zu finden Die Position ist dieselbe wie bei image. Suchen Sie nach der Bildposition im -Tag. ????Nach der obigen Komponentenreferenzdeklaration k?nnen wir die Komponente in der Seitenstrukturdatei verwenden????????

Wenn w?hrend dieses Vorgangs in der Konsole unten rechts ein Fehler auftritt, k?nnen Sie das Projekt neu kompilieren, indem Sie oben in der Mitte der Entwicklertools auf die Schaltfl?che ?Kompilieren“ klicken, um verschiedene Dateien neu zu schreiben und zu analysieren. Wenn nach dem Kompilieren immer noch Fehler auftreten, k?nnen Sie einerseits überprüfen, ob tats?chlich Fehler im Code vorliegen, und andererseits k?nnen Sie es versuchen, indem Sie die Entwicklertools neu starten (da die Entwicklertools selbst auch bestimmte Fehler aufweisen). und manchmal treten seltsame Probleme auf)

Darüber hinaus habe ich in den Einstellungen der Entwicklertools einige benutzerdefinierte Einstellungen vorgenommen, die meinen pers?nlichen Entwicklungsgewohnheiten entsprechen, wie z. B. automatisches Speichern und Codeeinrückung, als Referenz.

Inhaltslistenkomponente

Nach der Einführung einer vollst?ndigen benutzerdefinierten Komponente werden wir dann die Entwicklung von Inhaltslistenkomponente abschlie?en. 內(nèi)容列表組件的開發(fā)。

內(nèi)容列表顯然要必上面的搜索輸入框復(fù)雜一些，但對于組件的開發(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中定義組件接收的外部傳入的數(shù)據(jù)如下

這樣，在index.wxml中使用wx:for進(jìn)行遍歷的就是index.js中通過properties屬性接收到的外部傳入的數(shù)據(jù)列表。那么我們隨即在首頁中引入該組件，并對其傳入真實(shí)的數(shù)據(jù)列表。使用方法依然是先在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)部自己的數(shù)據(jù)的，而properties是用于接收外部傳入的數(shù)據(jù)的，所以只有組件才有這個(gè)屬性。

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

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

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

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

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

Die Inhaltsliste ist offensichtlich komplizierter als das Sucheingabefeld oben, aber die Entwicklungsmethode für Komponenten ist dieselbe. Wir müssen Komponenten nur gem?? dieser Regel entwickeln.

Zuerst erstellen wir die vier Kerndateien, aus denen die Komponente besteht, wie folgt, wobei index.js und index.json mit den zuvor geschriebenen identisch sind.

??Weiter , vervollst?ndigen wir die Elementdefinition von list Component, indem wir index.wxml und index.wxss schreiben. ????Da es sich um eine Liste handelt, wird die loop traversal-Syntax im Miniprogramm verwendet. Für diesen Teil siehe Offizielles Dokument Um zu erfahren, ist die spezifische Verwendung wie folgt. ????????Dann definieren wir die externen eingehenden Daten, die von der Komponente in index.js empfangen werden, wie folgt????????Verwenden Sie auf diese Weise wx:for in index.wxml, um traverse ist die Liste der extern übergebenen Daten, die über das Attribut properties in index.js empfangen werden. Dann stellen wir die Komponente sofort auf der Homepage vor und übergeben ihr die echte Datenliste. Die Verwendungsmethode besteht immer noch darin, zun?chst einen Verweis auf die Komponente in index.json zu deklarieren und dann den w?hrend des Verweises in der Auslagerungsdatei deklarierten Tag-Namen zu verwenden. ????????????Hier erkl?ren wir die Das Attribut items übergibt Daten für die von uns definierte Inhaltslistenkomponente, und die Daten stammen aus den innerhalb der Homepage definierten listData. Dies erfordert eine Deklaration diese Daten in data von index.js auf der Startseite. ??????

??Daten und Eigenschaften??

??Hier sprechen wir über den Unterschied zwischen data und properties, data wird verwendet, um eigene Daten innerhalb der Seite oder Komponente zu definieren, w?hrend <code>properties zum Empfang externer eingehender Daten verwendet wird, sodass nur Komponenten über diese Eigenschaft verfügen. ????Für die Inhaltslistenkomponente müssen beispielsweise die tats?chlichen Listendaten extern übergeben werden, sodass dies in Eigenschaften dem Anpassen der Parameter der Komponente entspricht. und dann die Komponente extern verwenden. über die von der Komponente deklarierten Parameter k?nnen Daten an sie übergeben werden. ??

??Daten werden übergeben??????Daher müssen wir verstehen, welche Datenstruktur für Komponentenparameter erforderlich ist, wie zum Beispiel die Listenkomponente, die wir hier definieren code >Eine Datenliste muss übergeben werden und jedes Element in der Datenliste enth?lt Text und Bilder, daher definieren wir die folgenden Daten in <code>listData auf der Homepage????????Sie k?nnen sehen, dass jedes Element in der Liste muss entspricht genau unserer Datenstruktur, die von der Komponente verwendet wird, d. h. jedes Datenelement verfügt über ein text-Feld zur Anzeige des Textinhalts und ein image-Feld zur Anzeige des begleitenden Bildes der Text. ????Dann verwenden wir zurück in unserer Komponente das Feld item, das jedes Datenelement darstellt, um auf die Datenelemente der Liste zuzugreifen und sie gem?? der Syntax von wx:foranzuzeigen > . Der Parameter mode des integrierten Tags image wird auch verwendet, um den Gr??enstil der Bildanzeige zu deklarieren. ?????????? und in verschiedenen Stilrichtungen geschrieben ??

Der endgültige Effekt der Seite ist wie im Bild unten dargestellt

Abschlie?end sehen wir uns die Wirkung des Miniprogramms, das wir bisher entwickelt haben, auf einer echten Maschine an und vergleichen es mit der Homepage der Zhihu Mini-Programm wie folgt.

Die linke Seite ist die Homepage des Zhihu-Miniprogramms und die rechte Seite ist das Miniprogramm, das wir selbst entwickelt haben. Ist der Effekt nicht ziemlich gut?

Zusammenfassung

Lassen Sie uns abschlie?end zusammenfassen, was wir heute gelernt haben. Tats?chlich k?nnen Sie durch das Verzeichnis heute einen benutzerdefinierten Komponenten-Entwicklungsprozess wie folgt sehen:

• Komponentenerstellung
• Komponentendefinition und -deklaration li>
• Komponentenreferenz
• Eingehende Komponentendaten

自定義組件開發(fā)的完成過程如下

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

通過如上方法，結(jié)合之前所講的頁面開發(fā)Durch die obige Methode, kombiniert mit der zuvor erw?hnten Seitenentwicklung-Methode, perfektionieren wir Learn die Kernkompetenzen der Entwicklung kleiner Programme. Anschlie?end k?nnen wir nach unserem eigenen Design kleine Programmseiten entwickeln, die für verschiedene Funktionen verantwortlich sind, und eine Reihe benutzerdefinierter Komponenten basierend auf den Funktionen und Eigenschaften jeder Seite entwickeln, um den Effekt einer flexiblen Kombination zu erzielen.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonEine kurze Analyse, wie man eine Inhaltslistenkomponente in einem Miniprogramm entwickelt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!