微信小程序中使用 Vant Weapp（Vant 的微信小程序版本）

微信小程序中使用 Vant Weapp（Vant 的微信小程序版本）

在微信小程序中使用 Vant Weapp（Vant 的微信小程序版本）可以快速构建美观的界面。以下是使用步骤和示例：

https://vant-ui.github.io/vant-weapp/0.x/#/quickstart

安装 Vant Weapp

首先需要通过 npm 安装 Vant Weapp 组件库：

# 初始化 npm（如果项目未初始化）
npm init -y

# 安装 Vant Weapp
npm i @vant/weapp -S --production

安装完成后，需要在微信开发者工具中：

• 点击「工具」->「构建 npm」
• 在项目设置中勾选「使用 npm 模块」
• 勾选「将JS编译成ES5」

配置与使用

在需要使用组件的页面 json 文件中引入组件：

{
  "navigationBarTitleText": "Vant 示例",
  "usingComponents": {
    "van-button": "vant-weapp/button"
  }
}

使用

<view class="photo">
  <van-button type="primary">按钮</van-button>
</view>