HarmonyOS 应用侧与前端页面数据通道建立
作者：HarmonyOS开发者
- 2023-09-15 北京
本文字数：4085 字
阅读完需：约 13 分钟
一、应用侧调用前端页面函数
应用侧可以通过runJavaScript()方法调用前端页面的 JavaScript 相关函数。在下面的示例中，点击应用侧的“runJavaScript”按钮时，来触发前端页面的 htmlTest()方法。
前端页面应用侧代码。
<!-- index.html --><!DOCTYPE html><html><body><script> function htmlTest() { console.info('JavaScript Hello World! '); }</script></body></html>
复制代码
应用侧代码。
// xxx.etsimport web_webview from '@ohos.web.webview';
@Entry@Componentstruct WebComponent { webviewController: web_webview.WebviewController = new web_webview.WebviewController();
build() { Column() { Web({ src: $rawfile('index.html'), controller: this.webviewController}) Button('runJavaScript') .onClick(() => { this.webviewController.runJavaScript('htmlTest()'); }) } }}
复制代码
二、前端页面调用应用侧函数
开发者使用 Web 组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就可以调用应用侧的函数，实现在前端页面中调用应用侧方法。
注册应用侧代码有两种方式，一种在 Web 组件初始化使用调用，使用 javaScriptProxy()接口。另外一种在 Web 组件初始化完成后调用，使用registerJavaScriptProxy()接口。
在下面的示例中，将 test()方法注册在前端页面中， 该函数可以在前端页面触发运行。
javaScriptProxy()接口使用示例如下。
// xxx.etsimport web_webview from '@ohos.web.webview';
@Entry@Componentstruct WebComponent { webviewController: web_webview.WebviewController = new web_webview.WebviewController(); // 声明需要注册的对象 testObj = { test: () => { return 'ArkTS Hello World!'; } }
build() { Column() { // web组件加载本地index.html页面 Web({ src: $rawfile('index.html'), controller: this.webviewController}) // 将对象注入到web端 .javaScriptProxy({ object: this.testObj, name: "testObjName", methodList: ["test"], controller: this.webviewController }) } }}
复制代码
● 应用侧使用 registerJavaScriptProxy()接口注册。
// xxx.etsimport web_webview from '@ohos.web.webview';
@Entry@Componentstruct Index { webviewController: web_webview.WebviewController = new web_webview.WebviewController(); testObj = { test: (data) => { return "ArkUI Web Component"; }, toString: () => { console.info('Web Component toString'); } }
build() { Column() { Button('refresh') .onClick(() => { try { this.webviewController.refresh(); } catch (error) { console.error(`Errorcode: ${error.code}, Message: ${error.message}`); } }) Button('Register JavaScript To Window') .onClick(() => { try { this.webviewController.registerJavaScriptProxy(this.testObj, "objName", ["test", "toString"]); } catch (error) { console.error(`Errorcode: ${error.code}, Message: ${error.message}`); } }) Web({ src: $rawfile('index.html'), controller: this.webviewController }) } }}
复制代码
说明
使用registerJavaScriptProxy()接口注册方法时，注册后需调用refresh()接口生效。
● index.html 前端页面触发应用侧代码。
<!-- index.html --><!DOCTYPE html><html><body><button type="button" onclick="callArkTS()">Click Me!</button><p id="demo"></p><script> function callArkTS() { let str = objName.test(); document.getElementById("demo").innerHTML = str; console.info('ArkTS Hello World! :' + str); }</script></body></html>
复制代码
三、建立应用侧与前端页面数据通道
前端页面和应用侧之间可以用createWebMessagePorts()接口创建消息端口来实现两端的通信。
在下面的示例中，应用侧页面中通过 createWebMessagePorts 方法创建消息端口，再把其中一个端口通过postMessage()接口发送到前端页面，便可以在前端页面和应用侧之间互相发送消息。
应用侧代码。
// xxx.etsimport web_webview from '@ohos.web.webview';
@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController(); ports: web_webview.WebMessagePort[]; @State sendFromEts: string = 'Send this message from ets to HTML'; @State receivedFromHtml: string = 'Display received message send from HTML';
build() { Column() { // 展示接收到的来自HTML的内容 Text(this.receivedFromHtml) // 输入框的内容发送到html TextInput({placeholder: 'Send this message from ets to HTML'}) .onChange((value: string) => { this.sendFromEts = value; })
Button('postMessage') .onClick(() => { try { // 1、创建两个消息端口。 this.ports = this.controller.createWebMessagePorts(); // 2、在应用侧的消息端口(如端口1)上注册回调事件。 this.ports[1].onMessageEvent((result: web_webview.WebMessage) => { let msg = 'Got msg from HTML:'; if (typeof(result) === 'string') { console.info(`received string message from html5, string is: ${result}`); msg = msg + result; } else if (typeof(result) === 'object') { if (result instanceof ArrayBuffer) { console.info(`received arraybuffer from html5, length is: ${result.byteLength}`); msg = msg + 'lenght is ' + result.byteLength; } else { console.info('not support'); } } else { console.info('not support'); } this.receivedFromHtml = msg; }) // 3、将另一个消息端口(如端口0)发送到HTML侧，由HTML侧保存并使用。 this.controller.postMessage('__init_port__', [this.ports[0]], '*'); } catch (error) { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); } })
// 4、使用应用侧的端口给另一个已经发送到html的端口发送消息。 Button('SendDataToHTML') .onClick(() => { try { if (this.ports && this.ports[1]) { this.ports[1].postMessageEvent(this.sendFromEts); } else { console.error(`ports is null, Please initialize first`); } } catch (error) { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); } }) Web({ src: $rawfile('xxx.html'), controller: this.controller }) } }}
复制代码
● 前端页面代码。
<!--xxx.html--><!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WebView Message Port Demo</title></head><body> <h1>WebView Message Port Demo</h1> <div> <input type="button" value="SendToEts" onclick="PostMsgToEts(msgFromJS.value);"/><br/> <input id="msgFromJS" type="text" value="send this message from HTML to ets"/><br/> </div> <p class="output">display received message send from ets</p></body><script>var h5Port;var output = document.querySelector('.output');window.addEventListener('message', function (event) { if (event.data === '__init_port__') { if (event.ports[0] !== null) { h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口 h5Port.onmessage = function (event) { // 2. 接收ets侧发送过来的消息. var msg = 'Got message from ets:'; var result = event.data; if (typeof(result) === 'string') { console.info(`received string message from html5, string is: ${result}`); msg = msg + result; } else if (typeof(result) === 'object') { if (result instanceof ArrayBuffer) { console.info(`received arraybuffer from html5, length is: ${result.byteLength}`); msg = msg + 'lenght is ' + result.byteLength; } else { console.info('not support'); } } else { console.info('not support'); } output.innerHTML = msg; } } }})// 3. 使用h5Port往ets侧发送消息.function PostMsgToEts(data) { if (h5Port) { h5Port.postMessage(data); } else { console.error('h5Port is null, Please initialize first'); }}</script></html>
复制代码
划线
评论
复制
发布于: 刚刚阅读数: 4
HarmonyOS开发者
关注
每一位开发者都是华为要汇聚的星星之火 2021-10-15 加入
提供HarmonyOS关键技术解析、版本更新、开发者实践和活动资讯，欢迎各位开发者加入HarmonyOS生态，一起创造无限可能！
评论