ArkWeb（方舟Web）webview

坐等富婆上钩

已于 2024-07-17 08:56:37 修改

阅读量675

点赞数 9

分类专栏： ArkTS 文章标签： harmonyos

于 2024-07-16 21:38:56 首次发布

本文链接：https://blog.csdn.net/juvenile_Li/article/details/140476254

版权

ArkTS 专栏收录该内容

3 篇文章

订阅专栏

鸿蒙与H5页面通信

现在通信技术层出不穷，像window原生的iframe，微前端框架micro-app、小程序的web-view等等

鸿蒙也有自己的页面通信方式《webview》

简介：

HarmonyOS中的Web组件是一种基于Web技术的组件，可以在HarmonyOS应用程序中嵌入Web内容。通过使用Web组件，开发人员可以将Web页面或应用程序嵌入到HarmonyOS应用程序中，实现更丰富的用户界面和功能。

Web组件提供了一系列的API和工具，开发人员可以使用这些API和工具来控制和操作内嵌的Web页面。例如，开发人员可以使用JavaScript和CSS来操作和样式化Web页面的元素，还可以使用HTML5的各种功能来实现各种交互和媒体功能

定义鸿蒙对H5的页面展示

首先引入webview 注： @kit.Arkweb是内置的

import { webview } from '@kit.ArkWeb'

// 1. 在ets文件的逻辑层创建webviewController

private webviewController: webview.WebviewController = new webview.WebviewController()

在Builer层使用Web()组件

参数: src: 要通信连接的地址，可连接本地和网络

参数: controller： web的控制器，控制后期对H5的操作

Web({
  src: $rawfile('hm调用h5方法.html'),
  controller: this.webviewController
})

H5数据与鸿蒙数据通信的方式方法

webview有两个操作方法是关于H5页面和鸿蒙页面通信的

runJavaScript和javaScriptProxy

1. runJavaScript

runJavaScript是鸿蒙ets文件调用H5页面方法所使用的

ets文件

import { webview } from '@kit.ArkWeb'


@Entry
@Component
struct Index {
  // 1. 在逻辑层创建webviewController
  private webviewController: webview.WebviewController = new webview.WebviewController()
  build() {
    Column(){
      Button('点击调用h5函数').onClick(() => {
        this.webviewController.runJavaScript('htmlTest()'); 
      })
      Web({
        src: $rawfile('hm调用h5方法.html'),
        controller: this.webviewController
      })
    }
  }
}

html文件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<h1>222222</h1>
<h1>222222</h1>
<h2></h2>
<button>点击获取鸿蒙数据</button>
// vConsole链接
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
    // VConsole 默认会挂载到 `window.VConsole` 上
     var vConsole = new window.VConsole();
     setTimeout(() => {
     // 设置开关按钮的位置。
        vConsole.setSwitchPosition(0, 700);
     }, 300);
    // message监听类型
    function htmlTest(param) {
        console.log(param, '22');
    }
</script>
</body>
</html>

javaScriptProxy

ets文件

import { webview } from '@kit.ArkWeb'

class test1{
  constructor() {
  }

  testFn(data:string) {
    console.log(data)
    return '6test6666'
  }
}

@Entry
@Component
struct Index {
  // 1. 在逻辑层创建webviewController
  private webviewController: webview.WebviewController = new webview.WebviewController()
  // 3. 创建要传的对象
   private testObj: test1 = new test1()
  build() {
    Column(){
      // 2.在builder层调用Web
      // 2.1 先引入html显示
      Web({
        src: $rawfile('pdf.js/index.html'),
        controller: this.webviewController
      }) // 通过javaScriptProxy定义参数传到h5
        .javaScriptProxy({
          object: this.testObj, // h5要接收的对象
          methodList: ['testFn'], // h5可以调用的函数名
          name: 'domObj', // 给h5定义一个可以调用鸿蒙方法的对象名
          controller: this.webviewController // 控制器
        })

    }
  }
}

html文件

<h1>222222</h1>
<h1>222222</h1>
<h2></h2>
<button>点击获取鸿蒙数据改变h2内容</button>
<script>

    document.querySelector('button').onclick = function buttonClick() {
       document.querySelector('h2').innerHTML = domObj.testFn()

       }

</script>

对讲机式双向监听

ets文件

import { webview } from '@kit.ArkWeb'

@Entry
@Component
struct Index {
  // 1. 在逻辑层创建webviewController
  private webviewController: webview.WebviewController = new webview.WebviewController()
  // 3. 给对讲机设定类型
  private ports: webview.WebMessagePort[] = []
  build() {
    Column(){
      Button('点击给h5传数据').onClick(() => {
        this.ports[0].postMessageEvent(JSON.stringify({ aa: 123 }))
      })
      // 2.在builder层调用Web
      Web({
        src: $rawfile('双向监听.html'),
        controller: this.webviewController
      })
        .onPageEnd(() => {
          // 4.创建对讲机
          this.ports = this.webviewController.createWebMessagePorts()

          // 5. 创建h5监控鸿蒙监听器
          this.webviewController.postMessage('port', [this.ports[1]], '*')

          // 6. 监控h5的数据推送
          this.ports[0].onMessageEvent((data: webview.WebMessage) => {
            console.log('zh', data)
          })
          // 按顺序来讲，得先让h5监控了hm才能让鸿蒙监听h5
        })
    }
  }
}

html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<h1>222222</h1>
<h1>222222</h1>
<h2></h2>
<button>点击向鸿蒙传数据</button>
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
    // VConsole 默认会挂载到 `window.VConsole` 上
  var vConsole = new window.VConsole();
   setTimeout(() => {
    // 设置开关按钮的位置。
    vConsole.setSwitchPosition(0, 700);
  }, 300);

    window.addEventListener('message', function(event){
        // 1. 存对讲机
        switch (event.data) {
            // port是在hm定义的对讲机名称
            case 'port':
                const port  = event.ports[0]
                port.onmessage = (event) => {
                    const result = event.data;
                    console.log('zh', result);
                }
                document.querySelector('button').onclick = function(){
                    port.postMessage('11122222')
                }
                break;

            default:
                break;
        }
    } )

</script>
</body>
</html>