


Comment installer et utiliser la bibliothèque de composants d'interface utilisateur dans un mini-programme
Nov 15, 2021 am 11:06 AMCet article partagera avec vous un développement pratique d'un mini programme et vous présentera comment installer et utiliser la bibliothèque de composants d'interface utilisateur dans le mini programme. J'espère qu'il sera utile à tout le monde !
Les compétences de base du développement de petits programmes ont été introduites plus t?t, telles que le développement de pages
, le développement de composants
, le développement cloud
, etc. ., ce sont tout. C'est au niveau fonctionnel. Dans cet article, nous présenterons les compétences au niveau de l'interface utilisateur pour le développement de petits programmes dans une conférence distincte, c'est-à-dire en utilisant la bibliothèque de composants d'interface utilisateur. [Recommandations d'apprentissage associées?: 頁面開發(fā)
、組件開發(fā)
、云開發(fā)
等,這些都是功能層面的。這篇我們單獨通過一講介紹一下小程序開發(fā)UI層面的技能,即使用UI組件庫?!鞠嚓P(guān)學(xué)習(xí)推薦:小程序開發(fā)教程】
使用UI組件庫的好處不言而喻,可以統(tǒng)一我們小程序的整體UI風(fēng)格,同時還可以大大節(jié)省開發(fā)小程序的時間。因為對于很多復(fù)雜的功能組件,自己要實現(xiàn)起來比較費時間,還容易存在各種功能缺陷。
實踐
接下來我們就以 vant
這款UI組件庫為例,介紹一下小程序如何使用UI組件庫來提高開發(fā)效率。
安裝組件庫
使用組件庫的第一步,就是將組件庫集成進我們現(xiàn)有的小程序。
首先,我們在開發(fā)者工具中選擇終端
面板,并新建一個終端,這里的終端使用的就是你電腦自帶的終端,比如Window系統(tǒng)中的命令行,或MacOS下的終端。
然后在終端內(nèi)輸入npm -v
檢查當(dāng)前電腦是否裝有npm
工具,npm工具是用于下載網(wǎng)絡(luò)軟件包的工具,隸屬于Nodejs
,如果電腦上沒有npm的話,可以先去下載 nodejs 并完成安裝,安裝后會自帶npm。
當(dāng)電腦擁有npm后,我們便可使用它來下載vant
軟件包到我們的小程序項目內(nèi),具體步驟參照 vant快速上手文檔 操作即可。
在第一步成功后應(yīng)該會看到類似下圖所展示的樣子
在第二步中我們按照指示,將app.json
的style:v2
進行刪除
在第三步中我們按照指示,修改project.config.json
如下
這里存在一個問題是,如果你是一個純小程序項目,起初是不存在package.json
文件的,所以這里配置中所指向的package.json文件會找不到。
我們可以使用npm init -y
命令手動創(chuàng)建一個,結(jié)果如下
由于我們在創(chuàng)建package.json前進行了npm包的安裝,所以這里還需要重新執(zhí)行一遍npm i @vant/weapp -S --production
以確保package.json文件中的dependencies
一項有@vant/weapp
。
第四步,也是最后一步,就是使用開發(fā)者工具頂部菜單欄中的工具
-構(gòu)建npm
對我們安裝的npm包進行構(gòu)建,這時候會提示報錯,這是由于新版的小程序開發(fā)如vant文檔所說,小程序?qū)τ趎pm包的解析目錄如今變成了miniprogram_npm
。
所以我們需要按照指示將project.config.json
中packNpmRelationList
下的miniprogramNpmDistDir
一項修改為./
,如下圖所示。
然后我們重新使用開發(fā)者工具進行npm構(gòu)建,完成后可以看到下圖的樣子,小程序目錄中也自動增加了miniprogram_npm
Tutoriel de développement de mini-programmes
Les avantages de l'utilisation de la bibliothèque de composants d'interface utilisateur sont évidents. Elle peut unifier le style global de l'interface utilisateur de notre mini-programme et, en même temps, elle peut grandement gagner du temps. dans le développement de mini-programmes. Parce que pour de nombreux composants fonctionnels complexes, leur mise en ?uvre vous-même prend du temps et il est facile d'avoir divers défauts fonctionnels.
Pratique
??Ensuite, nous utiliseronsvant
?? En prenant cette bibliothèque de composants d'interface utilisateur comme exemple, nous présenterons comment les petits programmes peuvent utiliser les bibliothèques de composants d'interface utilisateur pour améliorer l'efficacité du développement. ??Installer la bibliothèque de composants
??La première étape de l'utilisation de la bibliothèque de composants consiste à intégrer la bibliothèque de composants dans notre applet existante. ????Tout d'abord, nous sélectionnons le panneauTerminal
dans les outils de développement et créons un nouveau terminal. Le terminal utilise ici le terminal fourni avec votre ordinateur, comme la ligne de commande dans le système Windows ou sous MacOS. Terminal. ????
npm -v
dans le terminal pour vérifier si l'ordinateur actuel est équipé de l'outil npm
. L'outil npm est un outil utilisé pour télécharger des progiciels réseau et appartient à <. code>Nodejscode>, s'il n'y a pas de npm sur votre ordinateur, vous pouvez d'abord télécharger nodejs?? et terminez l'installation, npm l'accompagnera après l'installation. ????
vant
dans notre mini-projet de programme. Pour les étapes spécifiques, veuillez vous référer à vant Document de démarrage rapide ?? Opérez simplement. ????Une fois la première étape réussie, vous devriez voir quelque chose comme l'image ci-dessous????
style:v2
de app.json
Supprimer ????
project.config.json
comme suit????
package.json
fichier, donc le fichier package.json pointé dans cette configuration sera introuvable. ????Nous pouvons utiliser la commande npm init -y
pour en créer un manuellement, les résultats sont les suivants????
npm i @ vant/weapp -S --production
pour garantir que l'élément dependencies
dans le fichier package.json a @vant/weapp
. ????La quatrième et dernière étape consiste à utiliser Outils
-Build npm
dans la barre de menu supérieure des outils de développement pour créer le package npm que nous avons installé à ce moment-là. une erreur est signalée. Cela est d? à la nouvelle version du développement du mini-programme, comme indiqué dans la documentation de vant. Le répertoire d'analyse des packages npm par les mini-programmes est maintenant devenu miniprogram_npm
. ????
miniprogramNpmDistDir
sous packNpmRelationList
dans project.config.json
en ./
. Comme indiqué ci-dessous. ????
miniprogram_npm
est automatiquement ajouté au répertoire du mini programme, qui est spécifiquement utilisé pour gérer tous les packages npm. ????????L'expérience ici est que les règles de développement des mini-programmes peuvent être mises à jour, et lorsque des outils tiers sont utilisés pour les intégrer, des ajustements de configuration flexibles doivent être effectués en fonction de la situation réelle.
Utilisation de la bibliothèque de composants
Après avoir installé la bibliothèque de composants, nous pouvons commencer à utiliser tous les composants de la bibliothèque de composants. Tout d’abord, transformons la zone de saisie de recherche précédente et utilisons le composant de recherche fourni par vant.
La fa?on d'utiliser la bibliothèque de composants de l'interface utilisateur est la même que la fa?on d'utiliser nos propres composants développés. Les deux doivent d'abord déclarer les composants à introduire dans le fichier json
La documentation de Avant fournit également. références à chaque méthode, nous pouvons simplement suivre ses instructions.
Pensez à cliquer manuellement sur compiler après avoir modifié le fichier json pour prendre effet Contrairement aux modifications des fichiers wxml et wxss, les modifications prendront effet en temps réel grace à la fonction de rechargement à chaud.
De plus, pour les composants tels que le composant de recherche, ses attributs contiennent une liaison de valeurs variables, c'est-à-dire value
, qui correspond au contenu saisi dans le champ de recherche, nous avons donc besoin pour l'ajouter dans js Déclarez une variable dans le fichier pour stocker cette valeur pour recevoir le contenu saisi dans le champ de recherche. value
,它對應(yīng)于搜索框中輸入的內(nèi)容,所以我們需要在js文件中聲明一個用于存儲這個值的變量以接收搜索框中輸入的內(nèi)容。
這樣,我們就完成了搜索框的改造,也實踐了UI組件庫的使用。
接下來,我們可以閱讀vant文檔,通過組合各種組件庫已有的組件,大大加快許多功能的開發(fā)。
總結(jié)
這一篇我們介紹了如何使用已有的UI組件庫來提高我們開發(fā)小程序的效率,主要是安裝
和使用
Résumé
??Dans cet article, nous avons présenté comment utiliser les bibliothèques de composants d'interface utilisateur existantes pour améliorer l'efficacité de notre développement de petits programmes, principalement l'installation code> et <code>use
en deux étapes. Dans le prochain article, nous combinerons les puissantes capacités de la bibliothèque de composants vant pour compléter la mise en ?uvre fonctionnelle d'une page d'accueil complète. ????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!

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 grace à 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
