如果寻找其它的替代方案,建议使用官方提供的 antD小程序版
Vant Aliapp 是移动端 Vue 组件库 Vant 的支付宝小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。
Vant Aliapp 通过 Antmove 小程序转换器基于 Vant-Weapp 转换得到,并做了少量的兼容适配调整。
支付宝扫描下方小程序二维码,体验组件库示例:
在开始使用 Vant Aliapp 之前,你需要先阅读 支付宝小程序自定义组件 的相关文档。
- 通过 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
编译,详情可参考支付宝小程序自定义组件使用介绍。
- 当你项目中引入Vant-aliapp组件库,运行时报‘identifi(arguments) is disallowed in sjs’错误时, 可以取消IDE界面 详情 > 启用基础库2.0构建的勾选来解决
- 支付宝上使用vant的checkbox、collapse、dropdown-menu、goods-action、grid、radio、tab、tabbar、index-bar、sidebar等组件的解决方法,按以下步骤进行:
- npm下载Antmove命令行工具
npm install antmove -g
- 在你的项目根目录下,使用 alipay-compiler 对项目进行转换
antmove -t alipay-compiler
- 转换后的支付宝小程序即可支持以上组件
- 如引入某个组件发现渲染失败时,可以参照 示例中的例子仿写,如还有疑问可以扫描下方钉钉二维码联系我们
如果您在使用的过程中碰到问题,可以通过下面几个途径寻求帮助。
- 钉钉交流群:
- 邮件:amap-appx@service.autonavi.com
本项目基于 MIT协议,请自由地享受和参与开源。
感谢 vant 团队对 vant-weapp 的贡献,本项目基于 vant-weapp 转换而来,并做了支付宝小程序平台的适配兼容。