基于uniapp开发在一些特殊场景，可能会用到app嵌套h5或h5嵌套h5的场景，uniapp中有一个web-view组件类似于iframe我们可以基于web-view实现双向通信，以下是对不同情况下的使用总结：

写在最前面：

uniapp开发的app嵌套h5时必须是.nvue文件否则没有这个sWebViewRef.value.evalJs函数
uni.webview.js只需要在嵌套的h5中引入
情况一：app嵌套h5（app、h5均用uniapp开发）

在正式使用前要先在嵌套的h5中中引入uni.webview.1.5.6.js以1.5.6举例，文件可能已更新，最新请移步uni.webview.js 最新版地址下载

下载完成后，我们只需要在h5项目main.js中进行引入

引入完成后我们在h5项目中任意文件下打印uni会发现在uni上多了一个webView，打印t'tuni.webView会发现他是一个对象，并有如下方法：

navigateBack、navigateTo、reLaunch、redirectTo、switchTab、getEnv、postMessage

上述方法相信作为uni开发者大家并不陌生，这里只着重讲解：getEnv、postMessage

h5向app发送消息

<!-- h5 -->
<template>
   <button @click="postMsg">向应用发送信息</button>
</template>
 
<script setup>
  // getEnv 获取当前环境
  uni.webView.getEnv((res) => {
    console.log('当前环境：' + JSON.stringify(res));
  })
  // postMessage 向应用发送消息
  const postMsg = () => {
    uni.webView.postMessage({
      data: {
        msg: '哈哈哈',
      },
    })
  }
</script>
 
<!-- h5通过postMessage像app发送信息，app如何接收？创建.nvue文件，并编写如下代码： -->
<!-- app -->
<template>
  <web-view ref="sWebViewRef" id="sWebView" :style="webviewStyles" :src="url" @onPostMessage="handleWebViewMessage" @message="handleWebViewMessage">
  </web-view>
</template>
<script setup>
  import { ref, onMounted } from 'vue'
  // nvue文件不能使用100vw,100vh
  const systemInfo = uni.getSystemInfoSync()
  const webviewStyles = ref({
    width: '',
    height: '',
  })
  webviewStyles.value.width = systemInfo.windowWidth + 'px'
  webviewStyles.value.height = systemInfo.windowHeight + 'px'
 
  const sWebViewRef = ref()
  // h5地址，这里临时写死实际项目自行根据环境判断
  const url = ref('http://192.168.110.128:7189/')
 
  // 接收内容：
  const handleWebViewMessage = (event) => {
    console.log('handleWebViewMessage', event)
    const [noWEBData] = event.detail.data
    console.log('noWEBData', noWEBData)
  }
</script>