提交 2b4c584f 编写于 作者: L lixiang

update web docs(3.2release)

Signed-off-by: Nlixiang <lixiang380@huawei.com>
上级 d82054bf
......@@ -63,42 +63,6 @@ struct WebComponent {
通过WebMessagePort可以进行消息的发送以及接收。
### close
close(): void
关闭该消息端口。
**系统能力:** SystemCapability.Web.Webview.Core
**示例:**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
msgPort: web_webview.WebMessagePort[] = null;
build() {
Column() {
Button('close')
.onClick(() => {
if (this.msgPort && this.msgPort[1]) {
this.msgPort[1].close();
} else {
console.error("msgPort is null, Please initialize first");
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### postMessageEvent
postMessageEvent(message: WebMessage): void
......@@ -214,6 +178,56 @@ struct WebComponent {
}
```
### close
close(): void
关闭该消息端口。在使用close前,请先使用[createWebMessagePorts](#createwebmessageports)创建消息端口。
**系统能力:** SystemCapability.Web.Webview.Core
**示例:**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
msgPort: web_webview.WebMessagePort[] = null;
build() {
Column() {
// 先使用createWebMessagePorts创建端口。
Button('createWebMessagePorts')
.onClick(() => {
try {
this.msgPort = this.controller.createWebMessagePorts();
console.log("createWebMessagePorts size:" + this.msgPort.length)
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Button('close')
.onClick(() => {
try {
if (this.msgPort && this.msgPort[1]) {
this.msgPort[1].close();
} else {
console.error("msgPort is null, Please initialize first");
}
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
## WebviewController
通过WebviewController可以控制Web组件各种行为。一个WebviewController对象只能控制一个Web组件,且必须在Web组件和WebviewController绑定后,才能调用WebviewController上的方法(静态方法除外)。
......@@ -228,7 +242,7 @@ static initializeWebEngine(): void
**示例:**
本示例以 MainAbility 为例,描述了在 Ability 创建阶段完成 Web 组件动态库加载的功能。
本示例以 EntryAbility 为例,描述了在 Ability 创建阶段完成 Web 组件动态库加载的功能。
```ts
// xxx.ts
......@@ -239,36 +253,16 @@ export default class EntryAbility extends UIAbility {
onCreate(want, launchParam) {
console.log("EntryAbility onCreate")
web_webview.WebviewController.initializeWebEngine()
globalThis.abilityWant = want
console.log("EntryAbility onCreate done")
}
}
```
### 创建对象
```ts
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### setWebDebuggingAccess
static setWebDebuggingAccess(webDebuggingAccess: boolean): void
设置是否启用网页调试功能。
设置是否启用网页调试功能。详情请参考[Devtools工具](../../web/web-debugging-with-devtools.md)
**系统能力:** SystemCapability.Web.Webview.Core
......@@ -344,7 +338,7 @@ struct WebComponent {
Button('loadUrl')
.onClick(() => {
try {
//需要加载的URL是string类型
// 需要加载的URL是string类型。
this.controller.loadUrl('www.example.com');
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
......@@ -370,7 +364,7 @@ struct WebComponent {
Button('loadUrl')
.onClick(() => {
try {
//带参数headers
// 带参数headers。
this.controller.loadUrl('www.example.com', [{headerKey: "headerKey", headerValue: "headerValue"}]);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
......@@ -383,6 +377,7 @@ struct WebComponent {
```
加载本地网页,加载本地资源文件有两种方式。
1.$rawfile方式。
```ts
// xxx.ets
......@@ -398,7 +393,7 @@ struct WebComponent {
Button('loadUrl')
.onClick(() => {
try {
//需要加载的URL是Resource类型
// 需要加载的URL是Resource类型。
this.controller.loadUrl($rawfile('xxx.html'));
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
......@@ -3104,7 +3099,7 @@ struct WebComponent {
.onClick(() => {
try {
let state = this.controller.serializeWebState();
// globalThis.cacheDir从MainAbility.ts中获取。
// globalThis.cacheDir从EntryAbility.ts中获取。
let path = globalThis.cacheDir;
path += '/WebState';
// 以同步方法打开文件。
......@@ -3121,14 +3116,14 @@ struct WebComponent {
}
```
2.修改MainAbility.ts。
2.修改EntryAbility.ts。
获取应用缓存文件路径。
```ts
// xxx.ts
import UIAbility from '@ohos.app.ability.UIAbility';
import web_webview from '@ohos.web.webview';
export default class MainAbility extends UIAbility {
export default class EntryAbility extends UIAbility {
onCreate(want, launchParam) {
// 通过在globalThis对象上绑定cacheDir,可以实现UIAbility组件与Page之间的数据同步。
globalThis.cacheDir = this.context.cacheDir;
......@@ -3176,7 +3171,7 @@ struct WebComponent {
Button('RestoreWebState')
.onClick(() => {
try {
// globalThis.cacheDir从MainAbility.ts中获取。
// globalThis.cacheDir从EntryAbility.ts中获取。
let path = globalThis.cacheDir;
path += '/WebState';
// 以同步方法打开文件。
......@@ -3203,14 +3198,14 @@ struct WebComponent {
}
```
2.修改MainAbility.ts。
2.修改EntryAbility.ts。
获取应用缓存文件路径。
```ts
// xxx.ts
import UIAbility from '@ohos.app.ability.UIAbility';
import web_webview from '@ohos.web.webview';
export default class MainAbility extends UIAbility {
export default class EntryAbility extends UIAbility {
onCreate(want, launchParam) {
// 通过在globalThis对象上绑定cacheDir,可以实现UIAbility组件与Page之间的数据同步。
globalThis.cacheDir = this.context.cacheDir;
......
......@@ -87,7 +87,7 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController})
}
```
2.修改MainAbility.ts。
2.修改EntryAbility.ts。
以filesDir为例,获取沙箱路径。若想获取其他路径,请参考[应用开发路径](../../application-models/application-context-stage.md#获取应用开发路径)
```ts
// xxx.ts
......@@ -1637,6 +1637,8 @@ onConsole(callback: (event?: { message: ConsoleMessage }) => boolean)
onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void)
通知主应用开始下载一个文件。
**参数:**
| 参数名 | 参数类型 | 参数描述 |
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册