@gmkj/vant

gm-vant

介绍

冠美基础组件库。

本项目 copy 自vant-weapp@1.10.16。通过转换工具扩展到【京东】、【支付宝/淘宝】、【飞书/抖音】3 个平台版本。自第一次构建后，4 个平台独立维护。

使用之前

使用 Vant Weapp 前，请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。

安装

方式一. 通过 npm 安装 (推荐)

小程序已经支持使用 npm 安装第三方包，详见 npm 支持

# 安装 支付宝/淘宝
npm i @gmkj/vant-my -S --production

# 安装 微信
npm i @gmkj/vant-wx -S --production

# 安装 飞书/抖音
npm i @gmkj/vant-tt -S --production

# 安装 京东
npm i @gmkj/vant-jd -S --production

方式二. 下载代码

直接通过 git 下载 Vant Weapp 源代码，并将 dist 目录拷贝到自己的项目中。

git clone https://gitee.com/chongqings_crown_and_beauty/gm-vant.git

使用组件

以按钮组件为例，只需要在 json 文件中引入按钮对应的自定义组件即可

{
  "usingComponents": {
    "van-button": "/path/to/vant-weapp/dist/button/index"
  }
}

接着就可以在 wxml 中直接使用组件

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

在开发者工具中预览

# 安装项目依赖
npm install

# 执行组件copy
npm run build

打开微信开发者工具，把/examples/wecaht目录添加进去就可以预览示例了。