Vous apprendre étape par étape comment développer un composant de zone de saisie de recherche 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 zone de saisie de recherche. J'espère qu'il sera utile à tout le monde !

Parlons cette fois du développement du composant. Puisqu'un mini-programme peut être composé de plusieurs pages et que différentes pages peuvent avoir des parties similaires, nous devons diviser raisonnablement les pages en différents composants, tout comme les blocs de constructionLe même , puis finalisez l'assemblage de chaque page en combinant différents composants. C'est pourquoi il y a la notion de développement de composants. [Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes]组件的开发。由于小程序可能由很多页面组成，而不同页面可能会有相似的部分，所以我们要将页面合理拆分成不同的组件，就像一块块积木一样，然后再通过组合不同组件完成一个个页面的组装，这就是为什么会有组件开发这个概念。【相关学习推荐：小程序开发教程】

实战演练

那么话不多说，我们直接开始实战。如何将一个页面拆分成组件是由一系列页面开发后积累的经验所指引的，我们先来做几个页面找找感觉。

比如我们先来做一个小程序首页，我们常见的很多应用首页大多是一个内容列表，其实它有一个比较专业的名称，叫做“feed流”。

比如上图，分别是微博、知乎、美团和boss直聘的小程序首页。可以看到，它们基本都是由一个顶部的搜索输入框和主体部分一个可以持续上划的内容列表所组成的。

首页开发

那么按照这个思路，我们开始自己的小程序首页开发。

首先，我们打开app.json文件，其中pages中的所配置的第一项则是小程序首页。

接着，我们打开首页的index.wxml文件并清空它，然后开始编写我们自己的首页内容。

清空前

清空后

我们可以将上图中所指的热重载打开，这样可以在每次修改完页面的内容后实时看到修改效果，而无需每次手动点击编译。

另外，我们发现上面四个主流小程序的首页都没有标题内容，所以我们也将app.json中的navigationBarTitleText字段改为空字符串即可。

搜索框组件

我们上面提到过，首页由顶部的搜索输入框和主体部分的列表所组成，这就已经天然地将首页拆分成了搜索输入框+内容列表两个组件了，因为这两个元素都可能是被其他页面重复使用的。

那么先来开发搜索输入框，我们以最简单的形式为例，比如上面主流小程序中第2个和第4个。即一个圆角输入框，输入框内部最左侧有一个搜索图标，输入框内部有一行默认的提示文字。

内置组件input

输入框我们会使用小程序提供的内部组件input，文档可见 input

然后我们在开发页面或组件的时候，注意在每一个元素层级都尽量以一个view标签作为容器，对元素进行包裹，这样后面对于元素在布局中的操控都会更加容易。

比如我们在pages/index/index.wxml中写下如上代码，页面就会呈现出左侧的样子。

这里我们使用了小程序内置组件input，并通过placeholder属性为其设置了默认提示文字。

接着，我们需要使用一些样式代码来对搜索框进行样式修饰。

我们为元素标签添加了样式属性

接着在index.wxss

Exercice pratique

Sans plus tarder, commençons directement le combat proprement dit. La façon de diviser une page en composants est guidée par l'expérience accumulée après le développement d'une série de pages. Faisons d'abord quelques pages pour en avoir une idée. 🎜🎜Par exemple, créons d'abord une petite page d'accueil de programme. La plupart des pages d'accueil de bon nombre de nos applications courantes sont une liste de contenu. En fait, elle porte un nom plus professionnel appelé « flux de flux ». 🎜🎜🎜🎜Pour exemple Les images ci-dessus sont les pages d'accueil de mini-programmes sur Weibo, Zhihu, Meituan et Boss Direct Recruitment respectivement. Comme vous pouvez le voir, ils se composent essentiellement d'une zone de saisie de recherche en haut et d'une liste de contenu dans la partie principale qui peut défiler vers le haut en continu. 🎜

Développement de page d'accueil

🎜Donc, selon cette idée, nous commençons à développer notre propre mini page d'accueil de programme. 🎜🎜Tout d'abord, nous ouvrons le fichier app.json, où le premier élément configuré dans les pages est la page d'accueil du mini programme. 🎜🎜🎜🎜Continuer , nous ouvrons le fichier index.wxml sur la page d'accueil et le nettoyons, puis commençons à écrire le contenu de notre propre page d'accueil. 🎜🎜Avant d'effacer🎜🎜🎜🎜Après le nettoyage🎜🎜🎜🎜Nous pouvons activer le rechargement à chaud comme indiqué dans l'image ci-dessus, afin de pouvoir voir l'effet de modification en temps réel après avoir modifié le contenu de la page, sans avoir à cliquer manuellement sur compiler à chaque fois. temps. 🎜🎜De plus, nous avons constaté que les pages d'accueil des quatre mini-programmes grand public ci-dessus n'avaient pas de contenu de titre, nous avons donc également remplacé le champ navigationBarTitleText dans app.json par un champ vide. chaîne peut. 🎜

Composant de zone de recherche

🎜Comme nous l'avons mentionné ci-dessus, la page d'accueil se compose d'une zone de saisie de recherche en haut et d'une liste dans la zone principale. La page d'accueil a été naturellement divisée en deux composants : Zone de saisie de recherche + Liste de contenu, car ces deux éléments peuvent être répétés par d'autres pages Utiliser . 🎜🎜Ensuite, développons d'abord la zone de saisie de recherche. Prenons comme exemple la forme la plus simple, comme la 2ème et la 4ème dans l'applet grand public ci-dessus. C'est-à-dire une zone de saisie <code>coins arrondis. Il y a une icône de recherche à l'extrême gauche de la zone de saisie, et il y a une ligne de texte d'invite par défaut. à l'intérieur de la zone de saisie. 🎜

Entrée de composant intégrée

🎜Boîte de saisie, nous utiliserons le composant interne input fourni par le mini programme, le document peut être vu input a>🎜🎜Ensuite, lors du développement d'une page ou d'un composant, faites attention à utiliser une balise view comme conteneur à chaque niveau d'élément pour envelopper l'élément, afin qu'il soit plus facile de contrôler l'élément dans la mise en page plus tard. 🎜🎜🎜🎜Pour exemple Nous écrivons le code ci-dessus dans pages/index/index.wxml, et la page ressemblera au côté gauche. 🎜🎜Ici, nous utilisons le composant intégré input du mini-programme et définissons le texte d'invite par défaut via l'attribut placeholder. 🎜🎜Ensuite, nous devons utiliser un code de style pour styliser le champ de recherche. 🎜🎜🎜🎜nous Ajout d'attributs de style aux balises d'éléments 🎜🎜🎜🎜Effacez ensuite le contenu original dans index.wxss, puis ajoutez notre propre code de style. 🎜

Débogage de style

Voici une astuce de développement très pratique. Comme le montre l'image ci-dessus, nous pouvons utiliser le débogueur fourni par les outils de développement pour afficher la structure de rendu réelle et les attributs de style du. page. Et nous pouvons modifier les styles des éléments de la page directement ici et voir les effets en temps réel. Même pour les attributs de couleur, nous pouvons cliquer sur la couleur actuelle pour afficher le panneau de sélection de couleur et ajuster la couleur de l'élément comme indiqué ci-dessus. 调试器查看页面实际渲染出的结构以及样式属性，并且我们可以直接在这里对页面元素的样式进行修改并实时看到效果。甚至对于颜色类的属性我们可以像上图中的操作，点击当前颜色唤出颜色选择面板，进而调整该元素的颜色。

然后，当我们把页面样式调整到最佳效果后，直接将调试器中的样式代码选中并复制，随即粘贴到我们的index.wxss中即可。

图标引入

最后，我们还需要在输入框内部的最左侧显示一个搜索样式的图标，那么首先我们需要从网上找一个搜索样式的图片。这里推荐使用 iconfont 这个网站进行图标筛选

我们选择好图标后，可以按照下图对图标的颜色和大小进行修改，然后下载。

接着，我们将下载好的图片放到小程序项目文件夹中，打开小程序项目文件夹的方式有很多种。比如你可以右键开发者工具中的资源管理器中任何一个文件，然后选择在资源管理器中显示，或者点击右上角的详情面板，然后点击本地目录一项。

然后我们新建一个assets文件夹用于存放小程序的静态文件，比如图片、公共样式等。

我们将刚刚下载好的搜索图片放进assets中的images目录，并将图片名称改为英文名称（一般建议文件命名都用英文命名，以避免一些程序解析错误）

然后我们回到开发者工具，可以看到刚才拷贝而来的搜索图标已经准备好。接着，我们通过样式代码来将它显示在输入框中

首先，我们可以使用上图所示的方法，点击调试器左上角的图标，来查看我们页面当前的元素结构。方法是先点击调试器左上角的查看图标，然后将鼠标移动到左侧小程序预览中的任意位置，可以看到右侧面板会随着左侧选中的位置而高亮提示你选中的元素所对应的代码区域。

通过这样的方法，我们可以直观地了解我们的页面目前所对应的代码结构，从而决定我们新加入的图标元素应该放到哪层容器比较合适。

位置布局

经过如上操作，我们最终在search-bar这一层容器内部的第一行，即与input同级的位置新增了另外一个内置组件image，然后通过src属性指明要显示的图片位置。这里当你在image标签中设置src属性时，开发者工具会自动提示可以选择的路径。由于我们的图片位置在当前文件所在目录的外部，所以我们一开始只需要输入..来进行上一级目录，接下来开发者工具就会提示我们上一级目录都有哪些文件。

最终，我们通过在index.wxss

Alors , lorsque nous ajustons le style de la page au meilleur effet, sélectionnez et copiez directement le code de style dans le débogueur, puis collez-le dans notre index.wxss.

Introduction à l'icône

🎜Enfin, nous devons également afficher une icône de style de recherche à l'extrême gauche de la zone de saisie, nous devons donc d'abord trouver une image de style de recherche à partir de Internet. Il est recommandé d'utiliser iconfont🎜 Ce site Web est utilisé pour le filtrage des icônes🎜🎜🎜🎜Après avoir sélectionné l'icône, nous pouvons ajustez l'icône comme indiqué ci-dessous. Modifiez la couleur et la taille, puis téléchargez. 🎜🎜🎜🎜Continuer , nous plaçons les images téléchargées dans le dossier du projet du mini-programme. Il existe de nombreuses façons d'ouvrir le dossier du projet du mini-programme. Par exemple, vous pouvez cliquer avec le bouton droit sur n'importe quel fichier dans Explorateur dans les outils de développement, puis sélectionner Afficher dans l'Explorateur, ou cliquer sur le panneau de détails dans le coin supérieur droit, et puis cliquez sur l'élément Répertoire local. 🎜🎜🎜🎜Alors Nous créons un nouveau dossier assets pour stocker les fichiers statiques du mini programme, tels que les images, les styles publics, etc. 🎜🎜🎜🎜nous Placez l'image de recherche que vous venez de télécharger dans le répertoire images dans assets et remplacez le nom de l'image par un nom anglais (il est généralement recommandé que les noms de fichiers soient nommés en anglais pour éviter certaines erreurs d'analyse du programme)🎜🎜🎜🎜Ensuite, nous revenons aux outils de développement, et nous pouvons voir que l'icône de recherche que nous venons de copier est prête. Ensuite, nous utilisons le code de style pour l'afficher dans la zone de saisie🎜🎜🎜🎜Tout d'abord, nous pouvons utiliser la méthode montrée dans l'image ci-dessus et cliquer sur l'icône dans le coin supérieur gauche du débogueur pour afficher la structure actuelle des éléments de notre page. La méthode consiste à cliquer d'abord sur l'icône d'affichage dans le coin supérieur gauche du débogueur, puis à déplacer la souris vers n'importe quelle position dans l'aperçu du mini programme sur la gauche. Vous pouvez voir que le panneau de droite mettra en surbrillance l'élément sélectionné en fonction de. position sélectionnée à gauche. La zone de code correspondante. 🎜🎜Grâce à cette méthode, nous pouvons comprendre intuitivement la structure de code actuelle de notre page, décidant ainsi dans quelle couche de conteneur notre élément d'icône nouvellement ajouté doit être placé. 🎜

🎜Disposition de la position🎜🎜🎜Après les opérations ci-dessus, nous nous retrouvons finalement dans la première ligne à l'intérieur du conteneur de couches search-bar, qui est le identique à image est ajouté au même niveau que >input

, puis l'emplacement de l'image à afficher est spécifié via le src attribut. Ici, lorsque vous définissez l'attribut <code>src dans la balise image, les outils de développement vous demanderont automatiquement le chemin que vous pouvez choisir. Étant donné que l'emplacement de notre image est en dehors du répertoire où se trouve le fichier actuel, il nous suffit de saisir .. pour accéder au répertoire de niveau supérieur. Ensuite, l'outil de développement nous demandera d'accéder au répertoire de niveau supérieur. -Le répertoire de niveau indique quels sont les documents présents. 🎜🎜🎜🎜Enfin , nous utilisons la syntaxe CSS pour écrire des styles raisonnables dans index.wxss afin d'afficher l'icône de recherche en position centrale verticale sur le côté gauche de la zone de saisie. Pour une syntaxe spécifique, veuillez vous référer aux 🎜Documents associés🎜 pour l'apprentissage🎜🎜🎜Aperçu réel de la machine🎜🎜🎜Ainsi, après le développement ci-dessus, notre page d'accueil a commencé à prendre forme. Nous introduisons ici une autre fonction puissante fournie par les outils de développement : la véritable fonction de prévisualisation de la machine. 🎜

Comme le montre l'image, cliquez sur le bouton Aperçu en haut du panneau. Les outils de développement compileront le projet de mini-programme actuel dans un état prévisualisable, puis effectueront un traitement 2D via le WeChat du développeur qui s'est connecté au mini programme. Scannez le code pour voir l'effet du mini programme actuel sur l'appareil réel预览按钮，开发者工具会将当前小程序项目编译为可预览状态，然后通过登录了该小程序的开发者的微信进行二维码扫描，即可在真机中看到当前小程序的效果

总结

好了，最后我们总结一下今天讲了哪些内容。今天我们首先引入了组件开发的概念以及为什么要进行组件拆分，并通过一个实例介绍了开发组件过程中所用到的一些开发技巧，包括

• 内置组件使用
• 样式调试方法
• 图片资源引入
• 真机预览

当然，本篇其实还没有进行真正地进行组件开发，因为我们还是直接在页面文件内进行了元素的开发，下一篇我们将会把首页按照搜索输入框组件+内容列表组件

Résumé

D'accord, résumons enfin le contenu dont nous avons parlé aujourd'hui. Aujourd'hui, nous avons d'abord présenté le concept de développement de composants et pourquoi la division des composants est nécessaire, puis présenté certaines techniques de développement utilisées dans le développement de composants à travers un exemple, notamment

• Utilisation de composants intégrés
Style méthode de débogage
• Introduction à la ressource image
• Aperçu réel de l'appareil

Bien sûr, cet article n'a pas encore développé le composant , comme nous développons toujours les éléments directement dans le fichier de page, dans le prochain article, nous créerons la page d'accueil en fonction du composant de zone de saisie de recherche+composant de liste de contenu Divisez-le en présenter en détail la méthode de développement de petits composants de programme. 🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéos de 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!