平台兼容性

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


vant Weapp

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

预览

预览

在uni-app中使用vant-weapp

  1. 下载代码

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

    方式二:

    • 在项目根目录下新建 wxcomponents 目录 ,此目录应该与components 目录同级。
    • 直接通过 git 下载 vant-weapp 最新源代码,并将dist目录拷贝到新建的wxcomponents目录下,并重命名distvant-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 使用心得

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问