diff --git a/zh-cn/application-dev/reference/arkui-js-lite/Readme-CN.md b/zh-cn/application-dev/reference/arkui-js-lite/Readme-CN.md index d6b3ce005e97f2ae468829711245b150fca756da..ac603b10007b243a96cd271faf4c087ecd7f2279 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-js-lite/Readme-CN.md @@ -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) diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lifecycle.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/lifecycle.png new file mode 100644 index 0000000000000000000000000000000000000000..0a9edb70da7acbc4498a752ab49ec67333801615 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lifecycle.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md index d0db3c1abf138cca8c062bee7bfa73426908ab78..2445fe79eaa0187917092592a4bdc8e136c18045 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md @@ -14,18 +14,18 @@ ## 属性 -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| --------------------- | -------------------------- | -------- | ---- | ---------------------------------------- | -| images | Array<ImageFrame> | - | 是 | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg和bmp。ImageFrame的详细说明请见表1。
**说明：**
使用时需要使用数据绑定的方式，如images = {{images}}，js中声明相应变量：images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]。 | -| iteration | number \| string | infinite | 否 | 设置帧动画播放次数。number表示固定次数，infinite枚举表示无限次数播放。 | -| reverse | boolean | false | 否 | 设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。 | -| fixedsize | boolean | true | 否 | 设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。 | -| duration | string | - | 是 | 设置单次播放时长。单位支持[s(秒)\|ms(毫秒)]，默认单位为ms。 duration为0时，不播放图片。 值改变只会在下一次循环开始时生效。 | -| fillmode5+ | string | forwards | 否 | 指定帧动画执行结束后的状态。可选项有：
- none：恢复初始状态。
- forwards：保持帧动画结束时的状态（在最后一个关键帧中定义）。 | -| id | string | - | 否 | 组件的唯一标识。 | -| style | string | - | 否 | 组件的样式声明。 | -| class | string | - | 否 | 组件的样式类，用于引用样式表。 | -| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| --------------------- | -------------------------- | -------- | ---- | ------------------------------------------------------------ | +| images | Array<ImageFrame> | - | 是 | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg和bmp。ImageFrame的详细说明请见表1。
**说明：**
1.使用时需要使用数据绑定的方式，如images = {{images}}，js中声明相应变量：images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]。
2.部分轻量级设备不支持原图片格式的解析。所以，在应用编译阶段，图片会被直接编译为可解析的位图（总字节数约：图片长x宽x4），并打包在应用安装包里，这会增加安装包的大小。因此，在使用图片资源时，应尽量控制图片的分辨率，尺寸越大的图片对于空间的占用越明显。 | +| iteration | number \| string | infinite | 否 | 设置帧动画播放次数。number表示固定次数，infinite枚举表示无限次数播放。 | +| reverse | boolean | false | 否 | 设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。 | +| fixedsize | boolean | true | 否 | 设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。 | +| duration | string | - | 是 | 设置单次播放时长。单位支持[s(秒)\|ms(毫秒)]，默认单位为ms。 duration为0时，不播放图片。 值改变只会在下一次循环开始时生效。 | +| fillmode5+ | string | forwards | 否 | 指定帧动画执行结束后的状态。可选项有：
- none：恢复初始状态。
- forwards：保持帧动画结束时的状态（在最后一个关键帧中定义）。 | +| id | string | - | 否 | 组件的唯一标识。 | +| style | string | - | 否 | 组件的样式声明。 | +| class | string | - | 否 | 组件的样式类，用于引用样式表。 | +| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | **表1** ImageFrame说明 diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image.md index 838db18b496f1fd144bc2cebddb70dfc2e84e516..130b5d1a5f7856241d5a0e890aa679d6fefc87c2 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image.md +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image.md @@ -16,7 +16,7 @@ | 名称 | 类型 | 必填 | 描述 | | -------- | -------- | -------- | -------- | -| src | string | 否 |
图片的路径，支持的图片格式包括png、jpg。 | +| src | string | 否 |
图片的路径，支持的图片格式包括png、jpg。
说明：部分轻量级设备不支持原图片格式的解析。所以，在应用编译阶段，图片会被直接编译为可解析的位图（总字节数约：图片长x宽x4），并打包在应用安装包里，这会增加安装包的大小。因此，在使用图片资源时，应尽量控制图片的分辨率，尺寸越大的图片对于空间的占用越明显。 | | id | string | 否 | 组件的唯一标识。 | | style | string | 否 | 组件的样式声明。 | | class | string | 否 | 组件的样式类，用于引用样式表。 | diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-framework-lifecycle.md b/zh-cn/application-dev/reference/arkui-js-lite/js-framework-lifecycle.md new file mode 100644 index 0000000000000000000000000000000000000000..8e9617309b48a4efd4c6af88e9420a33e9378818 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-framework-lifecycle.md @@ -0,0 +1,36 @@ +# 生命周期 + + +## 应用生命周期 + +在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 diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-framework-localization.md b/zh-cn/application-dev/reference/arkui-js-lite/js-framework-localization.md new file mode 100644 index 0000000000000000000000000000000000000000..deaea074c38d97b194cc820ac4cbe2905c55df71 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-framework-localization.md @@ -0,0 +1,89 @@ +# 多语言支持 + +基于开发框架的应用会覆盖多个国家和地区，开发框架支持多语言能力后，可以让应用开发者无需开发多个不同语言的版本，就可以同时支持多种语言的切换，为项目维护带来便利。 + +开发者仅需要通过[定义资源文件](#定义资源文件)和[引用资源](#引用资源)两个步骤，就可以使用开发框架的多语言能力；如果需要在应用中获取当前系统语言，请参考[获取语言](#获取语言)。 + +## 定义资源文件 + +资源文件用于存放应用在多种语言场景下的资源内容，开发框架使用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 + +
+ + {{ $t('strings.hello') }} + + {{ $t('strings.object', { name: 'Hello world' }) }} + + {{ $t('strings.array', ['Hello world']) }} + + {{ hello }} + + {{ replaceObject }} + + {{ replaceArray }} + + + + + +
+ ``` + + ```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