Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Coping0606
Docs
提交
5cb9b3b8
D
Docs
项目概览
Coping0606
/
Docs
与 Fork 源项目一致
Fork自
OpenHarmony / Docs
通知
1
Star
1
Fork
0
代码
文件
提交
分支
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看板
体验新版 GitCode,发现更多精彩内容 >>
提交
5cb9b3b8
编写于
8月 11, 2022
作者:
E
echoorchid
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
webMessagePort接口doc描述及示例
Signed-off-by:
N
echoorchid
<
huweidong2@huawei.com
>
上级
231180d1
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
248 addition
and
0 deletion
+248
-0
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
...ication-dev/reference/arkui-ts/ts-basic-components-web.md
+248
-0
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
浏览文件 @
5cb9b3b8
...
...
@@ -2548,6 +2548,86 @@ getCookieManager(): WebCookie
}
```
### createWebMessagePorts<sup>9+</sup>
createWebMessagePorts(): Array
<WebMessagePort>
创建Web信息端口。
**返回值:**
| 类型 | 说明 |
| ------------------------------- | ------------- |
| Array
<WebMessagePort>
| web信息端口列表 |
**示例:**
```
ts
// xxx.ets
@
Entry
@
Component
struct
WebComponent
{
controller
:
WebController
=
new
WebController
();
ports
:
WebMessagePorts
[]
=
null
;
build
()
{
Column
()
{
Button
(
'
createWebMessagePorts
'
)
.
onClick
(()
=>
{
this
.
ports
=
this
.
controller
.
createWebMessagePorts
();
console
.
log
(
"
createWebMessagePorts size:
"
+
this
.
ports
.
length
)
})
Web
({
src
:
'
www.example.com
'
,
controller
:
this
.
controller
})
}
}
}
```
### postMessage<sup>9+</sup>
postMessage(options: { message: WebMessageEvent, uri: string}): void
发送Web信息端口到Html5。
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | --------------- | ---- | ---- | ------------------------- |
| message | WebMessageEvent | 是 | - |要发送的信息,包含数据和信息端口 。 |
| uri | string | 是 | - | 接收该信息的URI。 |
**示例:**
```
ts
// xxx.ets
@
Entry
@
Component
struct
WebComponent
{
controller
:
WebController
=
new
WebController
();
ports
:
WebMessagePorts
[]
=
null
;
build
()
{
Column
()
{
Button
(
'
postMessage
'
)
.
onClick
(()
=>
{
var
sendPortArray
=
new
Array
(
this
.
ports
[
1
]);
var
msgEvent
=
new
WebMessageEvent
();
msgEvent
.
setData
(
"
__init_ports__
"
);
msgEvent
.
setPorts
(
sendPortArray
);
this
.
controller
.
postMessage
(
msgEvent
,
uri
:
"
*
"
);
})
Web
({
src
:
'
www.example.com
'
,
controller
:
this
.
controller
})
}
}
}
// xxx.js
var
h5Port
;
window
.
addEventListener
(
'
message
'
,
function
(
event
){
if
(
event
.
data
==
'
__init_ports__
'
)
{
if
(
event
.
ports
[
0
]
!=
null
)
{
h5Port
=
event
.
ports
[
0
];
h5Port
.
onmessage
=
function
(
event
)
{
console
.
log
(
'
receive message from ets, on message:
'
+
event
.
data
);
}
}
}
})
```
## HitTestValue<sup>9+</sup>
提供点击区域的元素信息。示例代码参考
[
getHitTestValue
](
#gethittestvalue9
)
。
...
...
@@ -3402,3 +3482,171 @@ storeWebArchive(baseName: string, autoName: boolean): Promise<string>
}
}
```
## WebMessagePort<sup>9+</sup>
通过WebMessagePort可以进行消息的发送以及接收。
### postMessageEvent
close(): void
关闭该信息端口。
### postMessageEvent
postMessageEvent(message: WebMessageEvent): void
发送消息。
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- |
| message | WebMessageEvent | 是 | - | 要发送的消息。 |
**示例:**
```
ts
// xxx.ets
@
Entry
@
Component
struct
WebComponent
{
controller
:
WebController
=
new
WebController
();
ports
:
WebMessagePorts
[]
=
null
;
build
()
{
Column
()
{
Button
(
'
postMessageEvent
'
)
.
onClick
(()
=>
{
var
msg
=
new
WebMessageEvent
();
msg
.
setData
(
"
post message from ets to h5
"
);
this
.
port
[
0
].
postMessageEvent
(
msg
);
})
Web
({
src
:
'
www.example.com
'
,
controller
:
this
.
controller
})
}
}
}
```
### onMessageEvent
onMessageEvent(callback: (result: string) => void): void
注册回调函数,接收h5侧发送过来的消息。
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- |
| callback | function | 是 | - | 接收消息的回调函数。 |
**示例:**
```
ts
// xxx.ets
@
Entry
@
Component
struct
WebComponent
{
controller
:
WebController
=
new
WebController
();
ports
:
WebMessagePorts
[]
=
null
;
build
()
{
Column
()
{
Button
(
'
onMessageEvent
'
)
.
onClick
(()
=>
{
this
.
port
[
0
].
onMessageEvent
((
result
:
string
)
=>
{
console
.
log
(
"
received message from h5, on message:
"
+
result
);
})
})
Web
({
src
:
'
www.example.com
'
,
controller
:
this
.
controller
})
}
}
}
```
## WebMessageEvent<sup>9+</sup>
通过WebMessagePort对要发送的消息和端口进行封装。
### getData
getData(): string
获取当前对象中存放的消息。
**返回值:**
| 类型 | 说明 |
| ------------------------------- | ------------- |
| string | 当前该类型对象中存放的消息。 |
### setData
setData(data: string): void
设置当前对象中的消息。
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- |
| data | string | 是 | - | 要发送的消息。 |
**示例:**
```
ts
// xxx.ets
@
Entry
@
Component
struct
WebComponent
{
controller
:
WebController
=
new
WebController
();
ports
:
WebMessagePorts
[]
=
null
;
build
()
{
Column
()
{
Button
(
'
setData
'
)
.
onClick
(()
=>
{
var
msg
=
new
WebMessageEvent
();
msg
.
setData
(
"
post message from ets to h5
"
);
this
.
port
[
0
].
postMessageEvent
(
msg
);
})
Web
({
src
:
'
www.example.com
'
,
controller
:
this
.
controller
})
}
}
}
```
### getPorts
getPorts(): Array
<WebMessagePort>
获取当前对象中存放的消息端口。
**返回值:**
| 类型 | 说明 |
| ------------------------------- | ------------- |
| Array
<WebMessagePort>
| 当前该类型对象中存放的消息端口。 |
### setPorts
setPorts(ports: Array
<WebMessagePort>
): void
设置当前对象中的消息端口。
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- |
| ports | Array
<WebMessagePort>
| 是 | - | 要发送的消息端口。 |
**示例:**
```
ts
// xxx.ets
@
Entry
@
Component
struct
WebComponent
{
controller
:
WebController
=
new
WebController
();
ports
:
WebMessagePorts
[]
=
null
;
build
()
{
Column
()
{
Button
(
'
setPorts
'
)
.
onClick
(()
=>
{
var
sendPortArray
=
new
Array
(
this
.
ports
[
1
]);
var
msgEvent
=
new
WebMessageEvent
();
msgEvent
.
setData
(
"
__init_ports__
"
);
msgEvent
.
setPorts
(
sendPortArray
);
this
.
controller
.
postMessage
(
msgEvent
,
uri
:
"
*
"
);
})
Web
({
src
:
'
www.example.com
'
,
controller
:
this
.
controller
})
}
}
}
```
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录