用過小程序的幾個框架，最后還是選擇了用vant-weapp，喜歡這款框架的原因，可能就是它里面的組件很多，很豐富，夠用，在我的業(yè)務(wù)場景里面，大部分的需求都是可以在這個框架里面找到，不用自己大費周章的寫代碼，只需要去文檔里面，拿到組件出來，稍微的修改一下樣式，就可以完成自己的工作，這大概就是它吸引我的地方啦。

當(dāng)然選擇要慎重喲，這個框架最適合的就是做商城項目購物車，訂單，商品導(dǎo)航都是現(xiàn)成的呀

所以我就選擇了用這款框架做日常開發(fā)啦。在開發(fā)的過程中我會不間斷的記錄一下這個框架的使用~小程序使用輕量、可靠的小程序 UI 組件庫 vant-weapp~~

Github源碼：https://github.com/youzan/vant-weapp
中文文檔：https://vant-contrib.gitee.io/vant-weapp/#/intro

1：打開微信開發(fā)者工具，填寫自己的appid和項目名稱，選擇不使用云服務(wù)，新建一個項目。

image

2：右擊在選擇在終端打開

image

進(jìn)入項目的根目錄底下，注意，一定要進(jìn)入根目錄哦，使用cd ../返回上一級目錄~

image

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

image

image

image

這里需要注意一下
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中引入組件，需要使用這樣的路徑（推薦，因為這個可以直接抄文檔，不需要改變引入路徑的~）

{
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}
}

4：在微信開發(fā)工具執(zhí)行npm 構(gòu)建，點擊工具里面，構(gòu)建npm

image

構(gòu)建過程需要等待一會兒，不要捉急

image

構(gòu)建完會生成一個miniprogram_npm文件夾
如果構(gòu)建完如果編譯報錯，再構(gòu)建一次就好了

image

話不多說，來看看小程序vant-weapp的渲染商品卡片列表使用

先看一下官方文檔是給到的效果哦
https://vant-contrib.gitee.io/vant-weapp/#/card

文檔里面的代碼就很簡單

<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>

效果是這樣的：