鸿蒙与web混合开发双向通信

屿筱2025-07-23 13:42

鸿蒙与web混合开发双向通信用runJavaScript和registerJavaScriptProxy

web

entry/src/main/resources/rawfile/1.html

bash 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>混合开发</title>
</head>
<body>
    <div></div>
    <img src="./a.png" alt="">
    <button onclick="selectImg()">打开相册</button>
</body>
</html>
<script>
    //直接写js代码
    function changeImg(){
        //1.获取img这个元素
        const img = document.querySelector('img')
        //2.修改元素的属性
        img.src = './b.png'
    }
    async function selectImg(){
      //通知鸿蒙，让鸿蒙设备打开相册
       const res = await harmonyDevice.selectImage()
       const div = document.querySelector('div')
       div.innerText = JSON.stringify(res)
    }

</script>

鸿蒙

bash 复制代码

import { webview } from '@kit.ArkWeb'
import { photoAccessHelper } from '@kit.MediaLibraryKit'
import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct Page {
  webController:WebviewController = new webview.WebviewController()
  selectImg(){
    const picker = new photoAccessHelper.PhotoViewPicker()
    return picker.select()
  }
  build() {
    Column(){
      // 1.想让网页干嘛，直接调网页的JS方法
      Button('鸿蒙-改变网页图片')
        .onClick(()=>{
            // 控制器
            this.webController.runJavaScript('changeImg()')
        })
      // 2.网页控制鸿蒙测
      Button('注入鸿蒙的事件')
        .onClick(()=>{
          promptAction.showToast({
            message:'注入成功'
          })
          // 1.先给网页一个对象，这个对象上包含了所有网页要用到的方法集合
          // 2.给这个对象起一个名字，让网页可以使用这个对象
          // 3.确定网页可以使用的方法集合
          this.webController.registerJavaScriptProxy(
            {
              selectImage:async()=>{
                const res = await this.selectImg()
                return res
              }
            },
            "harmonyDevice",
            ["selectImage"]
          )
        })
      // 1.加载的地址
      // 2.控制
      Button('刷新页面')
        .onClick(()=>{
           this.webController.refresh()
        })
      Web({
        // 本地：
        src:$rawfile('1.html'),
        // src:'https://www.amap.com/',
        controller:this.webController
      })
    }
    .width('100%')
    .height('100%')
  }
}