鸿蒙页面如何与H5页面交互？
在开发App时，我们经常会遇到使用webView加载H5页面的场景，这样做的好处就不多加赘述了，那么鸿蒙App如何加载H5页面呢？又怎么与H5页面进行通信呢？，废话少说，直接上代码。
鸿蒙App调用H5页面函数
App可以通过runJavaScript()方法调用html页面的JavaScript相关函数。 在下面的示例中，点击App的“runJavaScript”按钮时，来触发html页面的htmlTest()方法。
html文件目录：harmonyApp\entry\src\main\resources\rawfile
html代码如下：
<!-- index.html --><!DOCTYPE html><html><body><script>functionhtmlTest(){
console.info('JavaScript Hello World! ');}</script></body></html>
鸿蒙App代码如下：
// xxx.etsimport web_webview from'@ohos.web.webview';
@Entry
@Component
struct WebComponent {webviewController: web_webview.WebviewController =newweb_webview.WebviewController();
build(){Column(){// src可以改为你的H5页面网址，我这里用的是本地的html文件Web({src:$rawfile('index.html'),controller:this.webviewController})Button('runJavaScript').onClick(()=>{this.webviewController.runJavaScript('htmlTest()');})}}}
H5页面调用鸿蒙App函数
鸿蒙App可以通过web组件的javaScriptProxy()注册代码，在H5页面调用注册的对象和方法名实现触发App的函数。具体代码如下：
鸿蒙App代码如下：
// xxx.etsimport web_webview from'@ohos.web.webview';
classWebViewModel{constructor(){}
test(): string {return'ArkTS Hello World!';}}
@Entry
@Component
struct WebComponent {webviewController: web_webview.WebviewController =newweb_webview.WebviewController();// 声明需要注册的对象
@State vm: WebViewModel =newWebViewModel();
build(){Column(){// web组件加载本地index.html页面Web({src:$rawfile('index.html'),controller:this.webviewController})// 将对象注入到web端.javaScriptProxy({object:this.vm,name:"harmony",methodList:["test"],controller:this.webviewController
})}}}
html代码如下：
<!-- index.html --><!DOCTYPE html><html><body><button type="button" onclick="callArkTS()">Click Me!</button><p id="demo"></p><script>functioncallArkTS(){let str = window.harmony.test();
document.getElementById("demo").innerHTML = str;
console.info('ArkTS Hello World! :'+ str);}</script></body></html>
Web组件使用问题
鸿蒙的Web组件加载H5页面会出现很多意外的问题，我这里建议把Web组件的以下两个选项开启，避免问题的产生。
- domStorageAccess(true)开启文档对象模型存储接口（DOM Storage API）权限
- javaScriptAccess(true)允许执行JavaScript脚本
具体代码如下：
// xxx.etsimport web_webview from'@ohos.web.webview';
classWebViewModel{constructor(){}
test(): string {return'ArkTS Hello World!';}}
@Entry
@Component
struct WebComponent {webviewController: web_webview.WebviewController =newweb_webview.WebviewController();// 声明需要注册的对象
@State vm: WebViewModel =newWebViewModel();
build(){Column(){// web组件加载本地index.html页面Web({src:$rawfile('index.html'),controller:this.webviewController}).domStorageAccess(true).javaScriptAccess(true)// 将对象注入到web端.javaScriptProxy({object:this.vm,name:"harmony",methodList:["test"],controller:this.webviewController
})}}}
其他选项可参考 鸿蒙Web官网
本文转载自: https://blog.csdn.net/twk857857/article/details/141180801
版权归原作者 自然 醒 所有， 如有侵权，请联系我们删除。
版权归原作者 自然 醒 所有， 如有侵权，请联系我们删除。