# Vant-Aliapp

**Repository Path**: itlookit/Vant-Aliapp

## Basic Information

- **Project Name**: Vant-Aliapp
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-15
- **Last Updated**: 2023-11-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 注意：该仓库已停止维护
如果寻找其它的替代方案，建议使用官方提供的 [antD小程序版](https://mini.ant.design/)


<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](https://github.com/youzan/vant) 的支付宝小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。

> Vant Aliapp 通过 [Antmove](https://ant-move.github.io/website/) 小程序转换器基于 [Vant-Weapp](https://youzan.github.io/vant-weapp/#/intro) 转换得到，并做了少量的兼容适配调整。

## 预览

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

<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 之前，你需要先阅读 [支付宝小程序自定义组件](https://docs.alipay.com/mini/framework/custom-component-overview) 的相关文档。

## npm

* [alipay](https://www.npmjs.com/package/vant-aliapp)
* [钉钉](https://www.npmjs.com/package/vant-aliapp-dd)
## 安装

### 通过 npm 安装使用（推荐）

* 通过 npm 安装
```bash
npm i vant-aliapp -S --production
```

* 通过 yarn 安装

```bash
yarn add vant-aliapp --production
```

> npm 使用 [example（vant-alipay-area）](https://github.com/ant-move/Vant-Aliapp/blob/master/alipay/vant-app/pages/area/index.json)。

### 下载代码使用

直接通过 git 下载 Vant Aliapp 源代码，并将`alipay/npm`目录拷贝到自己的项目中
```bash
git clone https://github.com/ant-move/Vant-Aliapp.git
```

## 使用组件

在 app.js 中加入下列代码

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

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

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

> npm 地址：`vant-aliapp/dist/dist/button/index`

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

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

## 在开发者工具中预览

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

> 预览时请在项目详情设置中开启 `component2` 编译，详情可参考[支付宝小程序自定义组件使用介绍](https://docs.alipay.com/mini/framework/custom-component-overview#%E4%BD%BF%E7%94%A8%E9%A1%BB%E7%9F%A5)。

## 注意事项

* 当你项目中引入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等组件的解决方法，按以下步骤进行：
    1. npm下载Antmove命令行工具
    > npm install antmove -g
    2. 在你的项目根目录下，使用 alipay-compiler 对项目进行转换
    > antmove -t alipay-compiler
    3. 转换后的支付宝小程序即可支持以上组件
* 如引入某个组件发现渲染失败时，可以参照 [示例](https://github.com/ant-move/Vant-Aliapp/tree/master/alipay/vant-app)中的例子仿写，如还有疑问可以扫描下方钉钉二维码联系我们

## 联系

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

* 钉钉交流群： <img width='200px' src='https://camo.githubusercontent.com/1ac9a77e46126bc321740475803f3b49ffe7f83e1cfdd75683de399a6065272b/68747470733a2f2f63616368652e616d61702e636f6d2f65636f6c6f67792f746f6f6c2f616e746d6f76652f7765622f6173736574732f636f6e746163742d64696e6764696e672e6a7067'/>
* 邮件：amap-appx@service.autonavi.com

## 链接

* [更新日志](https://ant-move.github.io/vant-ailapp-docs/#/changelog)
* [意见反馈](https://github.com/ant-move/Vant-Aliapp/issues)

## 开源协议

本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89)协议，请自由地享受和参与开源。

[vant-weapp]: https://github.com/youzan/vant-weapp
[MIT]: http://opensource.org/licenses/MIT
[小程序简易教程]: https://mp.weixin.qq.com/debug/wxadoc/dev/
[小程序框架介绍]: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html
[微信开发者工具]: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

## 感谢

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