WeChat applet uses vant component library

Official website: https://vant-contrib.gitee.io/vant-weapp/#/quickstart

1. Initialize npm

npm intall

and then keep going

until package.json appears

 2, install vant

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

 3, Modify app.json

 4, build npm package

Open the WeChat developer tools, click Tools -> Build npm

 Generate miniprogram_npm file:

5. Modify project.config.json

“packNpmManually”:true

 

 6. Next, find the corresponding components for normal use

Take button as an example here:

introduce

Introduce components in app.jsonor index.json, see Quick Start for details .

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

code demo

button type

pages/home.wxml

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

found no success

clear cache

 

 i.e. normal use