El subprograma WeChat utiliza la biblioteca de componentes vant

Sitio web oficial: https://vant-contrib.gitee.io/vant-weapp/#/quickstart

1. Inicializar npm

npm intall

y luego seguir adelante

hasta que aparezca paquete.json

 2, instalar vant

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

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

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

 3, modificar app.json

 4, construye el paquete npm

Abra las herramientas de desarrollo de WeChat, haga clic en Herramientas -> Construir npm

 Genere el archivo miniprogram_npm:

5. Modificar proyecto.config.json

“packNpmManually”:true

 

 6. A continuación, busque los componentes correspondientes para uso normal.

Tome el botón como ejemplo aquí:

introducir

Introduzca los componentes en app.jsono index.json, consulte Inicio rápido para obtener más detalles .

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

demostración de código

tipo de botón

páginas/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>

no encontró éxito

limpiar cache

 

 es decir, uso normal