Description: update image usage limitation

IssueNo:I7PK1S Feature or Bugfix: Feature Binary Source:No Signed-off-by: N jiadexiang <jiadexiang@huawei.com>

Description: update image usage limitation
IssueNo:I7PK1S Feature or Bugfix: Feature Binary Source:No Signed-off-by: N jiadexiang <jiadexiang@huawei.com>
e91c6105 · jiadexiang · 5c1d5a17 · e91c6105 · e91c6105 · e91c6105
6 changed file
--- 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)

--- a/zh-cn/application-dev/reference/arkui-js-lite/figures/lifecycle.png
+++ b/zh-cn/application-dev/reference/arkui-js-lite/figures/lifecycle.png
--- 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&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说明


--- 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 | 否 | <br/>图片的路径，支持的图片格式包括png、jpg。 |
+| src | string | 否 | <br/>图片的路径，支持的图片格式包括png、jpg。<br/>说明：部分轻量级设备不支持原图片格式的解析。所以，在应用编译阶段，图片会被直接编译为可解析的位图（总字节数约：图片长x宽x4），并打包在应用安装包里，这会增加安装包的大小。因此，在使用图片资源时，应尽量控制图片的分辨率，尺寸越大的图片对于空间的占用越明显。 |
 | id | string | 否 | 组件的唯一标识。 |
 | style | string | 否 | 组件的样式声明。 |
 | class | string | 否 | 组件的样式类，用于引用样式表。 |

--- 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
+# 生命周期
+
+
+## 应用生命周期
+
+在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
--- 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
+# 多语言支持
+
+基于开发框架的应用会覆盖多个国家和地区，开发框架支持多语言能力后，可以让应用开发者无需开发多个不同语言的版本，就可以同时支持多种语言的切换，为项目维护带来便利。
+
+开发者仅需要通过[定义资源文件](#定义资源文件)和[引用资源](#引用资源)两个步骤，就可以使用开发框架的多语言能力；如果需要在应用中获取当前系统语言，请参考[获取语言](#获取语言)。
+
+## 定义资源文件
+
+资源文件用于存放应用在多种语言场景下的资源内容，开发框架使用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