uniapp，app/H5中，webview与嵌套的html相互通信

    <web-view
      id="xxxView"
      ref="xxxViewRef"
      :src="`/hybrid/html/http.html?${paramsInfo}`" />

这样一段代码，webview嵌了一个本地html
希望它们相互通信传递消息

如果是在APP中，很简单

webview→html

      // const webview = this.$scope.$getAppWebview().children()[0]
      // webview.evalJS(`updateCanvasSize(${x}, ${y}`)

html→webview
html中引入（在官网下载）

 <script type="text/javascript" src="./webview.js"></script>

html中

			uni.postMessage({
				data: {
					action: 'xxxError',
					data: true
					}
				})

webview接收

    <web-view
      id="xxxView"
      ref="xxxViewRef"
      :src="`/hybrid/html/http.html?${paramsInfo}`" 
      @message="webViewMessage" />


    webViewMessage(e) {
		  console.log('收获数据----《', e.detail.data[0])
    },

H5中

H5中，上面这套不支持，得用postMessage

举例：
webview→html
webview中：

        const iframe = this.$refs.xxxViewRef.iframe.contentWindow
        iframe.postMessage('image port', '*', [event.ports[0]])

	  const iframe = this.$refs.xxxViewRef.iframe.contentWindow
      iframe.postMessage({
        type: 'channelEvent',
        value: {
          ch_type: ch_type,
          ch_id: ch_id,
          event: event
        }
      }, '*')

html中监听，处理：

        window.addEventListener('message', function (event) {
          console.log('监听event--------->', event.data, event.data.type)
          if (event.data === 'image port') {
            event.ports[0].onmessage = xxxImageMessage
            xxxInterface.onPortReady()
          }
          if (event.data && event.data.type == 'channelEvent') {
            channelEvent(
              event.data.value.ch_type,
              event.data.value.ch_id,
              event.data.value.event
            )
          }
          if (event.data && event.data.type == 'updateCanvasSize') {
            updateCanvasSize(event.data.value.x, event.data.value.y)
          }
        })

html → webview
html中：

				window.parent.postMessage({
						type: 'channelEvent',
						event: event
					}, '*')

webview中：

    this.messageListener = (event) => {
      // 收获的连接信息 针对返回的数据做处理
      if (event.data?.type == 'channelEvent') {
        const info = event.data.event
        console.log('接收到html event---->', info)
        this.xxxHandle(info)
      }
    }
    window.addEventListener('message', this.messageListener)