本篇文章給大家分享一個小程序開發(fā)實戰(zhàn)，介紹一下小程序中安裝和使用UI組件庫的方法，希望對大家有所幫助！

前面介紹了小程序開發(fā)的基礎(chǔ)技能，比如頁面開發(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這一目錄，專門用于管理所有的npm包。

這里的經(jīng)驗就是，小程序開發(fā)的規(guī)則可能會產(chǎn)生更新，當(dāng)使用第三方工具與其集成時需要根據(jù)實際情況做配置上的靈活調(diào)整。

組件庫使用

安裝好組件庫以后，我們便可以開始使用組件庫中的所有組件。首先讓我們先來改造一下之前的搜索輸入框，改為使用vant所提供的搜索組件。

使用UI組件庫的方式與使用我們自己開發(fā)的組件方式一致，都是先要在json文件中聲明要引入的組件

vant的文檔也提供了每個組件的引用方式，我們按照其指示操作即可。

記得修改json文件后要手動點擊編譯才能生效，不同于wxml和wxss文件的修改會通過熱重載功能實時生效。

另外，對于搜索組件這樣的組件，其屬性中包含變量值的綁定，也就是value，它對應(yīng)于搜索框中輸入的內(nèi)容，所以我們需要在js文件中聲明一個用于存儲這個值的變量以接收搜索框中輸入的內(nèi)容。

這樣，我們就完成了搜索框的改造，也實踐了UI組件庫的使用。

接下來，我們可以閱讀vant文檔，通過組合各種組件庫已有的組件，大大加快許多功能的開發(fā)。

總結(jié)

這一篇我們介紹了如何使用已有的UI組件庫來提高我們開發(fā)小程序的效率，主要是安裝和使用兩個步驟。在下一篇中，我們將結(jié)合vant組件庫的強大能力，來完成一個完整首頁的功能實現(xiàn)。

更多編程相關(guān)知識，請訪問：編程入門！！

以上是小程序中怎么安裝和使用UI組件庫的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！