


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 construction
Le 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 ». 🎜🎜
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 fichierapp.json
, où le premier élément configuré dans les pages
est la page d'accueil du mini programme. 🎜🎜
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🎜🎜

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 interneinput
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. 🎜🎜
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. 🎜🎜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
. 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
. 🎜🎜assets
pour stocker les fichiers statiques du mini programme, tels que les images, les styles publics, etc. 🎜🎜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)🎜🎜🎜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. 🎜🎜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
, 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!

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Avec la popularité de la technologie Internet mobile et des smartphones, WeChat est devenu une application indispensable dans la vie des gens. Les mini-programmes WeChat permettent aux gens d'utiliser directement des mini-programmes pour résoudre certains besoins simples sans télécharger ni installer d'applications. Cet article explique comment utiliser Python pour développer l'applet WeChat. 1. Préparation Avant d'utiliser Python pour développer l'applet WeChat, vous devez installer la bibliothèque Python appropriée. Il est recommandé d'utiliser ici les deux bibliothèques wxpy et itchat. wxpy est une machine WeChat

Implémentation d'effets de retournement de cartes dans les mini-programmes WeChat Dans les mini-programmes WeChat, la mise en œuvre d'effets de retournement de cartes est un effet d'animation courant qui peut améliorer l'expérience utilisateur et l'attractivité des interactions d'interface. Ce qui suit présentera en détail comment implémenter l'effet de retournement de carte dans l'applet WeChat et fournira des exemples de code pertinents. Tout d'abord, vous devez définir deux éléments de carte dans le fichier de mise en page du mini-programme, un pour afficher le contenu avant et un pour afficher le contenu arrière. L'exemple de code spécifique est le suivant : <!--index.wxml-. ->&l

Selon les informations de ce site du 31 octobre, le 27 mai de cette année, Ant Group a annoncé le lancement du « Projet de sélection de caractères chinois » et a récemment inauguré de nouveaux progrès : Alipay a lancé le mini-programme « Sélection de caractères chinois-Caractères rares ». pour collecter des collections de la société Les personnages rares complètent la bibliothèque de personnages rares et offrent différentes expériences de saisie pour les personnages rares afin d'aider à améliorer la méthode de saisie des caractères rares dans Alipay. Actuellement, les utilisateurs peuvent accéder à l'applet « Caractères peu communs » en recherchant des mots-clés tels que « capture de caractères chinois » et « caractères rares ». Dans le mini-programme, les utilisateurs peuvent soumettre des images de caractères rares qui n'ont pas été reconnus et saisis par le système. Après confirmation, les ingénieurs d'Alipay effectueront des entrées supplémentaires dans la bibliothèque de polices. Ce site Web a remarqué que les utilisateurs peuvent également découvrir la dernière méthode de saisie par fractionnement de mots dans le mini-programme. Cette méthode de saisie est conçue pour les mots rares dont la prononciation n'est pas claire. Démantèlement utilisateur

Les mini-programmes peuvent utiliser React. Comment l'utiliser : 1. Implémentez un moteur de rendu basé sur "react-reconciler" et générez un DSL ; 2. Créez un mini composant de programme pour analyser et restituer le DSL 3. Installez npm et exécutez le développeur Build ; npm dans l'outil ; 4. Introduisez le package dans votre propre page, puis utilisez l'API pour terminer le développement.

La manière dont Uniapp peut réaliser une conversion rapide entre les mini-programmes et le H5 nécessite des exemples de code spécifiques. Ces dernières années, avec le développement de l'Internet mobile et la popularité des smartphones, les mini-programmes et le H5 sont devenus des formulaires de candidature indispensables. En tant que cadre de développement multiplateforme, uniapp peut réaliser rapidement la conversion entre les petits programmes et H5 sur la base d'un ensemble de codes, améliorant considérablement l'efficacité du développement. Cet article présentera comment Uniapp peut réaliser une conversion rapide entre les mini-programmes et H5, et donnera des exemples de code spécifiques. 1. Introduction à uniapp unia

Cet article vous présente quelques problèmes liés aux mini-programmes WeChat. Il présente principalement comment utiliser les modèles de messages de compte officiel dans les mini-programmes. J'espère que cela sera utile à tout le monde.

Idée d'implémentation x01 Mise en place du serveur Tout d'abord, côté serveur, le socket est utilisé pour accepter les messages. Chaque fois qu'une demande de socket est acceptée, un nouveau thread est ouvert pour gérer la distribution et l'acceptation des messages. En même temps, il y a un gestionnaire. pour gérer tous les Threads, réalisant ainsi le traitement des diverses fonctions du salon de discussion. La mise en place du client x02 est beaucoup plus simple que celle du serveur. La fonction du client est uniquement d'envoyer et de recevoir des messages, et de saisir des caractères spécifiques en fonction. règles spécifiques. Pour pouvoir utiliser différentes fonctions, il suffit donc, côté client, d'utiliser deux threads, l'un est dédié à la réception de messages et l'autre à l'envoi de messages. Quant à pourquoi ne pas en utiliser un, celui-là. c'est parce que, seulement

Positionnement par géolocalisation et affichage cartographique de PHP et des mini-programmes Le positionnement par géolocalisation et l'affichage cartographique sont devenus l'une des fonctions nécessaires de la technologie moderne. Avec la popularité des appareils mobiles, la demande des gens en matière de positionnement et d'affichage de cartes augmente également. Au cours du processus de développement, PHP et les applets sont deux choix technologiques courants. Cet article vous présentera la méthode de mise en œuvre du positionnement géographique et de l'affichage de la carte dans PHP et les mini-programmes, et joindra des exemples de code correspondants. 1. Géolocalisation en PHP En PHP, on peut utiliser la géolocalisation tierce
