平台兼容性

小程序自定义组件的通用使用方式详见：uni-app中使用小程序自定义组件教程

vant Weapp

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。

预览

在uni-app中使用vant-weapp

1. 下载代码

   方式一： 点击页面右上角下载 ，将下载代码拷贝到项目根目录。 （注：此方式下载代码可能不是最新版）

   方式二：

   • 在项目根目录下新建 wxcomponents 目录 ，此目录应该与components 目录同级。
   • 直接通过 git 下载 vant-weapp 最新源代码，并将dist目录拷贝到新建的wxcomponents目录下，并重命名dist为vant-weapp。

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

2. pages.json 配置

   打开pages.json ,引入需要使用的组件。

   {
   "pages": [
       {
           "path": "pages/index/index",
           "style": {
               "navigationBarTitleText": "vant-weapp",
                // 使用小程序组件
               "usingComponents": {
                   "van-button": "/wxcomponents/vant-weapp/button/index"
               }
           }
       }
   ]
   }

3. 使用vant-weapp

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

Tips

• vant-weapp 仅支持小程序/App ,暂不支持H5 。
• 小程序组件需要放在项目根目录下的wxcomponents文件夹。
• 注意数据和事件绑定的差异，使用时应按照vue的数据和事件绑定方式。
• 原事件命名以短横线分隔的需要手动修改小程序组件源码为驼峰命名，比如：this.$emit('left-click')修改为this.$emit('leftClick')
• vant-weapp各组件文档请参考vant-weapp 使用文档
• uni-app 小程序组件使用规范请参考 uni-app 小程序组件支持
• 关联阅读 vant 使用心得