0
0

uniapp实现与webview之间的相互通讯

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

写在最前面：

  1. uniapp开发的app嵌套h5时必须是.nvue文件否则没有这个sWebViewRef.value.evalJs函数
  2. 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中进行引入

// main.js
import './uni_web_view_1.5.6.js'

引入完成后我们在h5项目中任意文件下打印uni会发现在uni上多了一个webView，打印uni.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>

上面我们实现了在h5中向app中发送信息，那app如何向h5中发送信息呢？

<!-- 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'

  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)
  }

  const test = ref('嘻嘻嘻')
  onMounted(() => {
    setInterval(() => {
      sWebViewRef.value.evalJs(`x_sun('${test.value}')`)
    }, 2000)
  })
</script>

<!-- 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: '哈哈哈',
      },
    })
  }
  window.x_sun = (e) => {
    console.log('x_sun', e)
  }
</script>

情况二：app嵌套h5（h5用vue或react开发）

上述情况一中讲到了要引用uni.webview，在这里我默认你已经看了如何在嵌套h5中引入uni.webview.js

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

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

上述方法在情况一中已有案例便不再复述

情况三：h5嵌套h5（均用uniapp开发）

为了方便理解我将外层h5称之为父级，嵌套的内层h5称之为子级

上述情况一中讲到了要引用uni.webview，在这里我默认你已经看了如何在嵌套h5中引入uni.webview.js

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

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

子级h5向父级h5发送消息

<!-- 子级h5 -->
<template>
   <button @click="postMsg">向父级发送信息</button>
</template>

<script setup>
  // getEnv 获取当前环境
  uni.getEnv((res) => {
    console.log('当前环境：' + JSON.stringify(res));
  })
  // postMessage 向父级发送消息
  const postMsg = () => {
    uni.postMessage({
      data: {
        msg: '哈哈哈',
      },
    })
  }
</script>

<!-- 子级通过postMessage向父级发送信息，父级如何接收？ -->
<!-- 父级h5 -->
<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 { data: webData } = event.data
    console.log('webData', webData)
  }
  // h5通过对message添加侦听事件，监听嵌套h5中发送的内容
  window.addEventListener('message', handleWebViewMessage)
</script>

上面我们实现了在子级h5中向父级h5中发送信息，那父级h5如何向子级h5中发送信息呢？

<!-- 父级h5 -->
<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'

  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)
  }

  const test = ref('嘻嘻嘻')
  const sWebViewEl  = ref()
  onMounted(() => {
    sWebViewEl.value = document.getElementById('sWebView').contentWindow
    setInterval(() => {
      sWebViewEl.contentWindow.postMessage({ fn: 'x_sun', arg: test.value }, '*')
      // 也可手动指定我要向这个子级发送信息
      // sWebViewEl.contentWindow.postMessage({ fn: 'x_sun', arg: test.value }, 'http://192.168.110.128:7189')
    }, 2000)
  })
</script>

<!-- 子级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: '哈哈哈',
      },
    })
  }

  window.x_sun = (e) => {
    console.log('x_sun', e)
  }

  const handleWebViewMessage = (event) => {
   event.data.fn && window[event.data.fn](event.data.arg)
  }
  window.addEventListener('message', handleWebViewMessage)
</script>

如若需要既需要兼容app嵌套h5又需要兼容h5嵌套h5可以在父级的app或h5页面中通过uniapp中的条件编译进行判断，参考代码：

<script setup>
  import { ref, onMounted } from 'vue'
  import { useWebView } from './hooks/useWebView'
  import { useNoWebView } from './hooks/useNoWebView'
  const { webMessageMap } = useWebView()
  const { noWebMessageMap } = useNoWebView()
  const sWebViewRef = ref()
  const url = ref('http://192.168.110.128:7189/')

  const systemInfo = uni.getSystemInfoSync()
  const webviewStyles = ref({
    width: '',
    height: '',
  })
  webviewStyles.value.width = systemInfo.windowWidth + 'px'
  webviewStyles.value.height = systemInfo.windowHeight + 'px'

  const handleWebViewMessage = (event) => {
    // #ifdef WEB
    const { data: webData } = event.data
    webData?.name && (webMessageMap[webData.name] ? webMessageMap[webData.name](webData.arg) : webMessageMap.default(webData.arg))
    // #endif
    // #ifndef WEB
    const [noWEBData] = event.detail.data
    console.log('noWEBData', noWEBData)
    noWebMessageMap[event.type] ? noWebMessageMap[event.type](noWEBData) : noWebMessageMap.default(noWEBData)
    // #endif
  }

  const test = ref('嘻嘻嘻')
  const sWebViewEl = ref()
  // #ifdef WEB
  onMounted(() => {
    sWebViewEl.value = document.getElementById('sWebView').contentWindow
    setInterval(() => {
      sWebViewEl.value.postMessage({ fn: 'x_sun', arg: test.value }, '*')
      // sWebViewEl.contentWindow.postMessage({ name: 'x_sun', arg: test.value }, 'http://192.168.110.128:7189')
    }, 2000)
  })
  // #endif

  // #ifndef WEB
  onMounted(() => {
    setInterval(() => {
      sWebViewRef.value.evalJs(`x_sun('${test.value}')`)
    }, 2000)
  })
  // #endif

  // #ifdef WEB
  window.addEventListener('message', handleWebViewMessage)
  // #endif
</script>

<template>
  <view>
    <web-view ref="sWebViewRef" id="sWebView" :style="webviewStyles" :src="url" @onPostMessage="handleWebViewMessage" @message="handleWebViewMessage">
    </web-view>
  </view>
</template>

<style></style>

参考文献：

web-view | uni-app官网

在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面通讯

标签： uni-app
本文转载自: https://blog.csdn.net/Story_0809/article/details/142655316
版权归原作者 Write λ Code 所有， 如有侵权，请联系我们删除。
登录后发布评论

“uniapp实现与webview之间的相互通讯”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

如何给SaaS应用做安全

【软件测试】自动化常用函数

postman变量和脚本功能介绍

Python Selenium常见的报错以及措施

idea导出配置文件

如何在visual studio中 生成 并 使用dll和lib文件

Docker homeassistant 反向代理 外网访问

文章导航