# 音乐

**Repository Path**: itmds/it1

## Basic Information

- **Project Name**: 音乐
- **Description**: 项目实战音乐dqwqwfrq+
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-08-05
- **Last Updated**: 2025-07-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

鸿蒙混合开发的通信方式：鸿蒙原生端和网页的数据交互过程
1.通过端口通信模型
第一步，先创建通信端口
controller: webview.WebviewController = new webview.WebviewController()
currentPorts: webview.WebMessagePort[] = []

createPorts() {
this.currentPorts = this.controller.createWebMessagePorts() //创建通信的端口
if (this.currentPorts?.length > 0) {
//选择第二个端口传值给网页端   鸿蒙给网页传数据的端口
this.controller.postMessage("trans_port", [this.currentPorts[1]], "*")
}
}

第二步，网页中获取鸿蒙端传递的数据
<script>
var currentPort
window.addEventListener("message",(event)=>{
if(event.data === "trans_port"){
currentPort = event.ports[0] //获取通信端口
if(currentPort){
alert("获取成功！")
}
}
})
</script>
注意：在鸿蒙中默认不会执行显示网页中alert提示框，在web组件中添加onAlert监听
.onAlert((event) => {
promptAction.showToast({ message: event?.message })
return true
})

第三步：网页中发送数据给鸿蒙端，在网页中定义一个数据的发送方法
<button onclick="sendMessage()">发送一个消息给鸿蒙端</button>

function sendMessage(){
//发送数据给鸿蒙端
if(currentPort){

currentPort.postMessage(JSON.stringify({type:"alert", message: "这是我网页上的一个小秘密！"}))
}else{
alert("消息不通")
}
}
第四部：鸿蒙端接受网页数据
createPorts() {
this.currentPorts = this.controller.createWebMessagePorts() //创建通信的端口
if (this.currentPorts?.length > 0) {
//选择第二个端口传值给网页端
this.controller.postMessage("trans_port", [this.currentPorts[1]], "*")

      //选择一个端口作为接收网页端回传数据
      this.currentPorts[0].onMessageEvent((result: webview.WebMessage) => {
        if (typeof result === "string") {
          promptAction.showToast({ message: result })
        }
      })
    }
}

2.通过sdk方法传值方式：在鸿蒙端可以将需要的方法提前定义好提供给网页调用，通过这个方法实现数据的互通
第一步：定义需要使用的方法
class WebSdk {
controller: webview.WebviewController = new webview.WebviewController()
//在鸿蒙端定义方法，可以在网页端进行调用
openPhoto() {
promptAction.showToast({ message: "打开相册" })
}

      getMessage(){
        promptAction.showToast({ message: "获取消息" })
      }
    }

第二步：在创建web对象时，需要通过javaScriptProxy将方法注入给网页的js中
Web({ src: $rawfile("sdk.html"), controller: this.sdk.controller })
.width('100%')
.layoutWeight(1)
.javaScriptProxy({
name: "itluma", //自定义的名称
object: this.sdk, //对象名
methodList: ["openPhoto","getMessage"], //方法名
controller: this.sdk.controller  //web组件的控制器对象
})

第三步：在网页使用注入的方法
function openPhoto(){
//调用鸿蒙端提供的方法
if(window.itluma){
window.itluma.openPhoto()
}
}

第四步：也可以在鸿蒙端使用网页中的方法
this.sdk.controller.runJavaScript(`网页中定义的js方法`)