Une brève analyse de la façon de développer un composant de liste de contenu dans un mini-programme

Cet article partagera avec vous une application pratique du développement de petits programmes et vous présentera comment développer un composant de liste de contenu. J'espère qu'il sera utile à tout le monde !

Nous avons développé une zone de saisie de recherche commune sur la page d'accueil, mais son code est écrit directement dans le fichier de la page d'accueil, il ne peut donc pas être appelé un composant. Dans cet article, nous présenterons comment écrire un petit composant de programme complet. [Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes]搜索输入框，但其代码是直接写在首页文件中的，所以这样还不能称为是一个组件。这篇我们来介绍一下如何编写一个完整的小程序组件。【相关学习推荐：小程序开发教程】

组件的组成

组件结构

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

Composition des composants

Structure des composants

Tout d'abord, les composants sont similaires aux pages . Il existe un dossier séparé pour la maintenance. Nous créons d'abord un répertoire components dans le mini-projet de programme pour stocker nos composants, puis créons un répertoire nommé search-bar à utiliser comme notre champ de recherche code> composant. <p></p> <img src="https://img.php.cn/upload/image/494/295/139/163668555976737Une%20br%C3%A8ve%20analyse%20de%20la%20fa%C3%A7on%20de%20d%C3%A9velopper%20un%20composant%20de%20liste%20de%20contenu%20dans%20un%20mini-programme" title="163668555976737Une brève analyse de la façon de développer un composant de liste de contenu dans un mini-programme" alt="Une brève analyse de la façon de développer un composant de liste de contenu dans un mini-programme"><p><img src="https://img.php.cn/upload/image/870/111/506/163668559877017Une%20br%C3%A8ve%20analyse%20de%20la%20fa%C3%A7on%20de%20d%C3%A9velopper%20un%20composant%20de%20liste%20de%20contenu%20dans%20un%20mini-programme" title="163668559877017Une brève analyse de la façon de développer un composant de liste de contenu dans un mini-programme" alt="Une brève analyse de la façon de développer un composant de liste de contenu dans un mini-programme">Ci-dessus Comme mentionné, les composants sont en fait très similaires aux pages, et sont composés d'un répertoire, donc naturellement le contenu à afficher est également écrit par <code>index.wxml. Nous collons donc directement la partie précédente concernant le Champ de recherche.

🎜🎜🎜🎜🎜Coller dans components/search-bar/index.wxml, le format du code n'est peut-être pas très bon. Vous pouvez cliquer avec le bouton droit sur un espace vide dans le contenu du fichier, ou sélectionner le code, puis cliquer sur Format. Document. Formatage automatique. 🎜🎜Ce qu'il faut noter ici, c'est que s'il y a une référence d'emplacement de ressource dans notre fichier de structure, après avoir modifié l'emplacement du fichier, nous devons confirmer si l'emplacement modifié référence correctement la ressource. Par exemple, ici, nous collons le contenu original sous pages/index/index.wxml dans components/search-bar/index.wxml, où image code >La balise fait référence à un fichier sous <code>assets/images Vous devez confirmer que le chemin de référence de l'image dans le nouvel emplacement est toujours valide. 🎜

Style de composant

🎜De même, nous collons le style de composant que nous avons écrit auparavant🎜🎜🎜🎜🎜

Déclaration des composants

🎜De cette façon, nous avons terminé la définition de la structure et du style du composant, mais les outils de développement ne pensent pas encore qu'il s'agit d'un composant, nous devons donc créer index.json dans le répertoire du composant Déclarez ce répertoire comme composant valide comme indiqué ci-dessous. 🎜🎜Tout d'abord, nous devons utiliser "component": true dans index.json pour déclarer qu'il s'agit d'un composant🎜🎜🎜🎜Deuxièmement, nous devons utiliser index.js Utilisez la méthode globale <code>Component() pour enregistrer le composant. Le paramètre de cette méthode est un objet, qui peut définir divers contenus similaires à la page. Pour plus de détails, veuillez vous référer à Documentation officielle🎜🎜🎜

Utilisation du composant

🎜Après avoir terminé la définition de base du composant, notre composant peut être mis en service. Introduisez simplement le composant là où vous devez l'utiliser. La méthode d'introduction est la suivante dans le fichier de configuration de notre page d'accueil🎜🎜🎜🎜Parmi eux, "search-bar" définit le nom de l'étiquette du composant, car nous utilisons le build- dans les composants du mini programme sont les mêmes que input et image, et le contenu suivant correspond à la position relative du composant par rapport au référent actuel. la position est la même que image Recherchez l'emplacement de l'image dans la balise . 🎜🎜Après la déclaration de référence du composant ci-dessus, nous pouvons utiliser le composant dans le fichier de structure de la page🎜🎜🎜🎜

Au cours de ce processus, si vous rencontrez une erreur dans la console dans le coin inférieur droit, vous pouvez recompiler le projet en cliquant sur le bouton de compilation en haut au centre des outils de développement pour réécrire et analyser divers fichiers. S'il y a encore des erreurs après la compilation, d'une part, vous pouvez vérifier s'il y a bien des erreurs dans le code, et d'autre part, vous pouvez essayer en redémarrant les outils de développement (car les outils de développement eux-mêmes ont aussi certains bugs, et parfois des problèmes étranges surviennent)

De plus, j'ai effectué quelques réglages personnalisés dans les paramètres des outils de développement en fonction de mes habitudes de développement personnelles, comme la sauvegarde automatique et l'indentation du code, pour référence.

Composant de liste de contenu

Après avoir introduit un composant personnalisé complet, nous terminerons ensuite le développement du Composant de liste de contenu. 内容列表组件的开发。

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

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

La liste de contenu est évidemment plus compliquée que la zone de saisie de recherche ci-dessus, mais la méthode de développement des composants est la même. Il suffit de développer des composants selon cette règle.

Tout d'abord, nous créons les quatre fichiers principaux qui composent le composant comme suit, parmi lesquels index.js et index.json sont les mêmes que ceux écrits précédemment.

🎜Continuer , nous complétons la définition de l'élément du list component en écrivant index.wxml et index.wxss. 🎜🎜Puisqu'il s'agit d'une liste, la syntaxe loop traversal dans le mini programme sera utilisée. Pour cette partie, veuillez vous référer à Document officiel pour apprendre, l'utilisation spécifique est la suivante. 🎜🎜🎜🎜Alors , nous définissons les données externes entrantes reçues par le composant dans index.js comme suit🎜🎜🎜🎜De cette façon, utilisez wx:for dans index.wxml pour traverse est la liste des données transmises en externe reçues via l'attribut properties dans index.js. Ensuite, nous introduisons immédiatement le composant sur la page d'accueil et lui transmettons la liste de données réelles. La méthode d'utilisation consiste toujours à déclarer d'abord une référence au composant dans index.json, puis à utiliser le nom de balise déclaré lors de la référence dans le fichier d'échange. 🎜🎜🎜🎜🎜🎜Ici, nous déclarons le L'attribut items transmet les données pour le composant de liste de contenu que nous avons défini, et les données proviennent du listData défini dans la page d'accueil. Cela nécessite que nous déclarions. ces données dans data de index.js sur la page d'accueil. 🎜🎜🎜

🎜données et propriétés🎜

🎜Ici, nous parlons de la différence entre data et properties, data est utilisé pour définir ses propres données dans la page ou le composant, tandis que <code>properties est utilisé pour recevoir des données entrantes externes, donc seuls les composants ont cette propriété. 🎜🎜Par exemple, pour le composant liste de contenu, il doit transmettre les données réelles de la liste en externe, donc dans propriétés cela équivaut à personnaliser les paramètres du composant, puis en utilisant le composant en externe, les données peuvent lui être transmises via les paramètres déclarés par le composant. 🎜

🎜Les données sont transmises🎜🎜🎜Par conséquent, nous devons comprendre quelle est la structure de données requise pour les paramètres du composant, comme le composant list que nous définissons ici code >Une liste de données doit être transmise, et chaque élément de la liste de données contient du texte et des images, nous définissons donc les données suivantes dans <code>listData sur la page d'accueil🎜🎜🎜🎜Vous pouvez voir que chaque élément de la liste doit correspond exactement à notre structure de données utilisée par le composant, c'est-à-dire que chaque élément de données a un champ text pour afficher le contenu du texte et un champ image pour afficher l'image qui l'accompagne. le texte. 🎜🎜Puis de retour à l'intérieur de notre composant, nous utilisons le champ item représentant chaque donnée pour accéder aux données de la liste et les afficher selon la syntaxe de wx:for . Le paramètre mode de la balise intégrée image est également utilisé pour déclarer le style de taille de l'affichage de l'image. 🎜🎜🎜🎜🎜 et écrit dans une gamme de styles 🎜

L'effet final de la page est comme le montre l'image ci-dessous

Enfin, nous prévisualisons l'effet du mini programme que nous avons développé jusqu'à présent sur une vraie machine, et le comparons avec la page d'accueil du Mini programme Zhihu comme suit.

Le côté gauche est la page d'accueil du mini programme Zhihu, et le côté droit est le mini programme que nous avons développé nous-mêmes. L'effet n'est-il pas plutôt bon ?

Résumé

Enfin, résumons ce que nous avons appris aujourd'hui. En fait, vous pouvez clairement voir à travers le répertoire. Aujourd'hui, nous avons introduit un processus de développement de composant personnalisé comme suit自定义组件开发的完成过程如下

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

通过如上方法，结合之前所讲的页面开发

• Création de composants
• Définition et déclaration de composants
• Référence des composants
• Données des composants entrants

Grâce à la méthode ci-dessus, combinée à la méthode de développement de pages mentionnée précédemment, nous perfectionnons Learn les compétences de base du développement de petits programmes. Après cela, nous pouvons développer de petites pages de programme responsables de différentes fonctions selon notre propre conception, et développer une série de composants personnalisés basés sur les fonctions et les caractéristiques de chaque page pour obtenir l'effet d'une combinaison flexible.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation

 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!