This topic guides mini-program developers to install and use the Ant Design Mini UI component library in mini-program projects.

Preparations

Before using the Ant Design Mini components, mini-program developers need to complete the following tasks:

Install dependencies

Open your terminal and run the following command to install the Ant Design Mini component library as a dependency. This command downloads and sets up the necessary files for the library.

$ npm i antd-mini --save

Enable component2

Enable component2 in your project to allow the components to operate in the new lifecycle mode and achieve enhanced functionality. Use either of the following methods to enable component2:

• Modify mini.project.json

Open the mini.project.json file located in the root directory of your project, and then check if the file includes the "format":2 field:

• If the file includes the "format":2 field, set compileOptions.component2 to true. See the following sample code for details:

{
  "format": 2,
  "compileOptions": {
    "component2": true
  }
}

• If the file does not include the "format":2 field, add the following configuration in the file:

{
  "component2": true
}

• Use Mini Program Studio (IDE)

Open Mini Program Studio (IDE), go to Detail > Mini Program config, and select the Enable Component2 option. See the following image for details:

Use components

To use Ant Design Mini components, take the following two steps:

Step 1: Import components in JSON file

In the JSON file of the page where you want to use the components, specify the usingComponents field using key-value pairs to import desired components. The key is the component name and the value is the component's location in the Ant Design Mini library. The following sample code provides an example of using the button component:

{
  "usingComponents": {
    "ant-button": "antd-mini/es/Button/index"
  }
}

Step 2: Use components in AXML file

Open the AXML file of your page and use the corresponding component tag as necessary. The following sample code provides an example of using the button component:

<ant-button>This is a button</ant-button>

To use other components, replace ant-button with the desired component name and provide the necessary content within the tags.

Upgrade

To use the latest version of the Ant Design Mini component library, run the following command in your terminal:

$ npm update antd-mini --save

For the latest version information, check the component library's GitHub release notes page.

Related topics

Component reference