ArkTs通过Web组件和H5交互

arkts代码

// xxx.ets
import web_webview from '@ohos.web.webview';
import { router } from '@kit.ArkUI';
import { call } from '@kit.TelephonyKit';
import { BusinessError } from '@kit.BasicServicesKit';

class testClass {
  constructor() {
  }

  test(): string {
    return 'ArkTS Hello World!';
  }
}

@Entry
@Component
struct Index2 {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  // 声明需要注册的对象
  @State testObj: testClass = new testClass();

  build() {
    Column() {
      // web组件加载本地index.html页面
      Web({ src: 'http://172.19.176.1:3000/', controller: this.webviewController })// 将对象注入到web端
        .javaScriptProxy({
          object: {
            callBack: (r: object) => {
              // let isSupport = call.hasVoiceCapability();
              if (true) {
                // 如果设备支持呼叫能力，则继续跳转到拨号界面，并显示拨号的号码
                call.makeCall("4008877780", (err: BusinessError) => {
                  if (!err) {
                    console.log("make call success.");
                  } else {
                    console.log("make call fail, err is:" + JSON.stringify(err));
                  }
                });
              } else {
                // promptAction.showToast({ message: "无语音通话功能" })
              }
            }
          },
          name: "callBackToApp",
          methodList: ['callBack'],
          controller: this.webviewController
        })
        .onControllerAttached(() => {
          //设置自定义UserAgent
          if (true) {
            this.webviewController.setCustomUserAgent("Mozilla/5.0 (Phone; Android; OpenHarmony 4.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile")
          }
        })
        .domStorageAccess(true)//开启文档对象模型存储接口
      /*
        .databaseAccess(true)// 是否开启数据库存储API权限
        .mixedMode(MixedMode.All)// 允许加载HTTP和HTTPS混合内容
        .onRefreshAccessedHistory(() => {
          let history = this.webviewController.getBackForwardEntries()
          //this.historyCurrIndex = history.currentIndex
        })*/

    }
  }
}

h5代码

<template>
  <div class="mb-4">
    <button @click="greet">点击事件</button>
  </div>

</template>

<script>

import {onBeforeMount} from "vue";
/*const onRowClick = (record: object, event:any)=>{
  console.log(record,'record',event)
  window.callBackToApp.callBack(record)
}*/
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup() {
    onBeforeMount(()=>{
      console.log(window)
      console.log("1242131231554")
      /*// 获取表头
      if(typeof window?.callBackToApp?.getCloumn === "function"){
        JSON.parse(window.callBackToApp?.getCloumn()) || []
      }
      console.log(11111)*/
    })
  },
  methods:{
    greet(){
      console.log("方法执行")
      window.callBackToApp.callBack()
    }
  }
}




</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>