Overview
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:
- 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"
}
}
- 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:
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:
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.