Home

Awesome

注意:该仓库已停止维护

如果寻找其它的替代方案,建议使用官方提供的 antD小程序版

<br/> <br/> <br/> <br/> <br/> <hr/> <p align="center"> <img alt="logo" src="https://img.yzcdn.cn/vant/logo.png" width="120" style="margin-bottom: 10px;"> </p> <h3 align="center">轻量、可靠的小程序 UI 组件库</h3>

介绍

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

Vant Aliapp 通过 Antmove 小程序转换器基于 Vant-Weapp 转换得到,并做了少量的兼容适配调整。

预览

支付宝扫描下方小程序二维码,体验组件库示例:

<img src="https://cache.amap.com/ecology/tool/amap-backend-server/platform/img/16268702852015063.png" width="200" height="200" style="margin-top: 10px;" >

使用之前

在开始使用 Vant Aliapp 之前,你需要先阅读 支付宝小程序自定义组件 的相关文档。

npm

安装

通过 npm 安装使用(推荐)

npm i vant-aliapp -S --production
yarn add vant-aliapp --production

npm 使用 example(vant-alipay-area)

下载代码使用

直接通过 git 下载 Vant Aliapp 源代码,并将alipay/npm目录拷贝到自己的项目中

git clone https://github.com/ant-move/Vant-Aliapp.git

使用组件

在 app.js 中加入下列代码

import 'vant-aliapp/dist/__antmove/component/componentClass.js'

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

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

npm 地址:vant-aliapp/dist/dist/button/index

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

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

在开发者工具中预览

下载本项目到本地,使用支付宝 IDE 打开 alipay/vant-app, 安装依赖,即可预览。

预览时请在项目详情设置中开启 component2 编译,详情可参考支付宝小程序自定义组件使用介绍

注意事项

联系

如果您在使用的过程中碰到问题,可以通过下面几个途径寻求帮助。

链接

开源协议

本项目基于 MIT协议,请自由地享受和参与开源。

感谢

感谢 vant 团队对 vant-weapp 的贡献,本项目基于 vant-weapp 转换而来,并做了支付宝小程序平台的适配兼容。