Extended Component

Introduction

Mini Program extended component library provides important additional capabilities on the basic component library basis. The extended component library contains a set of open-source UI components, which are developed on the basis of Mini Program custom component specifications. Mini Program developers can reuse the extended components rapidly.

Installation

Use the following sample code to install the dependency:

$ 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:

{

  "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:

{

  "usingComponents": {

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

}

2. Call the component in the AXML file.

<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:

• 中文
• en-US

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.

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

Samples

Check the following sample:

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

Version upgrade

Upgrade UI component version by using the following command:

$ npm update mini-ali-ui --save

Note:

The latest version is 1.3.0.