鸿蒙webview与H5的交互

关于鸿蒙框架中使用webview跳转外部H5项目后在H5项目中返回鸿蒙框架的问题

在鸿蒙框架中webview页面引入 

import web_webview from '@ohos.web.webview';
import router from '@ohos.router';

定义变量

controller: web_webview.WebviewController = new web_webview.WebviewController(); 
ports : web_webview.WebMessagePort[]=[];

build里面写入web组件 src为你自己的路径链接可自己写入

Web({
        controller: this.controller,
        src: `${this.homeUrl}?token=${this.token}&organType=${this.organType}&data=${this.state}&billId=${this.billId}`
      })
        .onPageEnd(()=>{
          this.isShow=false
            try {
              // 1、
              this.ports = this.controller.createWebMessagePorts();
              // 2、在应用侧的消息端口(如端口1)上注册回调事件。
              this.ports[1].onMessageEvent((result: web_webview.WebMessage) => {
                if (result === 'goback') {
                  router.back();
                }
                // if (result === 'goback') {
                //   router.replaceUrl({
                //     url: 'pages/login' // 目标url
                //   });
                // }
              })
              this.controller.postMessage('harmonyOS', [this.ports[0]], '*');
            } catch (error) {
              console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
            }

        })
        .mixedMode(MixedMode.All)
        .domStorageAccess(true)
        .onlineImageAccess(true)
        .imageAccess(true)
        .zoomAccess(false)
        .databaseAccess(true)
        .geolocationAccess(true)
        .fileAccess(true)
        .javaScriptAccess(true)
        .margin({ top: 20 })

在 onPageEnd 中使用应用侧建立与H5项目的链接，this.isShow是我自己定义的跳转动画显示隐藏 可不用    在if判断条件中写入自己需要的逻辑即可

在H5项目中

先中定义一个变量  在生命周期中写入以下代码

harmony:null

mounted(){
  let _this=this
window.addEventListener('message",function(event){
if (event.data =='harmonyos') {
 if (event.ports[0] !==null) {
    _this.harmony=event.ports[0]
  }
 }

})

之后在你需要的点击事件中写入以下判断 传入鸿蒙框架中的判断字段 " goback " ,可自己在项目中定义

if (this.harmony){
  this.harmony.postMessage( 'goback')
}

到此皆可以点击后返回鸿蒙框架了