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

前面介紹了小程序開(kāi)發(fā)的基礎(chǔ)技能，比如頁(yè)面開(kāi)發(fā)、組件開(kāi)發(fā)、云開(kāi)發(fā)等，這些都是功能層面的。這篇我們單獨(dú)通過(guò)一講介紹一下小程序開(kāi)發(fā)UI層面的技能，即使用UI組件庫(kù)。【相關(guān)學(xué)習(xí)推薦：小程序開(kāi)發(fā)教程】

使用UI組件庫(kù)的好處不言而喻，可以統(tǒng)一我們小程序的整體UI風(fēng)格，同時(shí)還可以大大節(jié)省開(kāi)發(fā)小程序的時(shí)間。因?yàn)閷?duì)于很多復(fù)雜的功能組件，自己要實(shí)現(xiàn)起來(lái)比較費(fèi)時(shí)間，還容易存在各種功能缺陷。

實(shí)踐

接下來(lái)我們就以 vant 這款UI組件庫(kù)為例，介紹一下小程序如何使用UI組件庫(kù)來(lái)提高開(kāi)發(fā)效率。

安裝組件庫(kù)

使用組件庫(kù)的第一步，就是將組件庫(kù)集成進(jìn)我們現(xiàn)有的小程序。

首先，我們?cè)陂_(kāi)發(fā)者工具中選擇終端面板，并新建一個(gè)終端，這里的終端使用的就是你電腦自帶的終端，比如Window系統(tǒng)中的命令行，或MacOS下的終端。

然后在終端內(nèi)輸入npm -v檢查當(dāng)前電腦是否裝有npm工具，npm工具是用于下載網(wǎng)絡(luò)軟件包的工具，隸屬于Nodejs，如果電腦上沒(méi)有npm的話(huà)，可以先去下載 nodejs 并完成安裝，安裝后會(huì)自帶npm。

當(dāng)電腦擁有npm后，我們便可使用它來(lái)下載vant軟件包到我們的小程序項(xiàng)目?jī)?nèi)，具體步驟參照 vant快速上手文檔 操作即可。

在第一步成功后應(yīng)該會(huì)看到類(lèi)似下圖所展示的樣子

在第二步中我們按照指示，將app.json的style:v2進(jìn)行刪除

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

這里存在一個(gè)問(wèn)題是，如果你是一個(gè)純小程序項(xiàng)目，起初是不存在package.json文件的，所以這里配置中所指向的package.json文件會(huì)找不到。

我們可以使用npm init -y命令手動(dòng)創(chuàng)建一個(gè)，結(jié)果如下

由于我們?cè)趧?chuàng)建package.json前進(jìn)行了npm包的安裝，所以這里還需要重新執(zhí)行一遍npm i @vant/weapp -S --production以確保package.json文件中的dependencies一項(xiàng)有@vant/weapp。

第四步，也是最后一步，就是使用開(kāi)發(fā)者工具頂部菜單欄中的工具-構(gòu)建npm對(duì)我們安裝的npm包進(jìn)行構(gòu)建，這時(shí)候會(huì)提示報(bào)錯(cuò)，這是由于新版的小程序開(kāi)發(fā)如vant文檔所說(shuō)，小程序?qū)τ趎pm包的解析目錄如今變成了miniprogram_npm。

所以我們需要按照指示將project.config.json中packNpmRelationList下的miniprogramNpmDistDir一項(xiàng)修改為./，如下圖所示。

然后我們重新使用開(kāi)發(fā)者工具進(jìn)行npm構(gòu)建，完成后可以看到下圖的樣子，小程序目錄中也自動(dòng)增加了miniprogram_npm這一目錄，專(zhuān)門(mén)用于管理所有的npm包。

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

組件庫(kù)使用

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

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

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

記得修改json文件后要手動(dòng)點(diǎn)擊編譯才能生效，不同于wxml和wxss文件的修改會(huì)通過(guò)熱重載功能實(shí)時(shí)生效。

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

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

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

總結(jié)

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

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問(wèn)：編程入門(mén)！！

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