Vant Weapp

Vant Weapp is the WeChat Mini Program version of Vant, a mobile component library. Both are based on the same visual specifications and provide consistent API interfaces to help developers quickly build Mini Program applications.

Features

• 🚀 70+ high-quality components covering mainstream mobile scenarios
• 🚀 Written in TypeScript with complete type definitions
• 🚀 Zero external dependencies, no reliance on third-party npm packages
• 💪 Support for theme customization with 700+ built-in theme variables
• 💪 Support for dark mode
• 💪 Support for internationalization with 30+ built-in language packs
• 📖 Rich documentation and component examples in Chinese and English
• 🍭 Support for npm build mode and native build mode

Installation

Method 1: Install via npm (Recommended)

# Install via npm
npm i @vant/weapp -S --production

# Install via yarn
yarn add @vant/weapp --production

# Install via pnpm
pnpm add @vant/weapp --production

Method 2: Download Source Code

Download Vant Weapp source code directly via git and copy the dist directory to your project.

git clone https://github.com/youzan/vant-weapp.git

Using Components

Taking the button component as an example, you only need to import the corresponding custom component in the json file.

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

Then you can use the component directly in wxml:

<van-button type="primary">Button</van-button>

Online Experience

You can experience the component library examples by scanning the Mini Program QR code below with WeChat:

[Mini Program QR Code Image]

Links

• Official Documentation
• GitHub