Eine kurze Analyse, wie man eine Inhaltslistenkomponente in einem Miniprogramm entwickelt

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]搜索输入框，但其代码是直接写在首页文件中的，所以这样还不能称为是一个组件。这篇我们来介绍一下如何编写一个完整的小程序组件。【相关学习推荐：小程序开发教程】

组件的组成

组件结构

首先，组件同页面类似，都有一个单独的文件夹进行维护。我们先在小程序项目中创建一个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

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. 内容列表组件的开发。

内容列表显然要必上面的搜索输入框复杂一些，但对于组件的开发方式都一样，我们只需要按照这种规则进行组件的开发即可。

首先，我们创建好组成组件的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

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

自定义组件开发的完成过程如下

• 组件创建
• 组件定义及声明
• 组件引用
• 组件数据传入

通过如上方法，结合之前所讲的页面开发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!