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

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

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

實(shí)作

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

安裝元件庫(kù)

使用元件庫(kù)的第一步，就是將元件庫(kù)整合進(jìn)我們現(xiàn)有的小程式。

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

然後在終端機(jī)內(nèi)輸入npm -v檢查目前電腦是否裝有npm工具，npm工具是用來(lái)下載網(wǎng)路軟體套件的工具，隸屬於Nodejs，如果電腦上沒(méi)有npm的話，可以先去下載nodejs 並完成安裝，安裝後會(huì)自備npm。

當(dāng)電腦擁有npm後，我們便可使用它來(lái)下載vant軟體包到我們的小程式專案內(nèi)，具體步驟參考vant快速上手文檔 操作即可。

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

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

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

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

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

由於我們?cè)诮ackage.json前進(jìn)行了npm套件的安裝，所以這裡還需要重新執(zhí)行一遍npm i @vant/weapp -S --production以確保package.json檔案中的dependencies一項(xiàng)有@vant/weapp。

第四步，也是最後一步，就是使用開發(fā)者工具頂部選單列中的工具-構(gòu)建npm對(duì)我們安裝的npm套件進(jìn)行構(gòu)建，這時(shí)候會(huì)提示報(bào)錯(cuò)，這是由於新版的小程式開發(fā)如vant文檔所說(shuō)，小程式對(duì)於npm套件的解析目錄如今變成了miniprogram_npm。

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

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

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

元件庫(kù)使用

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

使用UI元件庫(kù)的方式與使用我們自己開發(fā)的元件方式一致，都是先在json檔案中宣告要引入的元件

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

記得修改json檔案後要手動(dòng)點(diǎn)擊編譯才能生效，不同於wxml和wxss檔案的修改會(huì)透過(guò)熱重載功能即時(shí)生效。

另外，對(duì)於搜尋元件這樣的元件，其屬性中包含變數(shù)值的綁定，也就是value，它對(duì)應(yīng)到搜尋框中輸入的內(nèi)容，所以我們需要在js檔案中宣告一個(gè)用於儲(chǔ)存這個(gè)值的變數(shù)以接收搜尋框中輸入的內(nèi)容。

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

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

總結(jié)

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

更多程式相關(guān)知識(shí)，請(qǐng)?jiān)煸L：程式設(shè)計(jì)入門！ ！

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