diff --git a/zh-cn/application-dev/reference/apis/js-apis-prompt.md b/zh-cn/application-dev/reference/apis/js-apis-prompt.md index 1d5a74215d16113afb684fda480645764ca0874c..fb04353173252c684eb05d1341f46f82a6cb13ac 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-prompt.md +++ b/zh-cn/application-dev/reference/apis/js-apis-prompt.md @@ -1,16 +1,16 @@ # 弹窗 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明** +创建并显示文本提示框、对话框和操作菜单。 + +> **说明：** +> > 本模块首批接口从API version 8开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 ## 导入模块 -``` +```js import prompt from '@ohos.prompt' ``` -## 权限列表 - -无 ## prompt.showToast @@ -21,32 +21,31 @@ showToast(options: ShowToastOptions): void **系统能力：** SystemCapability.ArkUI.ArkUI.Full **参数：** + | 参数名 | 类型 | 必填 | 说明 | | ------- | ------------------------------------- | ---- | ------- | | options | [ShowToastOptions](#showtoastoptions) | 是 | 文本弹窗选项。 | **示例：** - ``` - export default { - showToast() { - prompt.showToast({ - message: 'Message Info', - duration: 2000, - }); - } - } - ``` + +```js +prompt.showToast({ + message: 'Message Info', + duration: 2000, +}); +``` + ## ShowToastOptions 文本提示框的选项。 -**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。 +**系统能力：** SystemCapability.ArkUI.ArkUI.Full。 -| 名称 | 类型 | 必填 | 说明 | -| -------- | -------------- | ---- | ---------------------------------------- | -| message | string | 是 | 显示的文本信息。 | -| duration | number | 否 | 默认值1500ms，取值区间：1500ms-10000ms。若小于1500ms则取默认值，若大于10000ms则取上限值10000ms。 | -| bottom | <length> | 否 | 设置弹窗边框距离屏幕底部的位置。 | +| 名称 | 类型 | 必填 | 说明 | +| -------- | --------------- | ---- | ---------------------------------------- | +| message | string | 是 | 显示的文本信息。 | +| duration | number | 否 | 默认值1500ms，取值区间：1500ms-10000ms。若小于1500ms则取默认值，若大于10000ms则取上限值10000ms。 | +| bottom | string\| number | 否 | 设置弹窗边框距离屏幕底部的位置。 | ## prompt.showDialog @@ -54,9 +53,10 @@ showDialog(options: ShowDialogOptions): Promise<ShowDialogSuccessResponse> 创建并显示对话框，对话框响应后同步返回结果。 -**系统能力：** SystemCapability.ArkUI.ArkUI.Full +**系统能力：** SystemCapability.ArkUI.ArkUI.Full **参数：** + | 参数名 | 类型 | 必填 | 说明 | | ------- | --------------------------------------- | ---- | ------ | | options | [ShowDialogOptions](#showdialogoptions) | 是 | 对话框选项。 | @@ -69,32 +69,28 @@ showDialog(options: ShowDialogOptions): Promise<ShowDialogSuccessResponse> **示例：** - ``` - export default { - showDialog() { - prompt.showDialog({ - title: 'Title Info', - message: 'Message Info', - buttons: [ - { - text: 'button1', - color: '#000000', - }, - { - text: 'button2', - color: '#000000', - } - ], - }) - .then(data => { - console.info('showDialog success, click button: ' + data.index); - }) - .catch(err => { - console.info('showDialog error: ' + err); - }) +```js +prompt.showDialog({ + title: 'Title Info', + message: 'Message Info', + buttons: [ + { + text: 'button1', + color: '#000000', + }, + { + text: 'button2', + color: '#000000', } - } - ``` + ], +}) + .then(data => { + console.info('showDialog success, click button: ' + data.index); + }) + .catch(err => { + console.info('showDialog error: ' + err); + }) +``` ## prompt.showDialog @@ -102,61 +98,57 @@ showDialog(options: ShowDialogOptions, callback: AsyncCallback<ShowDialogSucc 创建并显示对话框，对话框响应结果异步返回。 -**系统能力：** SystemCapability.ArkUI.ArkUI.Full - +**系统能力：** SystemCapability.ArkUI.ArkUI.Full **参数：** + | 参数名 | 类型 | 必填 | 说明 | | -------- | ---------------------------------------- | ---- | ------------ | | options | [ShowDialogOptions](#showdialogoptions) | 是 | 页面显示对话框信息描述。 | | callback | AsyncCallback<[ShowDialogSuccessResponse](#showdialogsuccessresponse)> | 是 | 对话框响应结果回调。 | **示例：** - ``` - export default { - callback(err, data) { - if(err) { - console.info('showDialog err: ' + err); - return; - } - console.info('showDialog success callback, click button: ' + data.index); + +```js +prompt.showDialog({ + title: 'showDialog Title Info', + message: 'Message Info', + buttons: [ + { + text: 'button1', + color: '#000000', }, - showDialog() { - prompt.showDialog({ - title: 'showDialog Title Info', - message: 'Message Info', - buttons: [ - { - text: 'button1', - color: '#000000', - }, - { - text: 'button2', - color: '#000000', - } - ] - }, this.callback); + { + text: 'button2', + color: '#000000', } + ] +}, (err, data) => { + if (err) { + console.info('showDialog err: ' + err); + return; } - ``` + console.info('showDialog success callback, click button: ' + data.index); +}); +``` ## ShowDialogOptions 对话框的选项。 -**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。 +**系统能力：** SystemCapability.ArkUI.ArkUI.Full -| 名称 | 类型 | 必填 | 说明 | -| ------- | ------ | ---- | ---------------------------------------- | +| 名称 | 类型 | 必填 | 说明 | +| ------- | ------- | ---- | ---------------------------------------- | | title | string | 否 | 标题文本。 | -| message | string | 否 | 内容文本。 | -| buttons | Array | 否 | 对话框中按钮的数组，结构为：{text:'button', color: '\#666666'}，支持1-3个按钮。其中第一个为positiveButton；第二个为negativeButton；第三个为neutralButton。 | +| message | string | 否 | 内容文本。 | +| buttons | Array | 否 | 对话框中按钮的数组，结构为：{text:'button', color: '\#666666'}，支持1-3个按钮。其中第一个为positiveButton；第二个为negativeButton；第三个为neutralButton。 | ## ShowDialogSuccessResponse 对话框的响应结果。 -**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。 +**系统能力：** SystemCapability.ArkUI.ArkUI.Full | 名称 | 类型 | 说明 | | ----- | ------ | ------------------- | @@ -172,6 +164,7 @@ showActionMenu(options: ActionMenuOptions, callback: AsyncCallback<ActionMenu **系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。 **参数：** + | 参数名 | 类型 | 必填 | 说明 | | -------- | ---------------------------------------- | ---- | --------- | | options | [ActionMenuOptions](#actionmenuoptions) | 是 | 操作菜单选项。 | @@ -179,95 +172,100 @@ showActionMenu(options: ActionMenuOptions, callback: AsyncCallback<ActionMenu **示例：** - ``` - export default { - callback(err, data) { - if(err) { - console.info('showActionMenu err: ' + err); - return; - } - console.info('showActionMenu success callback, click button: ' + data.index); + +```js +prompt.showActionMenu({ + title: 'Title Info', + buttons: [ + { + text: 'item1', + color: '#666666', }, - showActionMenu() { - prompt.showActionMenu({ - title: 'Title Info', - buttons: [ - { - text: 'item1', - color: '#666666', - }, - { - text: 'item2', - color: '#000000', - }, - ] - }, this.callback) - } + { + text: 'item2', + color: '#000000', + }, + ] +}, (err, data) => { + if (err) { + console.info('showActionMenu err: ' + err); + return; } - ``` + console.info('showActionMenu success callback, click button: ' + data.index); +}) +``` ## prompt.showActionMenu -showActionMenu(options: ActionMenuOptions): Promise\ +showActionMenu(options: ActionMenuOptions): Promise<ActionMenuSuccessResponse> 创建并显示操作菜单，菜单响应后同步返回结果。 **系统能力：** SystemCapability.ArkUI.ArkUI.Full **参数：** + | 参数名 | 类型 | 必填 | 说明 | | ------- | --------------------------------------- | ---- | ------- | | options | [ActionMenuOptions](#actionmenuoptions) | 是 | 操作菜单选项。 | **返回值：** + | 类型 | 说明 | | ---------------------------------------- | ------- | | Promise<[ActionMenuSuccessResponse](#actionmenusuccessresponse)> | 菜单响应结果。 | **示例：** - ``` - export default { - showActionMenu() { - prompt.showActionMenu({ - title: 'showActionMenu Title Info', - buttons: [ - { - text: 'item1', - color: '#666666', - }, - { - text: 'item2', - color: '#000000', - }, - ] - }) - .then(data => { - console.info('showActionMenu success, click button: ' + data.index); - }) - .catch(err => { - console.info('showActionMenu error: ' + err); - }) - } - } - ``` + +```js +prompt.showActionMenu({ + title: 'showActionMenu Title Info', + buttons: [ + { + text: 'item1', + color: '#666666', + }, + { + text: 'item2', + color: '#000000', + }, + ] +}) + .then(data => { + console.info('showActionMenu success, click button: ' + data.index); + }) + .catch(err => { + console.info('showActionMenu error: ' + err); + }) +``` ## ActionMenuOptions 操作菜单的选项。 -**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。 +**系统能力：** SystemCapability.ArkUI.ArkUI.Full。 -| 名称 | 类型 | 必填 | 说明 | -| ------- | ------ | ---- | ---------------------------------------- | -| title | string | 否 | 标题文本。 | -| buttons | Array | 是 | 菜单中菜单项按钮的数组，结构为：{text:'button', color: '\#666666'}，支持1-6个按钮。大于6个按钮时弹窗不显示。 | +| 名称 | 类型 | 必填 | 说明 | +| ------- | ------------------------------ | ---- | ---------------------------------------- | +| title | string | 否 | 标题文本。 | +| buttons | Array<[Button](#button)> | 是 | 菜单中菜单项按钮的数组，结构为：{text:'button', color: '\#666666'}，支持1-6个按钮。大于6个按钮时弹窗不显示。 | ## ActionMenuSuccessResponse 操作菜单的响应结果。 -**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。 +**系统能力：** SystemCapability.ArkUI.ArkUI.Full | 名称 | 类型 | 必填 | 说明 | | ----- | ------ | ---- | ------------------------ | | index | number | 否 | 选中按钮在buttons数组中的索引，从0开始。 | +## Button + +菜单中的菜单项按钮。 + +**系统能力：** SystemCapability.ArkUI.ArkUI.Full + +| 名称 | 类型 | 必填 | 说明 | +| ----- | ------ | ---- | ------- | +| text | string | 是 | 按钮文本内容。 | +| color | string | 是 | 按钮文本颜色。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md index 4ace65a700bfc582bd1dcee9f24348fe2ed43e69..fec0766922fbca69af801de208b2a01c04aa552f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md @@ -6,21 +6,9 @@ > > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +## 需要权限 -## 权限说明 - -使用网络图片时，需要在config.json文件对应的"abilities"中添加网络使用权限ohos.permission.INTERNET。 - -``` -"abilities": [ - { - ... - "permissions": ["ohos.permission.INTERNET"], - ... - } -] -``` - +使用网络图片时，需要申请权限ohos.permission.INTERNET。具体申请方式请参考[权限申请声明](../../security/accesstoken-guidelines.md)。 ## 子组件 @@ -33,25 +21,25 @@ Image(src: string | PixelMap | Resource) **参数：** -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ------ | ------------------------------------------------------------ | ---- | ------ | ------------------------------------------------------------ | -| src | string\| [PixelMap](../apis/js-apis-image.md#pixelmap7)\| [Resource](ts-types.md#resource) | 是 | - | 图片的数据源，支持本地图片和网络图片。
当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持该Image组件被跨包/跨模块调用，建议使用`$r`方式来管理需全局使用的图片资源。
\- 支持的图片格式包括png、jpg、bmp、svg和gif。
\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。
\- 支持`dataability://`路径前缀的字符串，用于访问通过data ability提供的图片路径。 | +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| ---- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | +| src | string\| [PixelMap](../apis/js-apis-image.md#pixelmap7)\| [Resource](ts-types.md#resource) | 是 | - | 图片的数据源，支持本地图片和网络图片。
当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持该Image组件被跨包/跨模块调用，建议使用`$r`方式来管理需全局使用的图片资源。
\- 支持的图片格式包括png、jpg、bmp、svg和gif。
\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。
\- 支持`dataability://`路径前缀的字符串，用于访问通过data ability提供的图片路径。 | ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| --------------------- | ------------------------------------------------------- | -------- | ------------------------------------------------------------ | -| alt | string \| [Resource](ts-types.md#resource) | - | 加载时显示的占位图。支持本地图片和网络路径。 | -| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Cover | 设置图片的缩放类型。 | +| 名称 | 参数类型 | 默认值 | 描述 | +| --------------------- | ---------------------------------------- | -------- | ---------------------------------------- | +| alt | string \| [Resource](ts-types.md#resource) | - | 加载时显示的占位图。支持本地图片和网络路径。 | +| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Cover | 设置图片的缩放类型。 | | objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat枚举说明) | NoRepeat | 设置图片的重复样式。
>  **说明：**
> - svg类型图源不支持该属性。 | -| interpolation | ImageInterpolation | None | 设置图片的插值效果，即减轻低清晰度图片在放大显示的时候出现的锯齿问题，仅针对图片放大插值。
>  **说明：**
> - svg类型图源不支持该属性。
> - PixelMap资源不支持该属性。 | -| renderMode | ImageRenderMode | Original | 设置图片渲染的模式。
>  **说明：**
> - svg类型图源不支持该属性。 | +| interpolation | ImageInterpolation | None | 设置图片的插值效果，即减轻低清晰度图片在放大显示的时候出现的锯齿问题，仅针对图片放大插值。
>  **说明：**
> - svg类型图源不支持该属性。
> - PixelMap资源不支持该属性。 | +| renderMode | ImageRenderMode | Original | 设置图片渲染的模式。
>  **说明：**
> - svg类型图源不支持该属性。 | | sourceSize | {
width: number,
height: number
} | - | 设置图片解码尺寸，将原始图片解码成指定尺寸的图片，number类型单位为px。
>  **说明：**
> - PixelMap资源不支持该属性。 | -| matchTextDirection | boolean | false | 设置图片是否跟随系统语言方向，在RTL语言环境下显示镜像翻转显示效果。 | -| fitOriginalSize | boolean | true | 图片组件尺寸未设置时，其显示尺寸是否跟随图源尺寸。 | -| fillColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 仅对svg图源生效，设置后会替换svg图片的fill颜色。 | -| autoResize | boolean | true | 是否需要在图片解码过程中对图源做resize操作，该操作会根据显示区域的尺寸决定用于绘制的图源尺寸，有利于减少内存占用。 | -| syncLoad8+ | boolean | false | 设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。 | +| matchTextDirection | boolean | false | 设置图片是否跟随系统语言方向，在RTL语言环境下显示镜像翻转显示效果。 | +| fitOriginalSize | boolean | true | 图片组件尺寸未设置时，其显示尺寸是否跟随图源尺寸。 | +| fillColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 仅对svg图源生效，设置后会替换svg图片的fill颜色。 | +| autoResize | boolean | true | 是否需要在图片解码过程中对图源做resize操作，该操作会根据显示区域的尺寸决定用于绘制的图源尺寸，有利于减少内存占用。 | +| syncLoad8+ | boolean | false | 设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。 | ## ImageInterpolation枚举说明 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md index 23b5b59ae196a9796270cf440a1aa2b898d6cd9a..823bfa767a1740b5dd936753b8766419d94d4cf8 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md @@ -21,7 +21,7 @@ TimePicker(options?: {selected?: Date}) -默认以00：00至23：59的时间区间创建滑动选择器。 +默认以00: 00至23: 59的时间区间创建滑动选择器。 **参数：** diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md b/zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md index 1a1d6e4b6767a22f03971a22f5d6e7d8ce7d9652..ab13efc314ad2061ce47cfb17e664eb0855f4e44 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md @@ -6,20 +6,9 @@ > > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -使用网络视频时，需要在config或者module.json对应的"abilities"中添加网络使用权限ohos.permission.INTERNET。 - -``` -"abilities":[ - { - ... - "permissions": ["ohos.permission.INTERNET"], - ... - } -] -``` +## 需要权限 +使用网络视频时，需要申请权限ohos.permission.INTERNET。具体申请方式请参考[权限申请声明](../../security/accesstoken-guidelines.md)。 ## 子组件 @@ -32,12 +21,12 @@ Video(value: {src?: string | Resource, currentProgressRate?: number | string | P **参数：** -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------- | ------------------------------------------------------------ | -| src | string \| [Resource](ts-types.md#resource) | 否 | - | 视频播放源的路径，支持本地视频路径和网络路径。
支持在resources下面的video或rawfile文件夹里放置媒体资源。
支持dataability://的路径前缀，用于访问通过Data Ability提供的视频路径，具体路径信息详见[Data Ability说明](../../ability/fa-dataability.md)。 | -| currentProgressRate | number \| PlaybackSpeed8+ | 否 | 1.0 \| PlaybackSpeed.
Speed_Forward_1_00_X | 视频播放倍速。
>  **说明：**
> number取值仅支持：0.75，1.0，1.25，1.75，2.0。
| -| previewUri | string \| PixelMap8+ \| [Resource](ts-types.md#resource) | 否 | - | 预览图片的路径。 | -| controller | [VideoController](#videocontroller) | 否 | - | 控制器。 | +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| ------------------- | ---------------------------------------- | ---- | ---------------------------------------- | ---------------------------------------- | +| src | string \| [Resource](ts-types.md#resource) | 否 | - | 视频播放源的路径，支持本地视频路径和网络路径。
支持在resources下面的video或rawfile文件夹里放置媒体资源。
支持dataability://的路径前缀，用于访问通过Data Ability提供的视频路径，具体路径信息详见[Data Ability说明](../../ability/fa-dataability.md)。 | +| currentProgressRate | number \| PlaybackSpeed8+ | 否 | 1.0 \| PlaybackSpeed.
Speed_Forward_1_00_X | 视频播放倍速。
>  **说明：**
> number取值仅支持：0.75，1.0，1.25，1.75，2.0。
| +| previewUri | string \| PixelMap8+ \| [Resource](ts-types.md#resource) | 否 | - | 预览图片的路径。 | +| controller | [VideoController](#videocontroller) | 否 | - | 控制器。 | ## PlaybackSpeed8+类型接口说明 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md index 3c891de4cdd5a799a6301fb0fb654332c07116dc..d02723da661ccb01863e770c7814ad2d9c63d167 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md @@ -1,20 +1,18 @@ # 禁用控制 -> **说明：** -> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - +组件是否可交互，可交互状态下响应[点击事件](ts-universal-events-click.md)、[触摸事件](ts-universal-events-touch.md)、[拖拽事件](ts-universal-events-drag-drop.md)、[按键事件](ts-universal-events-key.md)、[焦点事件](ts-universal-focus-event.md)和[鼠标事件](ts-universal-mouse-key.md)。 -## 权限列表 - -无 +> **说明：** +> +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| enabled | boolean | true | 值为true表示组件可用，可响应点击等操作；值为false时，不响应点击等操作。 | +| 名称 | 参数类型 | 默认值 | 描述 | +| ------- | ------- | ---- | ---------------------------------------- | +| enabled | boolean | true | 值为true表示组件可交互，响应点击等操作。
值为false表示组件不可交互，不响应点击等操作。
默认值：true | ## 示例 diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/Readme-CN.md b/zh-cn/application-dev/reference/js-service-widget-ui/Readme-CN.md index 857003cc85894352b2f4e749ca56d39eec688230..859b5fe2aef5a01e075bcb1bbf895635c6e0f324 100644 --- a/zh-cn/application-dev/reference/js-service-widget-ui/Readme-CN.md +++ b/zh-cn/application-dev/reference/js-service-widget-ui/Readme-CN.md @@ -2,7 +2,6 @@ - JS服务卡片UI框架说明 - [文件组织](js-service-widget-file.md) - - [配置文件](js-service-widget-config-file.md) - 语法 - [HML语法参考](js-service-widget-syntax-hml.md) - [CSS语法参考](js-service-widget-syntax-css.md) diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-config-file.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-config-file.md deleted file mode 100644 index 82867f64408b16b9a82a1d43a786ace97e4f12fa..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-config-file.md +++ /dev/null @@ -1,91 +0,0 @@ -# 配置文件 - - -js标签中包含了实例名称、窗口样式和卡片页面信息。 - - -| 标签 | 类型 | 默认值 | 必填 | 描述 | -| ------ | ------ | ------- | ---- | --------------------------- | -| name | String | default | 是 | 标识JS实例的名字。 | -| pages | Array | - | 是 | 路由信息，详见“[pages](#pages)”。 | -| window | Object | - | 否 | 窗口信息，详见“[window](#window)”。 | - -> **说明：** -> name、pages、window等标签配置需在[配置文件]()中的“js”标签中完成设置。 - - -## pages - -定义卡片页面信息，由卡片页面路径和卡片页面名组成，卡片仅包含一个页面。比如： - - -``` -{ - ... - "src": "./js/widget/pages/index/index" //卡片仅包含一个页面 - ... -} -``` - - -> **说明：** -> - pages列表中仅包含一个页面。 -> -> - 页面文件名不能使用组件名称，比如：text.hml、button.hml等。 - - -## window - -window用于定义与显示窗口相关的配置。对于卡片尺寸适配问题，有2种配置方法，建议使用autoDesignWidth： - -- 指定卡片designWidth 150px（2×2），所有与大小相关的样式（例如width、font-size）均以designWidth和实际卡片宽度的比例进行缩放，例如在designWidth为150时，如果设置width为100px时，在卡片实际宽度为300物理像素时，width实际渲染像素为200物理像素。 - -- 设置autoDesignWidth为true，此时designWidth字段将会被忽略，渲染组件和布局时按屏幕密度进行缩放。屏幕逻辑宽度由设备宽度和屏幕密度自动计算得出，在不同设备上可能不同，请使用相对布局来适配多种设备。例如：在466\*466分辨率，320dpi的设备上，屏幕密度为2（以160dpi为基准），1px等于渲染出的2物理像素。 - > **说明：** - > - 组件样式中<length>类型的默认值，按屏幕密度进行计算和绘制，如：在屏幕密度为2（以160dpi为基准）的设备上，默认<length>为1px时，设备上实际渲染出2物理像素。 - > - > - autoDesignWidth、designWidth的设置不影响默认值计算方式和绘制结果。 - -| 属性 | 类型 | 必填 | 默认值 | 描述 | -| --------------- | ------- | ---- | ----- | ---------------------------------------- | -| designWidth | number | 否 | 150px | 页面显示设计时的参考值，实际显示效果基于设备宽度与参考值之间的比例进行缩放。 | -| autoDesignWidth | boolean | 否 | false | 页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。 | - - 示例如下： - { - ... - "window": { - "autoDesignWidth": true - } - ... - } - - -## 示例 - - -```json -{ - "forms": [ - { - "name": "widget", - "description": "This is a service widget.", - "src": "./js/widget/pages/index/index", - "window": { - "designWidth": 720, - "autoDesignWidth": true - }, - "colorMode": "auto", - "isDefault": true, - "updateEnabled": true, - "scheduledUpdateTime": "10:30", - "updateDuration": 1, - "defaultDimension": "2*2", - "supportDimensions": [ - "1*2","2*2","2*4","4*4" - ], - "formConfigAbility": "ability://xxxxx" - } - ] -} -``` diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-file.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-file.md index 6e7b373bfe3a5d1450c0b86dbc278ad60840336e..9025d3ad8df2f64ca271fd3dd690c14ca575860d 100644 --- a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-file.md +++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-file.md @@ -49,9 +49,15 @@ JS服务卡片(entry/src/main/js/Widget)的典型开发目录结构如下： > **说明：** > 当代码文件A需要引用代码文件B时： -> +> > - 如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。 -> +> > - 如果代码文件A和文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时，代码文件B的目录会发生变化。 -> +> > - 在json文件中定义的数据为资源文件路径时，需使用绝对路径。 + +## 配置文件 + +FA卡片需要在应用配置文件config.json中进行配置。详细的配置内容请参考[FA卡片配置文件说明](../../ability/fa-formability.md#配置卡片配置文件)。 + +Stage卡片需要在应用配置文件module.json5中的extensionAbilities标签下，配置ExtensionAbility相关信息。详细的配置内容请参考[Stage卡片配置文件说明](../../ability/stage-formextension.md#配置卡片配置文件)。 \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-ts-building-data-model.md b/zh-cn/application-dev/ui/ui-ts-building-data-model.md index 42eec7a17592f85aa1e10a746c80997f845b96fb..fe8843dd0050a63c369cfb2b4bb92c518b28e9a7 100644 --- a/zh-cn/application-dev/ui/ui-ts-building-data-model.md +++ b/zh-cn/application-dev/ui/ui-ts-building-data-model.md @@ -50,7 +50,15 @@ 3. 存入食物图片资源。在resources >base> media目录下存入食物图片资源，图片名称为食物名称。 -4. 创建食物资源数据。在model文件夹下创建FoodDataModels.ets，在该页面中声明食物成分数组FoodComposition。 +4. 创建食物资源数据。在model文件夹下创建FoodDataModels.ets，在该页面中声明食物成分数组FoodComposition。以下示例创建了两个食物数据。 + + ``` + const FoodComposition: any[] = [ + { 'name': 'Tomato', 'image': $r('app.media.Tomato'), 'category': Category.Vegetable, 'calories': 17, 'protein': 0.9, 'fat': 0.2, 'carbohydrates': 3.9, 'vitaminC': 17.8 }, + { 'name': 'Walnut', 'image': $r('app.media.Walnut'), 'category': Category.Nut, 'calories': 654 , 'protein': 15, 'fat': 65, 'carbohydrates': 14, 'vitaminC': 1.3 } + ] + ``` + 实际开发中，开发者可以自定义更多的数据资源，当食物资源很多时，建议使用数据懒加载LazyForEach。 5. 创建initializeOnStartUp方法来初始化FoodData的数组。在FoodDataModels.ets中使用了定义在FoodData.ets的FoodData和Category，所以要将FoodData.ets的FoodData类export，在FoodDataModels.ets内import FoodData和Category。