用過小程序的幾個(gè)框架，最后還是選擇了用vant-weapp芋簿，喜歡這款框架的原因峡懈，可能就是它里面的組件很多，很豐富与斤，夠用肪康，在我的業(yè)務(wù)場(chǎng)景里面荚恶，大部分的需求都是可以在這個(gè)框架里面找到，不用自己大費(fèi)周章的寫代碼磷支，只需要去文檔里面谒撼，拿到組件出來，稍微的修改一下樣式雾狈，就可以完成自己的工作廓潜，這大概就是它吸引我的地方啦。
當(dāng)然選擇要慎重喲善榛，這個(gè)框架最適合的就是做商城項(xiàng)目購(gòu)物車辩蛋，訂單，商品導(dǎo)航都是現(xiàn)成的呀
所以我就選擇了用這款框架做日常開發(fā)啦移盆。在開發(fā)的過程中我會(huì)不間斷的記錄一下這個(gè)框架的使用~小程序使用輕量悼院、可靠的小程序 UI 組件庫(kù) vant-weapp~~
Github源碼：https://github.com/youzan/vant-weapp
中文文檔：https://vant-contrib.gitee.io/vant-weapp/#/intro
1：打開微信開發(fā)者工具，填寫自己的appid和項(xiàng)目名稱咒循，選擇不使用云服務(wù)据途，新建一個(gè)項(xiàng)目。
2：右擊在選擇在終端打開
進(jìn)入項(xiàng)目的根目錄底下叙甸，注意昨凡，一定要進(jìn)入根目錄哦，使用cd ../返回上一級(jí)目錄~
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
這里需要注意一下
npm i vant-weapp -S --production或者npm i @vant/weapp -S --production
引入的區(qū)別
使用npm i vant-weapp安裝的時(shí)候哪痰，到時(shí)候在在app.json或index.json中引入組件，需要使用這樣的路徑
{
"usingComponents": {
"van-button": "../../miniprogram_npm/vant-weapp/button/index"
}
}
使用npm i @vant/weapp安裝的時(shí)候久妆，到時(shí)候在在app.json或index.json中引入組件晌杰，需要使用這樣的路徑（推薦，因?yàn)檫@個(gè)可以直接抄文檔筷弦，不需要改變引入路徑的~）
{
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
}
4：在微信開發(fā)工具執(zhí)行npm 構(gòu)建肋演，點(diǎn)擊工具里面，構(gòu)建npm
構(gòu)建過程需要等待一會(huì)兒烂琴，不要捉急
構(gòu)建完會(huì)生成一個(gè)miniprogram_npm文件夾
如果構(gòu)建完如果編譯報(bào)錯(cuò)爹殊，再構(gòu)建一次就好了
話不多說，來看看小程序vant-weapp的渲染商品卡片列表使用
先看一下官方文檔是給到的效果哦
https://vant-contrib.gitee.io/vant-weapp/#/card
文檔里面的代碼就很簡(jiǎn)單
<van-card
num="2"
tag="標(biāo)簽"
price="10.00"
desc="描述信息"
title="商品標(biāo)題"
thumb="{{ imageURL }}"
>
<view slot="footer">
<van-button size="mini">按鈕</van-button>
<van-button size="mini">按鈕</van-button>
</view>
</van-card>
效果是這樣的：
