Get started

Note: The mini-antui component library provided by Ant Design Mini is obsolete and has been replaced with the updated antd-mini library. For more information about the updated library, refer to the Get started guide.

This topic guides mini-program developers to install and use the mini-antui component library in mini-program projects.

Installation

Use the following sample code to install the dependency:

copy
$ npm install mini-ali-ui --save

Procedures

To use the component, complete the following steps:

  1. Register the component in JSON file of the related page. For example, the title component registration is as below:
copy
{

  "usingComponents": {

    "title": "mini-ali-ui/es/title/index"
  }
}

If you install the rpx version of the extended component library, modify the component name during registration:

copy
{

  "usingComponents": {

    "title": "mini-ali-ui-rpx/es/title/index"
  }

}
  1. Call the component in the AXML file.
copy
<title

  hasLine="true"

  iconURL="https://example.com/images/T1HHFgXXVeXXXXXXXX.png"

  type="close"

  onActionTap="titleClose"

>the internal title can be closed 
</title>

Internationalization

The texts of all the components are translated. And the following languages are now supported:

Note:

The default language is Chinese.

Method

To enable internalization for mini programs, add the following key and value to the globalData field in the app.js file.

key

value

miniAliUiLang

''、'en-US'

If the miniAliUiLang key is void or not defined, the default language will be Chinese.

Samples

Check the following sample:

copy
App({
  globalData: {
    miniAliUiLang: 'en-US',
  },
  onLaunch() {},
});

Version upgrade

Upgrade UI component version by using the following command:

copy
$ npm update mini-ali-ui --save

Note:

The latest version is 1.3.0.