小程序使用vant Weapp組件庫詳細(xì)教程
要說到小程序開發(fā)過程中用到的UI組件庫，我第一個想到的就是vant，因?yàn)閷τ谖襾碚f，這個組件庫里面的UI界面比較符合我的審美，顏值還不錯，另外最重要的是，里面的功能比較齊全，項(xiàng)目之中要用到的一些需求，在這里都可以找到并且直接使用，就很nice了。
小程序使用輕量、可靠的小程序 UI 組件庫 vant-weapp
Github源碼：https://github.com/youzan/vant-weapp
中文文檔：https://vant-contrib.gitee.io/vant-weapp/#/intro
話不多說，記錄一下這個框架的使用~
1：打開微信開發(fā)者工具，填寫自己的appid和項(xiàng)目名稱，選擇不使用云服務(wù)，新建一個項(xiàng)目。
2：右擊在選擇在終端打開
進(jìn)入項(xiàng)目的根目錄底下，注意，一定要進(jìn)入根目錄哦，使用cd …/返回上一級目錄~
3：小程序已經(jīng)支持使用 npm 安裝第三方包，
這里通過 npm 安裝
1、第一步：npm init
2、第二步：npm install --production
3、第三步： npm i @vant/weapp -S --production或者 npm i vant-weapp -S --production復(fù)制
這里需要注意一下
npm i vant-weapp -S --production或者npm i @vant/weapp -S --production
引入的區(qū)別
使用npm i vant-weapp安裝的時候，到時候在在app.json或index.json中引入組件，需要使用這樣的路徑
{
"usingComponents": {
"van-button": "../../miniprogram_npm/vant-weapp/button/index"
}
}
使用npm i @vant/weapp安裝的時候，到時候在在app.json或index.json中引入組件，需要使用這樣的路徑（推薦，因?yàn)檫@個可以直接抄文檔，不需要改變引入路徑的~）
{
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
}
4：在微信開發(fā)工具執(zhí)行npm 構(gòu)建，點(diǎn)擊工具里面，構(gòu)建npm
構(gòu)建過程需要等待一會兒，不要捉急
構(gòu)建完會生成一個miniprogram_npm文件夾
如果構(gòu)建完如果編譯報(bào)錯，再構(gòu)建一次就好了
5：使用vant-weapp
看文檔上的代碼，來實(shí)現(xiàn)一個小按鈕，照著文檔復(fù)制粘貼即可~就是這么的任性
https://vant-contrib.gitee.io/vant-weapp/#/button
在app.json或index.json中引入組件
上面說了，我是用 npm i @vant/weapp -S --production這種方式安裝的，所以引入路徑可以直接使用文檔上，直接粘貼，不需要修改路徑~
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
然后再copy一下wxml的代碼文章來源：http://www.zghlxwxcb.cn/news/detail-597949.html
<van-button type="default">默認(rèn)按鈕</van-button>
<van-button type="primary">主要按鈕</van-button>
<van-button type="info">信息按鈕</van-button>
<van-button type="warning">警告按鈕</van-button>
<van-button type="danger">危險(xiǎn)按鈕</van-button>
好了，這個時候就已經(jīng)可以了
文章來源地址http://www.zghlxwxcb.cn/news/detail-597949.html
到了這里，關(guān)于【小程序使用vant Weapp組件庫詳細(xì)教程】的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
