1 -> Life cycle
1.1 -> Application Lifecycle
In the app.js, you can define the following application lifecycle functions:
1.2 -> Page Lifecycle
In the page JS file, you can define the following page lifecycle functions:
The order in which the lifecycle APIs of page A are called
Open page A: onInit() -> onReady() -> onShow()
Open page B on page A:onHide()
Return to page A from page B: onShow()
Exit page A: onBackPress() -> onHide() -> onDestroy()
Page hidden to run in the background: onInactive() -> onHide()
Page reverts from running in the background to the foreground: onShow() -> onActive()
2 -> Resource Qualification and Access
2.1 -> Resource qualifiers
Resource qualifiers can be composed of one or more qualifiers that characterize the application scenario or device characteristics, including dimensions such as screen density, and the qualifiers are connected by hyphens (-). When you create a qualifier file in the resources directory, you need to know the naming requirements of the qualifier file and the matching rules between the qualifier file and the device status.
2.2 -> Naming requirements for resource qualifiers
The order in which the qualifiers are combined: screen density. Developers can select one or more of these qualifiers to form a directory name based on the usage scenario and device characteristics of the application, and the order cannot be reversed.
Concatenation of qualifiers: The qualifiers are connected by hyphens (-). For example:res-dark-ldpi.json .
Scope of the value of the qualifier: The value of each type of qualifier must meet the conditions in the following table, otherwise, the resource file in the directory cannot be matched, and the qualifier is case-sensitive.
Qualifier prefix: The resource qualifier of the resources file has a prefix res, for example, res-ldpi.json.
Default Resource Qualification File: The default resource qualification file for the resources resource file is res-defaults.json.
The use of enumerated colors to set resources is not supported in resource qualification files.
2.3 -> Rules for matching qualifiers to device status
When matching the corresponding resource file for a device, the priority of qualifier directory matching from highest to lowest is: MCC and MNC> Landscape and Portrait > Dark Mode> Device Type> Screen Density. If none of the resource qualifier directories match, the default resource qualifier file is matched.
If a resource qualifier is included in the qualifier directory, the value of the qualifier must be the same as the current device status before the directory can participate in the resource matching of the device. For example, the resource limit file res-hdpi.json cannot match the current device density xhdpi.
2.4 -> Reference resources in JS modules
The syntax of $r can be used in the hml and js files of application development to format the json resources in the resources directory in the JS module and obtain the corresponding resource content, which is at the same level as the pages directory.
res-defaults.json examples:
{
"strings": {
"hello": "hello world"
}
}
3-> Multi-language support
Applications based on the development framework will cover multiple countries and regions, and the development framework supports multi-language capabilities, allowing application developers to switch between multiple languages without developing versions in multiple languages, bringing convenience to project maintenance.
3.1 -> Define the resource file
Resource files are used to store the resource content of applications in multiple languages, and the development framework uses JSON files to store resource definitions. Place the language resource file in the i18n folder specified in the file organization, where the naming of the language resource file is composed of the qualifiers of language, character, country or region connected by hyphens, and its Chinese characters and country or region can be omitted, such as zh-Hant-HK (Chinese Traditional used in Hong Kong, China), zh-CN (Chinese Simplified Chinese used in China), zh (Chinese). The naming convention is as follows:
language[-script-region].json
The value of the qualifier must meet the requirements in the following table.
If the development framework cannot find the resource file of the system language in the application, the resource content in the en-US.json is used by default.
The content format of the resource file is as follows:
en-US.json
{
"strings": {
"hello": "Hello world!",
"object": "Object parameter substitution-{name}",
"array": "Array type parameter substitution-{0}",
"symbol": "@#$%^&*()_+-={}[]\\|:;\"'<>,./?"
},
"files": {
"image": "image/en_picture.PNG"
}
}
Since different languages have different matching rules for singular and plural, "zero", "one", "two", "few", "many", and "other" are used in the resource file to define the content of entries in different singular and plural scenarios. For example, Chinese does not distinguish between singular and plural numbers, and only "other" scenarios exist; There are "one" and "other" scenarios in English; There are 6 scenarios in Arabic.
Taking en-US.json and ar-AE.json as an example, the resource file format is as follows:
en-US.json
{
"strings": {
"people": {
"one": "one person",
"other": "{count} people"
}
}
}
ar-AE.json
{
"strings": {
"people": {
"zero": "لا أحد",
"one": "وحده",
"two": "اثنان",
"few": "ستة اشخاص",
"many": "خمسون شخص",
"other": "مائة شخص"
}
}
}
3.2 -> References to resources
Use multilingual syntax in application development pages, including simple formatting and singular and plural formatting, which can be used in HML or JS.
Simple formatting method
Referencing resources using the $t method in your application $t can be used in both HML and JS. The system displays the contents of the resource file of the corresponding language based on the current locale and the specified resource path (set by the path parameter of $t).
Simple formatting of the sample code
<!-- test.hml -->
<div>
<!-- 不使用占位符，text中显示“Hello world!” -->
<text>{
{ $t('strings.hello') }}</text>
<!-- 具名占位符格式，运行时将占位符{name}替换为“Hello world” -->
<text>{
{ $t('strings.object', { name: 'Hello world' }) }}</text>
<!-- 数字占位符格式，运行时将占位符{0}替换为“Hello world” -->
<text>{
{ $t('strings.array', ['Hello world']) }}</text>
<!-- 先在js中获取资源内容，再在text中显示“Hello world” -->
<text>{
{ hello }}</text>
<!-- 先在js中获取资源内容，并将占位符{name}替换为“Hello world”，再在text中显示“Object parameter substitution-Hello world” -->
<text>{
{ replaceObject }}</text>
<!-- 先在js中获取资源内容，并将占位符{0}替换为“Hello world”，再在text中显示“Array type parameter substitution-Hello world” -->
<text>{
{ replaceArray }}</text>
<!-- 获取图片路径 -->
<image src="{
{ $t('files.image') }}" class="image"></image>
<!-- 先在js中获取图片路径，再在image中显示图片 -->
<image src="{
{ replaceSrc }}" class="image"></image>
</div>
// test.js
// 下面为在js文件中的使用方法。
export default {
data: {
hello: '',
replaceObject: '',
replaceArray: '',
replaceSrc: '',
},
onInit() {
this.hello = this.$t('strings.hello');
this.replaceObject = this.$t('strings.object', { name: 'Hello world' });
this.replaceArray = this.$t('strings.array', ['Hello world']);
this.replaceSrc = this.$t('files.image');
},
}
Singular and plural formatting methods
Singular and plural formatting sample code
<!--test.hml-->
<div>
<!-- 传递数值为0时： "0 people" 阿拉伯语中此处匹配key为zero的词条-->
<text>{
{ $tc('strings.people', 0) }}</text>
<!-- 传递数值为1时： "one person" 阿拉伯语中此处匹配key为one的词条-->
<text>{
{ $tc('strings.people', 1) }}</text>
<!-- 传递数值为2时： "2 people" 阿拉伯语中此处匹配key为two的词条-->
<text>{
{ $tc('strings.people', 2) }}</text>
<!-- 传递数值为6时： "6 people" 阿拉伯语中此处匹配key为few的词条-->
<text>{
{ $tc('strings.people', 6) }}</text>
<!-- 传递数值为50时： "50 people" 阿拉伯语中此处匹配key为many的词条-->
<text>{
{ $tc('strings.people', 50) }}</text>
<!-- 传递数值为100时： "100 people" 阿拉伯语中此处匹配key为other的词条-->
<text>{
{ $tc('strings.people', 100) }}</text>
</div>****
Top comments (0)