Skip to content

D
Docs

OpenHarmony / Docs
接近 2 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 fdded6f9 编写于 作者: E echoorchid
浏览文件
操作

review update 

Signed-off-by: Nechoorchid <huweidong2@huawei.com>
上级 f4d01d22
隐藏空白更改
内联 并排
Showing with 35 addition and 31 deletion
zh-cn/application-dev/reference/apis/js-apis-webview.md
浏览文件 @ fdded6f9
...@@ -103,7 +103,7 @@ struct WebComponent { ...@@ -103,7 +103,7 @@ struct WebComponent {
postMessageEvent(message: WebMessage): void postMessageEvent(message: WebMessage): void
发送消息。完整示例代码参考[postMessage](#postmessage) 发送消息。完整示例代码参考[postMessage](#postmessage)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
...@@ -155,7 +155,7 @@ struct WebComponent { ...@@ -155,7 +155,7 @@ struct WebComponent {
onMessageEvent(callback: (result: WebMessage) => void): void onMessageEvent(callback: (result: WebMessage) => void): void
注册回调函数，接收HTML5侧发送过来的消息。完整示例代码参考[postMessage](#postmessage) 注册回调函数，接收HTML5侧发送过来的消息。完整示例代码参考[postMessage](#postmessage)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
...@@ -226,7 +226,7 @@ struct WebComponent { ...@@ -226,7 +226,7 @@ struct WebComponent {
postMessageEventExt(message: WebMessageExt): void postMessageEventExt(message: WebMessageExt): void
发送消息。完整示例代码参考[onMessageEventExt](#onmessageeventext10) 发送消息。完整示例代码参考[onMessageEventExt](#onmessageeventext10)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
...@@ -257,7 +257,7 @@ onMessageEventExt(callback: (result: WebMessageExt) => void): void ...@@ -257,7 +257,7 @@ onMessageEventExt(callback: (result: WebMessageExt) => void): void
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | ---- | :------------------- | | -------- | -------- | ---- | :------------------- |
| result | [WebMessageExt](#webmessageext) | 是 | 接收到的消息。 | | result | [WebMessageExt](#webmessageext10) | 是 | 接收到的消息。 |
**错误码：** **错误码：**
...@@ -273,6 +273,7 @@ onMessageEventExt(callback: (result: WebMessageExt) => void): void ...@@ -273,6 +273,7 @@ onMessageEventExt(callback: (result: WebMessageExt) => void): void
// xxx.ets // xxx.ets
import web_webview from '@ohos.web.webview' import web_webview from '@ohos.web.webview'
// 应用与网页互发消息的示例：使用"init_web_messageport"的通道，通过端口0在应用侧接受网页发送的消息，通过端口1在网页侧接受应用发送的消息。
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
...@@ -288,7 +289,7 @@ struct WebComponent { ...@@ -288,7 +289,7 @@ struct WebComponent {
Text(this.msg2).fontSize(16) Text(this.msg2).fontSize(16)
Button('SendToH5') Button('SendToH5')
.onClick(() => { .onClick(() => {
// use the native port to send message to html5 // 使用本侧端口发送消息给HTML5
try { try {
console.log("In eTS side send true start"); console.log("In eTS side send true start");
if (this.nativePort) { if (this.nativePort) {
...@@ -304,13 +305,13 @@ struct WebComponent { ...@@ -304,13 +305,13 @@ struct WebComponent {
Web({ src: $rawfile('index.html'), controller: this.controller }) Web({ src: $rawfile('index.html'), controller: this.controller })
.onPageEnd((e)=>{ .onPageEnd((e)=>{
console.log("In eTS side message onPageEnd init mesaage channel"); console.log("In eTS side message onPageEnd init mesaage channel");
// 1. create web message ports // 1. 创建消息端口
this.ports = this.controller.createWebMessagePorts(true); this.ports = this.controller.createWebMessagePorts(true);
// 2. send the other one to h5 // 2. 发送端口1到HTML5
this.controller.postMessage("__init_channel_2__", [this.ports[1]], "*"); this.controller.postMessage("init_web_messageport", [this.ports[1]], "*");
// 3. keep one for ourself // 3. 保存端口0到本地
this.nativePort = this.ports[0]; this.nativePort = this.ports[0];
// 4. set on message function // 4. 设置回调函数
this.nativePort.onMessageEventExt((result) => { this.nativePort.onMessageEventExt((result) => {
console.log("In eTS side got message"); console.log("In eTS side got message");
try { try {
...@@ -350,7 +351,6 @@ struct WebComponent { ...@@ -350,7 +351,6 @@ struct WebComponent {
default: { default: {
this.msg1 = "default break, type:" + type; this.msg1 = "default break, type:" + type;
break; break;
break;
} }
} }
} }
...@@ -362,8 +362,10 @@ struct WebComponent { ...@@ -362,8 +362,10 @@ struct WebComponent {
} }
} }
} }
```
//index.html ```html
<!--index.html-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-gb"> <html lang="en-gb">
<head> <head>
...@@ -380,11 +382,13 @@ struct WebComponent { ...@@ -380,11 +382,13 @@ struct WebComponent {
</body> </body>
<script src="index.js"></script> <script src="index.js"></script>
</html> </html>
```
```js
//index.js //index.js
var h5Port; var h5Port;
window.addEventListener('message', function(event) { window.addEventListener('message', function(event) {
if (event.data == '__init_channel_2__') { if (event.data == 'init_web_messageport') {
if(event.ports[0] != null) { if(event.ports[0] != null) {
h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口 h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口
h5Port.onmessage = function(event) { h5Port.onmessage = function(event) {
...@@ -2026,7 +2030,7 @@ struct WebComponent { ...@@ -2026,7 +2030,7 @@ struct WebComponent {
createWebMessagePorts(isExtentionType?: boolean): Array\<WebMessagePort> createWebMessagePorts(isExtentionType?: boolean): Array\<WebMessagePort>
创建Web消息端口。完整示例代码参考[onMessageEventExt](#onmessageeventext10) 创建Web消息端口。完整示例代码参考[onMessageEventExt](#onmessageeventext10)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
...@@ -5639,7 +5643,7 @@ getType(): JsMessageType ...@@ -5639,7 +5643,7 @@ getType(): JsMessageType
getString(): string getString(): string
获取数据对象的字符串类型数据。完整示例代码参考[runJavaScriptExt](#runjavascriptext10) 获取数据对象的字符串类型数据。完整示例代码参考[runJavaScriptExt](#runjavascriptext10)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
...@@ -5662,7 +5666,7 @@ getString(): string ...@@ -5662,7 +5666,7 @@ getString(): string
getNumber(): number getNumber(): number
获取数据对象的数值类型数据。完整示例代码参考[runJavaScriptExt](#runjavascriptext10) 获取数据对象的数值类型数据。完整示例代码参考[runJavaScriptExt](#runjavascriptext10)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
...@@ -5684,7 +5688,7 @@ getNumber(): number ...@@ -5684,7 +5688,7 @@ getNumber(): number
getBoolean(): boolean getBoolean(): boolean
获取数据对象的布尔类型数据。完整示例代码参考[runJavaScriptExt](#runjavascriptext10) 获取数据对象的布尔类型数据。完整示例代码参考[runJavaScriptExt](#runjavascriptext10)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
...@@ -5707,7 +5711,7 @@ getBoolean(): boolean ...@@ -5707,7 +5711,7 @@ getBoolean(): boolean
getArrayBuffer(): ArrayBuffer getArrayBuffer(): ArrayBuffer
获取数据对象的原始二进制数据。完整示例代码参考[runJavaScriptExt](#runjavascriptext10) 获取数据对象的原始二进制数据。完整示例代码参考[runJavaScriptExt](#runjavascriptext10)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
**返回值：** **返回值：**
...@@ -5728,7 +5732,7 @@ getArrayBuffer(): ArrayBuffer ...@@ -5728,7 +5732,7 @@ getArrayBuffer(): ArrayBuffer
getArray(): Array\<string | number | boolean\> getArray(): Array\<string | number | boolean\>
获取数据对象的数组类型数据。完整示例代码参考[runJavaScriptExt](#runjavascriptext10) 获取数据对象的数组类型数据。完整示例代码参考[runJavaScriptExt](#runjavascriptext10)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
...@@ -5770,7 +5774,7 @@ getType(): WebMessageType ...@@ -5770,7 +5774,7 @@ getType(): WebMessageType
getString(): string getString(): string
获取数据对象的字符串类型数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10) 获取数据对象的字符串类型数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
...@@ -5793,7 +5797,7 @@ getString(): string ...@@ -5793,7 +5797,7 @@ getString(): string
getNumber(): number getNumber(): number
获取数据对象的数值类型数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10) 获取数据对象的数值类型数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
...@@ -5816,7 +5820,7 @@ getNumber(): number ...@@ -5816,7 +5820,7 @@ getNumber(): number
getBoolean(): boolean getBoolean(): boolean
获取数据对象的布尔类型数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10) 获取数据对象的布尔类型数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
...@@ -5839,7 +5843,7 @@ getBoolean(): boolean ...@@ -5839,7 +5843,7 @@ getBoolean(): boolean
getArrayBuffer(): ArrayBuffer getArrayBuffer(): ArrayBuffer
获取数据对象的原始二进制数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10) 获取数据对象的原始二进制数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
**返回值：** **返回值：**
...@@ -5860,7 +5864,7 @@ getArrayBuffer(): ArrayBuffer ...@@ -5860,7 +5864,7 @@ getArrayBuffer(): ArrayBuffer
getArray(): Array\<string | number | boolean\> getArray(): Array\<string | number | boolean\>
获取数据对象的数组类型数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10) 获取数据对象的数组类型数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
...@@ -5882,7 +5886,7 @@ getArray(): Array\<string | number | boolean\> ...@@ -5882,7 +5886,7 @@ getArray(): Array\<string | number | boolean\>
getError(): Error getError(): Error
获取数据对象的错误类型数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10) 获取数据对象的错误类型数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
...@@ -5925,7 +5929,7 @@ setType(type: WebMessageType): void ...@@ -5925,7 +5929,7 @@ setType(type: WebMessageType): void
setString(message: string): void setString(message: string): void
设置数据对象的字符串类型数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10) 设置数据对象的字符串类型数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
...@@ -5945,7 +5949,7 @@ setString(message: string): void ...@@ -5945,7 +5949,7 @@ setString(message: string): void
setNumber(message: number): void setNumber(message: number): void
设置数据对象的数值类型数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10) 设置数据对象的数值类型数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
...@@ -5965,7 +5969,7 @@ setNumber(message: number): void ...@@ -5965,7 +5969,7 @@ setNumber(message: number): void
setBoolean(message: boolean): void setBoolean(message: boolean): void
设置数据对象的布尔类型数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10) 设置数据对象的布尔类型数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
...@@ -5985,7 +5989,7 @@ setBoolean(message: boolean): void ...@@ -5985,7 +5989,7 @@ setBoolean(message: boolean): void
setArrayBuffer(message: ArrayBuffer): void setArrayBuffer(message: ArrayBuffer): void
设置数据对象的原始二进制数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10) 设置数据对象的原始二进制数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
...@@ -6005,7 +6009,7 @@ setArrayBuffer(message: ArrayBuffer): void ...@@ -6005,7 +6009,7 @@ setArrayBuffer(message: ArrayBuffer): void
setArray(message: Array\<string | number | boolean\>): void setArray(message: Array\<string | number | boolean\>): void
设置数据对象的数组类型数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10) 设置数据对象的数组类型数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
...@@ -6025,7 +6029,7 @@ setArray(message: Array\<string | number | boolean\>): void ...@@ -6025,7 +6029,7 @@ setArray(message: Array\<string | number | boolean\>): void
setError(message: Error): void setError(message: Error): void
设置数据对象的错误对象类型数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10) 设置数据对象的错误对象类型数据。完整示例代码参考[onMessageEventExt](#onmessageeventext10)。
**系统能力：** SystemCapability.Web.Webview.Core **系统能力：** SystemCapability.Web.Webview.Core
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或