From da596280fdef5dd1d107a1ad2b6c2e22a7b077a7 Mon Sep 17 00:00:00 2001 From: lixingchi1 Date: Thu, 27 Jan 2022 16:41:07 +0800 Subject: [PATCH] lixingchi1@huawei.com Signed-off-by: lixingchi1 --- .../reference/arkui-ts/figures/Web.png | Bin 0 -> 3544 bytes .../arkui-ts/ts-basic-components-web.md | 96 ++++++++++-------- 2 files changed, 55 insertions(+), 41 deletions(-) create mode 100644 zh-cn/application-dev/reference/arkui-ts/figures/Web.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Web.png b/zh-cn/application-dev/reference/arkui-ts/figures/Web.png new file mode 100644 index 0000000000000000000000000000000000000000..a9566a229865d250ba1a8c447d93ea577dc0dbc5 GIT binary patch literal 3544 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 Haf|ymG7J%P literal 0 HcmV?d00001 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md index 4d6797bc24..0af11727a4 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md @@ -3,11 +3,11 @@ >![](../../public_sys-resources/icon-note.gif) **说明：** >该组件从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -提供具有页面显示能力的 WebView 组件。 +提供具有网页显示能力的 Web 组件。 ## 权限列表 -ohos.permission.INTERNET（使用网络图片） +ohos.permission.INTERNET ohos.permission.READ_USER_STORAGE @@ -21,29 +21,40 @@ ohos.permission.READ_USER_STORAGE 表1 options 参数说明 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | ---------- | ------------- | ---- | ---- | ----- | - | src | string | 是 | - | 网页地址。 | - | controller | WebController | 否 | - | 控制器。 | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | ---------- | ---------------------------------------- | ---- | ---- | ------- | + | src | string | 是 | - | 网页资源地址。 | + | controller | WebController | 否 | - | 控制器。 | +> ![](../../public_sys-resources/icon-note.gif) **说明：** +> +> - 一个页面只支持一个 Web 组件，全屏显示，页面中的其他组件会被 Web 组件遮挡； +> - 不支持转场动画； +> - 只支持加载 rawfile 目录下的 html 文件，不支持远程资源。 + ## 属性 | 名称 | 参数类型 | 默认值 | 描述 | | ---------------- | ------- | ----- | ---------------------------------------- | | javaScriptAccess | boolean | false | 是否允许执行 JavaScript 脚本，当设置为 false 时，不允许执行。 | -| fileAccess | boolean | false | 启用或禁用 WebView 中是否能通过 file 方式访问应用中的本地文件，当设置为 false 时，禁用。 | +| fileAccess | boolean | false | 启用或禁用 Web 中可通过 file 方式访问应用中的本地文件，当设置为 false 时，禁用。 | + +> ![](../../public_sys-resources/icon-note.gif) **说明：** +> +> 不支持通用属性。 ## 事件 -| 名称 | 功能描述 | -| ---------------------------------------- | -------------------- | -| onPageEnd(callback: (event?: { url: string }) => void) | 网页加载结束时触发该回调。 | -| onRequestSelected(callback: () => void) | 获取 WebView 焦点时触发该回调。 | +不支持通用事件。 + +| 名称 | 功能描述 | +| ---------------------------------------- | ---------------------------------------- | +| onPageEnd(callback: (event?: { url: string }) => void) |

网页加载结束时触发该回调。
url：Web 引擎返回的 URL。

| -## WebController +## WebController -WebView 组件的控制器。 +Web 组件的控制器。 ### 创建对象 @@ -51,65 +62,68 @@ WebView 组件的控制器。 webController: WebController = new WebController() ``` -### webController.runJavaScript +### runJavaScript -runJavaScript(options: { script: string, callback?: (error, data) => void }): void +runJavaScript(script: string): void 执行 JavaScript 脚本。 - 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | --------------------- | ---- | ---- | --------------------- | - | script | string | 是 | - | JavaScript 脚本。 | - | callback | (error, data) => void | 否 | - | 执行 JavaScript 脚本时的回调。 | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | ------ | ------ | ---- | ---- | -------------- | + | script | string | 是 | - | JavaScript 脚本。 | -### webController.loadUrl +### loadUrl -loadUrl(options: { url: string, headerMap?: Map }): void +loadUrl(url: string): void 加载 URL。 - 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | --------- | ------------------- | ---- | ---- | ---------- | - | url | string | 是 | - | 需要加载的 URL。 | - | headerMap | Map | 否 | - | 请求头集合。 | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | ---- | ------ | ---- | ---- | ---------- | + | url | string | 是 | - | 需要加载的 URL。 | - ​ ## 示例 ``` +// webComponent.ets @Entry @Component struct WebComponent { @State javaScriptAccess: boolean = true; @State fileAccess: boolean = true; controller: WebController = new WebController(); - build() { Column() { - Web(src: 'https://gitee.com/openharmony', controller: this.controller) + Web(src: $rawfile('index.html'), controller: this.controller) .javaScriptAccess(javaScriptAccess) .fileAccess(fileAccess) - .onRequestSelected(() => { - // Gitee.initNavbar() 函数定义在网页中 - this.controller.runJavaScript('javascript:Gitee.initNavbar()', - (err, data) => { - if (err) { - console.error('Operation failed. Cause: ', JSON.stringify(err)); - return; - } - console.info('Operation successful. Data: ', JSON.stringify(data)); - }) - }) - .onPageEnd((event) => { - console.log("url: ", event.url); + .onPageEnd(e => { + // test() 在 index.html 中已定义 + this.controller.runJavaScript('test()'); + console.log("url: ", e.url); }) } } } + +// index.html + + + + + Hello world! + + + ``` +![](figures/Web.png) \ No newline at end of file -- GitLab