Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 b86394a1 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!22244 add missing lite docs 

Merge pull request !22244 from piggyguy_jdx/add_missing_lite_docs
上级 7270d973 e91c6105
隐藏空白更改
内联 并排
Showing with 140 addition and 13 deletion
zh-cn/application-dev/reference/arkui-js-lite/Readme-CN.md
浏览文件 @ b86394a1
......@@ -4,6 +4,8 @@
- [文件组织](js-framework-file.md)
- [js标签配置](js-framework-js-tag.md)
- [app.js](js-framework-js-file.md)
- [生命周期](js-framework-lifecycle.md)
- [多语言](js-framework-localization.md)
- 语法
- [HML语法参考](js-framework-syntax-hml.md)
- [CSS语法参考](js-framework-syntax-css.md)
......
zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md
浏览文件 @ b86394a1
......@@ -14,18 +14,18 @@
## 属性
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------------------- | -------------------------- | -------- | ---- | ---------------------------------------- |
| images | Array&lt;ImageFrame&gt; | - | 是 | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg和bmp。ImageFrame的详细说明请见表1。<br/>**说明：**<br/>使用时需要使用数据绑定的方式，如images&nbsp;=&nbsp;{{images}}，js中声明相应变量：images:&nbsp;[{src:&nbsp;"/common/heart-rate01.png"},&nbsp;{src:&nbsp;"/common/heart-rate02.png"}]。 |
| iteration | number&nbsp;\|&nbsp;string | infinite | 否 | 设置帧动画播放次数。number表示固定次数，infinite枚举表示无限次数播放。 |
| reverse | boolean | false | 否 | 设置播放顺序。false表示从第1张图片播放到最后1张图片；&nbsp;true表示从最后1张图片播放到第1张图片。 |
| fixedsize | boolean | true | 否 | 设置图片大小是否固定为组件大小。&nbsp;true表示图片大小与组件大小一致，此时设置图片的width&nbsp;、height&nbsp;、top&nbsp;和left属性是无效的。false表示每一张图片的&nbsp;width&nbsp;、height&nbsp;、top和left属性都要单独设置。 |
| duration | string | - | 是 | 设置单次播放时长。单位支持[s(秒)\|ms(毫秒)]，默认单位为ms。&nbsp;duration为0时，不播放图片。&nbsp;值改变只会在下一次循环开始时生效。 |
| fillmode<sup>5+</sup> | string | forwards | 否 | 指定帧动画执行结束后的状态。可选项有：<br/>-&nbsp;none：恢复初始状态。<br/>-&nbsp;forwards：保持帧动画结束时的状态（在最后一个关键帧中定义）。 |
| id | string | - | 否 | 组件的唯一标识。 |
| style | string | - | 否 | 组件的样式声明。 |
| class | string | - | 否 | 组件的样式类，用于引用样式表。 |
| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs&nbsp;属性对象上。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------------------- | -------------------------- | -------- | ---- | ------------------------------------------------------------ |
| images | Array&lt;ImageFrame&gt; | - | 是 | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg和bmp。ImageFrame的详细说明请见表1。<br/>**说明：**<br/>1.使用时需要使用数据绑定的方式，如images&nbsp;=&nbsp;{{images}}，js中声明相应变量：images:&nbsp;[{src:&nbsp;"/common/heart-rate01.png"},&nbsp;{src:&nbsp;"/common/heart-rate02.png"}]。<br/>2.部分轻量级设备不支持原图片格式的解析。所以，在应用编译阶段，图片会被直接编译为可解析的位图（总字节数约：图片长x宽x4），并打包在应用安装包里，这会增加安装包的大小。因此，在使用图片资源时，应尽量控制图片的分辨率，尺寸越大的图片对于空间的占用越明显。 |
| iteration | number&nbsp;\|&nbsp;string | infinite | 否 | 设置帧动画播放次数。number表示固定次数，infinite枚举表示无限次数播放。 |
| reverse | boolean | false | 否 | 设置播放顺序。false表示从第1张图片播放到最后1张图片；&nbsp;true表示从最后1张图片播放到第1张图片。 |
| fixedsize | boolean | true | 否 | 设置图片大小是否固定为组件大小。&nbsp;true表示图片大小与组件大小一致，此时设置图片的width&nbsp;、height&nbsp;、top&nbsp;和left属性是无效的。false表示每一张图片的&nbsp;width&nbsp;、height&nbsp;、top和left属性都要单独设置。 |
| duration | string | - | 是 | 设置单次播放时长。单位支持[s(秒)\|ms(毫秒)]，默认单位为ms。&nbsp;duration为0时，不播放图片。&nbsp;值改变只会在下一次循环开始时生效。 |
| fillmode<sup>5+</sup> | string | forwards | 否 | 指定帧动画执行结束后的状态。可选项有：<br/>-&nbsp;none：恢复初始状态。<br/>-&nbsp;forwards：保持帧动画结束时的状态（在最后一个关键帧中定义）。 |
| id | string | - | 否 | 组件的唯一标识。 |
| style | string | - | 否 | 组件的样式声明。 |
| class | string | - | 否 | 组件的样式类，用于引用样式表。 |
| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs&nbsp;属性对象上。 |
**表1** ImageFrame说明
......
zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image.md
浏览文件 @ b86394a1
......@@ -16,7 +16,7 @@
| 名称 | 类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| src | string | 否 | <br/>图片的路径，支持的图片格式包括png、jpg。 |
| src | string | 否 | <br/>图片的路径，支持的图片格式包括png、jpg。<br/>说明：部分轻量级设备不支持原图片格式的解析。所以，在应用编译阶段，图片会被直接编译为可解析的位图（总字节数约：图片长x宽x4），并打包在应用安装包里，这会增加安装包的大小。因此，在使用图片资源时，应尽量控制图片的分辨率，尺寸越大的图片对于空间的占用越明显。 |
| id | string | 否 | 组件的唯一标识。 |
| style | string | 否 | 组件的样式声明。 |
| class | string | 否 | 组件的样式类，用于引用样式表。 |
......
zh-cn/application-dev/reference/arkui-js-lite/js-framework-lifecycle.md 0 → 100644
浏览文件 @ b86394a1
# 生命周期
## 应用生命周期
在app.js中可以定义如下应用生命周期函数：
| 属性 | 类型 | 描述 | 触发时机 |
| --------- | ---------- | -------- | ------------------ |
| onCreate | () => void | 应用创建 | 当应用创建时调用。 |
| onDestroy | () => void | 应用销毁 | 当应用退出时触发。 |
## 页面生命周期
在页面JS文件中可以定义如下页面生命周期函数：
> **说明：** 请注意不要在生命周期函数中执行复杂耗时操作，以避免影响页面切换性能
| 属性 | 类型 | 描述 | 触发时机 |
| --------- | ---------- | ------------ | -------------------------------------- |
| onInit | () => void | 页面初始化 | 页面数据初始化完成时触发，只触发一次。 |
| onReady | () => void | 页面创建完成 | 页面创建完成时触发，只触发一次。 |
| onShow | () => void | 页面显示 | 页面显示时触发。 |
| onHide | () => void | 页面消失 | 页面消失时触发。 |
| onDestroy | () => void | 页面销毁 | 页面销毁时触发。 |
页面A的生命周期接口的调用顺序：
- 打开页面A：onInit() -> onReady() -> onShow()
- 在页面A打开页面B：onHide() -> onDestroy()
- 从页面B返回页面A：onInit() -> onReady() -> onShow()
- 退出页面A：onHide() -> onDestroy()
- 页面隐藏到后台运行：onHide()
- 页面从后台运行恢复到前台：onShow()
![img](figures/lifecycle.png)
\ No newline at end of file
zh-cn/application-dev/reference/arkui-js-lite/js-framework-localization.md 0 → 100644
浏览文件 @ b86394a1
# 多语言支持
基于开发框架的应用会覆盖多个国家和地区，开发框架支持多语言能力后，可以让应用开发者无需开发多个不同语言的版本，就可以同时支持多种语言的切换，为项目维护带来便利。
开发者仅需要通过[定义资源文件](#定义资源文件)和[引用资源](#引用资源)两个步骤，就可以使用开发框架的多语言能力；如果需要在应用中获取当前系统语言，请参考[获取语言](#获取语言)。
## 定义资源文件
资源文件用于存放应用在多种语言场景下的资源内容，开发框架使用JSON文件保存资源定义。
在[文件组织](js-framework-file.md)中指定的i18n文件夹内放置每个语言地区下的资源定义文件即可，资源文件命名为“语言-地区.json”格式，例如英文（美国）的资源文件命名为en-US.json。当开发框架无法在应用中找到系统语言的资源文件时，默认使用en-US.json中的资源内容。
资源文件内容格式如下：
en-US.json
```json
{
"strings": {
"hello": "Hello world!",
"object": "Object parameter substitution-{name}",
"array": "Array type parameter substitution-{0}",
"symbol": "@#$%^&*()_+-={}[]\\|:;\"'<>,./?"
},
"files": {
"image": "image/en_picture.PNG"
}
}
```
## 引用资源
- 在应用中使用$t方法引用资源，$t既可以在hml中使用，也可以在js中使用。系统将根据当前语言环境和指定的资源路径（通过$t的path参数设置），显示对应语言的资源文件中的内容。
| 参数 | 类型 | 必填 | 描述 |
| ------ | ------------- | ---- | ------------------------------------------------------------ |
| path | string | 是 | 资源路径 |
| params | Array\|Object | 否 | 运行时用来替换占位符的实际内容，占位符分为两种：具名占位符，例如{name}。实际内容必须用Object类型指定，例如：$t('strings.object', **{ name: 'Hello world' }**)。数字占位符，例如{0}。实际内容必须用Array类型指定，例如：$t('strings.array', **['Hello world']**)。 |
- 示例代码
```html
<!-- xxx.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>
```
```javascript
// xxx.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');
},
}
```
## 获取语言
获取语言功能请参考[应用配置](../apis/js-apis-system-configuration.md)。
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或