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

基于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中进行引入

1. // main.js
2. 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发送消息

1. <!-- h5 -->
2. <template>
3.    <button @click="postMsg">向应用发送信息</button>
4. </template>
6. <script setup>
7.   // getEnv 获取当前环境
8.   uni.webView.getEnv((res) => {
9.     console.log('当前环境：' + JSON.stringify(res));
10.   })
11.   // postMessage 向应用发送消息
12.   const postMsg = () => {
13.     uni.webView.postMessage({
14.       data: {
15.         msg: '哈哈哈',
16.       },
17.     })
18.   }
19. </script>
21. <!-- h5通过postMessage像app发送信息，app如何接收？创建.nvue文件，并编写如下代码： -->
22. <!-- app -->
23. <template>
24.   <web-view ref="sWebViewRef" id="sWebView" :style="webviewStyles" :src="url" @onPostMessage="handleWebViewMessage" @message="handleWebViewMessage">
25.   </web-view>
26. </template>
27. <script setup>
28.   import { ref, onMounted } from 'vue'
29.   // nvue文件不能使用100vw,100vh
30.   const systemInfo = uni.getSystemInfoSync()
31.   const webviewStyles = ref({
32.     width: '',
33.     height: '',
34.   })
35.   webviewStyles.value.width = systemInfo.windowWidth + 'px'
36.   webviewStyles.value.height = systemInfo.windowHeight + 'px'
38.   const sWebViewRef = ref()
39.   // h5地址，这里临时写死实际项目自行根据环境判断
40.   const url = ref('http://192.168.110.128:7189/')
42.   // 接收内容：
43.   const handleWebViewMessage = (event) => {
44.     console.log('handleWebViewMessage', event)
45.     const [noWEBData] = event.detail.data
46.     console.log('noWEBData', noWEBData)
47.   }
48. </script>

复制代码

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

1. <!-- app -->
2. <template>
3.   <web-view ref="sWebViewRef" id="sWebView" :style="webviewStyles" :src="url" @onPostMessage="handleWebViewMessage" @message="handleWebViewMessage">
4.   </web-view>
5. </template>
6. <script setup>
7.   import { ref, onMounted } from 'vue'
9.   const sWebViewRef = ref()
10.   // h5地址，这里临时写死实际项目自行根据环境判断
11.   const url = ref('http://192.168.110.128:7189/')
13.   // 接收内容：
14.   const handleWebViewMessage = (event) => {
15.     console.log('handleWebViewMessage', event)
16.     const [noWEBData] = event.detail.data
17.     console.log('noWEBData', noWEBData)
18.   }
20.   const test = ref('嘻嘻嘻')
21.   onMounted(() => {
22.     setInterval(() => {
23.       sWebViewRef.value.evalJs(`x_sun('${test.value}')`)
24.     }, 2000)
25.   })
26. </script>
28. <!-- h5 -->
29. <template>
30.    <button @click="postMsg">向应用发送信息</button>
31. </template>
33. <script setup>
34.   // getEnv 获取当前环境
35.   uni.webView.getEnv((res) => {
36.     console.log('当前环境：' + JSON.stringify(res));
37.   })
38.   // postMessage 向应用发送消息
39.   const postMsg = () => {
40.     uni.webView.postMessage({
41.       data: {
42.         msg: '哈哈哈',
43.       },
44.     })
45.   }
46.   window.x_sun = (e) => {
47.     console.log('x_sun', e)
48.   }
49. </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发送消息

1. <!-- 子级h5 -->
2. <template>
3.    <button @click="postMsg">向父级发送信息</button>
4. </template>
6. <script setup>
7.   // getEnv 获取当前环境
8.   uni.getEnv((res) => {
9.     console.log('当前环境：' + JSON.stringify(res));
10.   })
11.   // postMessage 向父级发送消息
12.   const postMsg = () => {
13.     uni.postMessage({
14.       data: {
15.         msg: '哈哈哈',
16.       },
17.     })
18.   }
19. </script>
21. <!-- 子级通过postMessage向父级发送信息，父级如何接收？ -->
22. <!-- 父级h5 -->
23. <template>
24.   <web-view ref="sWebViewRef" id="sWebView" :style="webviewStyles" :src="url" @onPostMessage="handleWebViewMessage" @message="handleWebViewMessage">
25.   </web-view>
26. </template>
27. <script setup>
28.   import { ref, onMounted } from 'vue'
29.   // nvue文件不能使用100vw,100vh
30.   const systemInfo = uni.getSystemInfoSync()
31.   const webviewStyles = ref({
32.     width: '',
33.     height: '',
34.   })
35.   webviewStyles.value.width = systemInfo.windowWidth + 'px'
36.   webviewStyles.value.height = systemInfo.windowHeight + 'px'
38.   const sWebViewRef = ref()
39.   // h5地址，这里临时写死实际项目自行根据环境判断
40.   const url = ref('http://192.168.110.128:7189/')
42.   // 接收内容：
43.   const handleWebViewMessage = (event) => {
44.     console.log('handleWebViewMessage', event)
45.     const { data: webData } = event.data
46.     console.log('webData', webData)
47.   }
48.   // h5通过对message添加侦听事件，监听嵌套h5中发送的内容
49.   window.addEventListener('message', handleWebViewMessage)
50. </script>

复制代码

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

1. <!-- 父级h5 -->
2. <template>
3.   <web-view ref="sWebViewRef" id="sWebView" :style="webviewStyles" :src="url" @onPostMessage="handleWebViewMessage" @message="handleWebViewMessage">
4.   </web-view>
5. </template>
6. <script setup>
7.   import { ref, onMounted } from 'vue'
9.   const sWebViewRef = ref()
10.   // h5地址，这里临时写死实际项目自行根据环境判断
11.   const url = ref('http://192.168.110.128:7189/')
13.   // 接收内容：
14.   const handleWebViewMessage = (event) => {
15.     console.log('handleWebViewMessage', event)
16.     const [noWEBData] = event.detail.data
17.     console.log('noWEBData', noWEBData)
18.   }
20.   const test = ref('嘻嘻嘻')
21.   const sWebViewEl  = ref()
22.   onMounted(() => {
23.     sWebViewEl.value = document.getElementById('sWebView').contentWindow
24.     setInterval(() => {
25.       sWebViewEl.contentWindow.postMessage({ fn: 'x_sun', arg: test.value }, '*')
26.       // 也可手动指定我要向这个子级发送信息
27.       // sWebViewEl.contentWindow.postMessage({ fn: 'x_sun', arg: test.value }, 'http://192.168.110.128:7189')
28.     }, 2000)
29.   })
30. </script>
32. <!-- 子级h5 -->
33. <template>
34.    <button @click="postMsg">向应用发送信息</button>
35. </template>
37. <script setup>
38.   // getEnv 获取当前环境
39.   uni.webView.getEnv((res) => {
40.     console.log('当前环境：' + JSON.stringify(res));
41.   })
42.   // postMessage 向应用发送消息
43.   const postMsg = () => {
44.     uni.webView.postMessage({
45.       data: {
46.         msg: '哈哈哈',
47.       },
48.     })
49.   }
51.   window.x_sun = (e) => {
52.     console.log('x_sun', e)
53.   }
55.   const handleWebViewMessage = (event) => {
56.    event.data.fn && window[event.data.fn](event.data.arg)
57.   }
58.   window.addEventListener('message', handleWebViewMessage)
59. </script>

复制代码

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

1. <script setup>
2.   import { ref, onMounted } from 'vue'
3.   import { useWebView } from './hooks/useWebView'
4.   import { useNoWebView } from './hooks/useNoWebView'
5.   const { webMessageMap } = useWebView()
6.   const { noWebMessageMap } = useNoWebView()
7.   const sWebViewRef = ref()
8.   const url = ref('http://192.168.110.128:7189/')
10.   const systemInfo = uni.getSystemInfoSync()
11.   const webviewStyles = ref({
12.     width: '',
13.     height: '',
14.   })
15.   webviewStyles.value.width = systemInfo.windowWidth + 'px'
16.   webviewStyles.value.height = systemInfo.windowHeight + 'px'
18.   const handleWebViewMessage = (event) => {
19.     // #ifdef WEB
20.     const { data: webData } = event.data
21.     webData?.name && (webMessageMap[webData.name] ? webMessageMap[webData.name](webData.arg) : webMessageMap.default(webData.arg))
22.     // #endif
23.     // #ifndef WEB
24.     const [noWEBData] = event.detail.data
25.     console.log('noWEBData', noWEBData)
26.     noWebMessageMap[event.type] ? noWebMessageMap[event.type](noWEBData) : noWebMessageMap.default(noWEBData)
27.     // #endif
28.   }
30.   const test = ref('嘻嘻嘻')
31.   const sWebViewEl = ref()
32.   // #ifdef WEB
33.   onMounted(() => {
34.     sWebViewEl.value = document.getElementById('sWebView').contentWindow
35.     setInterval(() => {
36.       sWebViewEl.value.postMessage({ fn: 'x_sun', arg: test.value }, '*')
37.       // sWebViewEl.contentWindow.postMessage({ name: 'x_sun', arg: test.value }, 'http://192.168.110.128:7189')
38.     }, 2000)
39.   })
40.   // #endif
42.   // #ifndef WEB
43.   onMounted(() => {
44.     setInterval(() => {
45.       sWebViewRef.value.evalJs(`x_sun('${test.value}')`)
46.     }, 2000)
47.   })
48.   // #endif
50.   // #ifdef WEB
51.   window.addEventListener('message', handleWebViewMessage)
52.   // #endif
53. </script>
55. <template>
56.   <view>
57.     <web-view ref="sWebViewRef" id="sWebView" :style="webviewStyles" :src="url" @onPostMessage="handleWebViewMessage" @message="handleWebViewMessage">
58.     </web-view>
59.   </view>
60. </template>
62. <style></style>

复制代码

参考文献：
web-view | uni-app官网
在web-view加载的当地及长途HTML中调用uni的API及网页和vue页面通讯

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。