So installieren und verwenden Sie die UI-Komponentenbibliothek im Miniprogramm

Dieser Artikel zeigt Ihnen die praktische Entwicklung eines Miniprogramms und stellt vor, wie Sie die UI-Komponentenbibliothek im Miniprogramm installieren und verwenden. Ich hoffe, dass er für alle hilfreich ist!

Die grundlegenden Fähigkeiten der Entwicklung kleiner Programme wurden bereits früher eingeführt, z. B. Seitenentwicklung, Komponentenentwicklung, Cloud-Entwicklung usw ., das sind alles Es ist auf der funktionalen Ebene. In diesem Artikel werden wir in einer separaten Vorlesung die Fähigkeiten auf UI-Ebene für die Entwicklung kleiner Programme vorstellen, nämlich die Verwendung der UI-Komponentenbibliothek. [Verwandte Lernempfehlungen: 页面开发、组件开发、云开发等，这些都是功能层面的。这篇我们单独通过一讲介绍一下小程序开发UI层面的技能，即使用UI组件库。【相关学习推荐：小程序开发教程】

使用UI组件库的好处不言而喻，可以统一我们小程序的整体UI风格，同时还可以大大节省开发小程序的时间。因为对于很多复杂的功能组件，自己要实现起来比较费时间，还容易存在各种功能缺陷。

实践

接下来我们就以 vant 这款UI组件库为例，介绍一下小程序如何使用UI组件库来提高开发效率。

安装组件库

使用组件库的第一步，就是将组件库集成进我们现有的小程序。

首先，我们在开发者工具中选择终端面板，并新建一个终端，这里的终端使用的就是你电脑自带的终端，比如Window系统中的命令行，或MacOS下的终端。

然后在终端内输入npm -v检查当前电脑是否装有npm工具，npm工具是用于下载网络软件包的工具，隶属于Nodejs，如果电脑上没有npm的话，可以先去下载 nodejs 并完成安装，安装后会自带npm。

当电脑拥有npm后，我们便可使用它来下载vant软件包到我们的小程序项目内，具体步骤参照 vant快速上手文档 操作即可。

在第一步成功后应该会看到类似下图所展示的样子

在第二步中我们按照指示，将app.json的style:v2进行删除

在第三步中我们按照指示，修改project.config.json如下

这里存在一个问题是，如果你是一个纯小程序项目，起初是不存在package.json文件的，所以这里配置中所指向的package.json文件会找不到。

我们可以使用npm init -y命令手动创建一个，结果如下

由于我们在创建package.json前进行了npm包的安装，所以这里还需要重新执行一遍npm i @vant/weapp -S --production以确保package.json文件中的dependencies一项有@vant/weapp。

第四步，也是最后一步，就是使用开发者工具顶部菜单栏中的工具-构建npm对我们安装的npm包进行构建，这时候会提示报错，这是由于新版的小程序开发如vant文档所说，小程序对于npm包的解析目录如今变成了miniprogram_npm。

所以我们需要按照指示将project.config.json中packNpmRelationList下的miniprogramNpmDistDir一项修改为./，如下图所示。

然后我们重新使用开发者工具进行npm构建，完成后可以看到下图的样子，小程序目录中也自动增加了miniprogram_npmTutorial zur Miniprogrammentwicklung

]

Die Vorteile der Verwendung der UI-Komponentenbibliothek liegen auf der Hand. Sie kann den gesamten UI-Stil unseres Miniprogramms vereinheitlichen und gleichzeitig viel Zeit sparen bei der Entwicklung von Miniprogrammen. Denn viele komplexe Funktionskomponenten müssen zeitaufwändig selbst implementiert werden und es kann leicht zu verschiedenen Funktionsmängeln kommen.

Üben

🎜Als nächstes verwenden wir vant🎜 Am Beispiel dieser UI-Komponentenbibliothek stellen wir vor, wie kleine Programme UI-Komponentenbibliotheken verwenden können, um die Entwicklungseffizienz zu verbessern. 🎜

Komponentenbibliothek installieren

🎜Der erste Schritt bei der Verwendung der Komponentenbibliothek besteht darin, die Komponentenbibliothek in unser vorhandenes Applet zu integrieren. 🎜🎜Zuerst wählen wir das Bedienfeld Terminal in den Entwicklertools aus und erstellen ein neues Terminal. Das Terminal verwendet hier das Terminal, das mit Ihrem Computer geliefert wird, z. B. die Befehlszeile im Windows-System oder unter MacOS Terminal. 🎜🎜🎜🎜Dann Geben Sie im Terminal npm -v ein, um zu prüfen, ob der aktuelle Computer mit dem Tool npm ausgestattet ist. Das Tool npm ist ein Tool zum Herunterladen von Netzwerksoftwarepaketen und gehört zu Nodejscode>, wenn auf Ihrem Computer kein npm vorhanden ist, können Sie zuerst nodejs🎜 und schließen Sie die Installation ab, npm wird nach der Installation mitgeliefert. 🎜🎜🎜🎜Verdammt Nachdem der Computer über npm verfügt, können wir damit das Softwarepaket vant in unser Miniprogrammprojekt herunterladen. Die spezifischen Schritte finden Sie unter vant Schnellstartdokument 🎜 Einfach bedienen. 🎜🎜Nachdem der erste Schritt erfolgreich war, sollten Sie etwas wie das Bild unten sehen🎜🎜🎜🎜Im zweiten Schritt folgen wir den Anweisungen und ändern den style:v2 von app.json Löschen 🎜🎜🎜🎜 In Im dritten Schritt folgen wir den Anweisungen und ändern project.config.json wie folgt🎜🎜🎜🎜Ein Problem hierbei ist, dass wenn Sie ein reines kleines Programmprojekt sind, package.json Datei, also Die package.json-Datei, auf die in dieser Konfiguration verwiesen wird, wird nicht gefunden. 🎜🎜Wir können den Befehl npm init -y verwenden, um eines manuell zu erstellen. Die Ergebnisse sind wie folgt: 🎜🎜🎜🎜Da wir das npm-Paket vor der Erstellung von package.json installiert haben, müssen wir es erneut ausführen npm i @ vant/weapp -S --produktion, um sicherzustellen, dass das Element dependencies in der Datei package.json @vant/weapp hat. 🎜🎜Der vierte und letzte Schritt besteht darin, Tools-Build npm in der oberen Menüleiste der Entwicklertools zu verwenden, um das von uns installierte npm-Paket zu erstellen Es wird ein Fehler gemeldet, der auf die neue Version der Mini-Programmentwicklung zurückzuführen ist, wie in der vant-Dokumentation angegeben. Das Parsing-Verzeichnis für npm-Pakete durch Mini-Programme ist jetzt miniprogram_npm. 🎜🎜🎜🎜Also Wir müssen den Anweisungen folgen, um das Element miniprogramNpmDistDir unter packNpmRelationList in project.config.json in ./ zu ändern . Wie unten gezeigt. 🎜🎜🎜🎜Dann Wir verwenden die Entwicklertools wieder, um npm zu erstellen, wie Sie im Bild unten sehen können. Das Verzeichnis miniprogram_npm wird automatisch zum Miniprogrammverzeichnis hinzugefügt, das speziell zur Verwaltung aller npm-Pakete verwendet wird. 🎜🎜🎜🎜

Die Erfahrung hier ist, dass die Regeln für die Entwicklung von Miniprogrammen möglicherweise aktualisiert werden und wenn Tools von Drittanbietern zu deren Integration verwendet werden, müssen flexible Konfigurationsanpassungen basierend auf der tatsächlichen Situation vorgenommen werden.

Nutzung der Komponentenbibliothek

Nach der Installation der Komponentenbibliothek können wir mit der Verwendung aller Komponenten in der Komponentenbibliothek beginnen. Lassen Sie uns zunächst das vorherige Sucheingabefeld umwandeln und die von vant bereitgestellte Suchkomponente verwenden.

Die Verwendung der UI-Komponentenbibliothek ist die gleiche wie die Verwendung unserer selbst entwickelten Komponenten. Beide müssen zunächst die in die JSON-Datei einzuführenden Komponenten deklarieren. Die Dokumentation von vant sieht dies auch vor Verweise auf jede Komponente, wir können einfach ihren Anweisungen folgen.

Denken Sie daran, nach dem Ändern der JSON-Datei manuell auf „Kompilieren“ zu klicken, damit sie wirksam werden. Im Gegensatz zu WXML- und WXSS-Dateiänderungen werden Änderungen durch die Hot-Reload-Funktion in Echtzeit wirksam.

Darüber hinaus enthalten die Attribute von Komponenten wie der Suchkomponente die Bindung variabler Werte, d. h. value, der dem in das Suchfeld eingegebenen Inhalt entspricht, also benötigen wir um es in js hinzuzufügen Deklarieren Sie eine Variable in der Datei, um diesen Wert zu speichern und den in das Suchfeld eingegebenen Inhalt zu empfangen.

Dies Auf diese Weise haben wir die Transformation des Suchfelds abgeschlossen und die Verwendung der UI-Komponentenbibliothek geübt.

value，它对应于搜索框中输入的内容，所以我们需要在js文件中声明一个用于存储这个值的变量以接收搜索框中输入的内容。

这样，我们就完成了搜索框的改造，也实践了UI组件库的使用。

接下来，我们可以阅读vant文档，通过组合各种组件库已有的组件，大大加快许多功能的开发。

总结

这一篇我们介绍了如何使用已有的UI组件库来提高我们开发小程序的效率，主要是安装和使用Als nächstes können wir die vant-Dokumentation lesen und die Entwicklung vieler Funktionen erheblich beschleunigen, indem wir vorhandene Komponenten aus verschiedenen Komponentenbibliotheken kombinieren.

Zusammenfassung

In diesem Artikel haben wir vorgestellt, wie wir vorhandene UI-Komponentenbibliotheken verwenden können, um die Effizienz unserer kleinen Programmentwicklung, hauptsächlich der Installation Code>, zu verbessern und <code>use in zwei Schritten. Im nächsten Artikel werden wir die leistungsstarken Funktionen der vant-Komponentenbibliothek kombinieren, um die funktionale Implementierung einer vollständigen Homepage abzuschließen. Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonSo installieren und verwenden Sie die UI-Komponentenbibliothek im Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!