Vant Aliapp

Note: The warehouse has been shut down

If you are looking for other alternatives, it is recommended to use the official antD applet version provided by the official

---

Lightweight and reliable applet UI component library

introduce

Vant Aliapp is the Alipay applet version of Vant's mobile Vue component library. The two are based on the same visual specifications and provide a consistent API interface to help developers quickly build applet applications.

Vant Aliapp is obtained through the Antmove applet converter based on Vant-Weapp conversion and has made a small amount of compatible adaptation adjustments.

Preview

Alipay scans the QR code of the mini program below to experience the component library example:

Before using

Before you start using Vant Aliapp, you need to read the relevant documentation for the custom components of the Alipay applet.

npm

• alipay
• Nail

Install

Install and use through npm (recommended)

• Install via npm

npm i vant-aliapp -S --production

• Install via yarn

yarn add vant-aliapp --production

npm uses example (vant-alipay-area).

Download the code to use

Download the Vant Aliapp source code directly through git and copy the alipay/npm directory to your own project

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

Usage Components

Add the following code to app.js

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

Taking the button component as an example, you only need to introduce the custom component corresponding to the button in the json file.

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

npm Address: vant-aliapp/dist/dist/button/index

Then you can use the components directly in axml

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

Preview in Developer Tools

Download this project locally, use the Alipay IDE to open alipay/vant-app , install the dependencies, and then preview it.

When previewing, please enable component2 compilation in the project details settings. For details, please refer to the introduction to the custom components of the Alipay applet.

Things to note

• When you introduce the Vant-aliapp component library into your project and the runtime 'identifi(arguments) is disabled in sjs' error, you can cancel the IDE interface details > enable the checkmark for basic library 2.0 build to solve it
• The solution to using vant's checkbox, collapse, dropdown-menu, goods-action, grid, radio, tab, tabbar, index-bar, sidebar and other components on Alipay, follow the following steps:
  1. npm download Antmove command line tool

  npm install antmove -g

  2. In your project root directory, use alipay-compiler to convert the project

  antmove -t alipay-compiler

  3. The converted Alipay mini program can support the above components
• If you introduce a component and find that the rendering fails, you can refer to the example in the example to imitate it. If you have any questions, you can scan the Dingding QR code below to contact us

connect

If you encounter problems during use, you can seek help through the following ways.

• DingTalk Communication Group:
• Email: [email protected]

Link

• Update log
• Feedback

Open Source Protocol

This project is based on the MIT protocol, please freely enjoy and participate in open source.

grateful

Thanks to the vant team for their contribution to vant-weapp, this project is converted based on vant-weapp and has been adapted and compatible with the Alipay mini program platform.