未验证 提交 21498d51 编写于 作者: O openharmony_ci 提交者: Gitee

!1347 fix web doc.

Merge pull request !1347 from lixingchi1/web_0127
......@@ -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 | <a href="#WebController">WebController</a> | 否 | - | 控制器。 |
> ![](../../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) | <p>网页加载结束时触发该回调。<br />url:Web 引擎返回的 URL。</p> |
## WebController
## <a name="WebController"></a>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<string, string> }): void
loadUrl(url: string): void
加载 URL。
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ------------------- | ---- | ---- | ---------- |
| url | string | 是 | - | 需要加载的 URL。 |
| headerMap | Map<string, string> | 否 | - | 请求头集合。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---- | ------ | ---- | ---- | ---------- |
| 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
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
Hello world!
</body>
<script type="text/javascript">
function test() {
console.log('Ark WebComponent');
}
</script>
</html>
```
![](figures/Web.png)
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册