8000 GitHub - gg1122/Vant-Aliapp: 支付宝小程序版本 Vant 组件库。
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

gg1122/Vant-Aliapp

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

logo

轻量、可靠的小程序 UI 组件库

介绍

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

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

预览

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

使用之前

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

npm

安装

通过 npm 安装使用(推荐)

  • 通过 npm 安装
npm i vant-aliapp -S --production
  • 通过 yarn 安装
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 编译,详情可参考支付宝小程序自定义组件使用介绍

注意事项

checkbox、collapse、dropdown-menu、goods-action、grid、radio、tab、tabbar、index-bar、sidebar等组件涉及到微信的relations的写法,目前原生支付宝或钉钉小程序不支持直接引入这些组件。解决方法按以下步骤进行:

  1. npm下载Antmove命令行工具

npm install antmove -g

  1. 在你的项目根目录下,使用 alipay-compiler 对项目进行转换

antmove -t alipay-compiler

  1. 转换后的支付宝小程序即可支持以上组件

联系

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

链接

开源协议

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

感谢

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

About

支付宝小程序版本 Vant 组件库。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%
0