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

update web docs(3.2release)

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