Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
2b4c584f
D
Docs
项目概览
OpenHarmony
/
Docs
大约 2 年 前同步成功
通知
161
Star
293
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
提交
2b4c584f
编写于
6月 01, 2023
作者:
L
lixiang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update web docs(3.2release)
Signed-off-by:
N
lixiang
<
lixiang380@huawei.com
>
上级
d82054bf
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
65 addition
and
68 deletion
+65
-68
zh-cn/application-dev/reference/apis/js-apis-webview.md
zh-cn/application-dev/reference/apis/js-apis-webview.md
+62
-67
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
...ication-dev/reference/arkui-ts/ts-basic-components-web.md
+3
-1
未找到文件。
zh-cn/application-dev/reference/apis/js-apis-webview.md
浏览文件 @
2b4c584f
...
...
@@ -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
**示例:**
本示例以
Main
Ability 为例,描述了在 Ability 创建阶段完成 Web 组件动态库加载的功能。
本示例以
Entry
Ability 为例,描述了在 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从
Main
Ability.ts中获取。
// globalThis.cacheDir从
Entry
Ability.ts中获取。
let
path
=
globalThis
.
cacheDir
;
path
+=
'
/WebState
'
;
// 以同步方法打开文件。
...
...
@@ -3121,14 +3116,14 @@ struct WebComponent {
}
```
2.
修改
Main
Ability.ts。
2.
修改
Entry
Ability.ts。
获取应用缓存文件路径。
```
ts
// xxx.ts
import
UIAbility
from
'
@ohos.app.ability.UIAbility
'
;
import
web_webview
from
'
@ohos.web.webview
'
;
export
default
class
Main
Ability
extends
UIAbility
{
export
default
class
Entry
Ability
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从
Main
Ability.ts中获取。
// globalThis.cacheDir从
Entry
Ability.ts中获取。
let
path
=
globalThis
.
cacheDir
;
path
+=
'
/WebState
'
;
// 以同步方法打开文件。
...
...
@@ -3203,14 +3198,14 @@ struct WebComponent {
}
```
2.
修改
Main
Ability.ts。
2.
修改
Entry
Ability.ts。
获取应用缓存文件路径。
```
ts
// xxx.ts
import
UIAbility
from
'
@ohos.app.ability.UIAbility
'
;
import
web_webview
from
'
@ohos.web.webview
'
;
export
default
class
Main
Ability
extends
UIAbility
{
export
default
class
Entry
Ability
extends
UIAbility
{
onCreate
(
want
,
launchParam
)
{
// 通过在globalThis对象上绑定cacheDir,可以实现UIAbility组件与Page之间的数据同步。
globalThis
.
cacheDir
=
this
.
context
.
cacheDir
;
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
浏览文件 @
2b4c584f
...
...
@@ -87,7 +87,7 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController})
}
```
2.
修改
Main
Ability.ts。
2.
修改
Entry
Ability.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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录