项目背景：开发工具为HBuilderX，框架为uniapp，开发移动端的Web应用，在企业微信中使用（自建应用），Web开发的应用，不是小程序。

需求：页面中用到<web-view>组件，加载其他系统的页面（有跨域），需要在父子页面之间相互通信。这里通信的东西其实就是获取定位，通过uniapp获取用户定位信息，传递给<web-view>内的页面用于地图的展示和其他业务需求。获取定位也是遇到了一些问题，参考另一篇记录《uniapp企业微信应用中的定位问题》

<web-view :src="https://****"></web-view>

<web-view>内部其实就是iframe，因此本质上也就是要实现iframe的（跨域）父子通信。

原始方案：URL传递

在uniapp中获取定位数据，通过URL参数的方式传递给<web-view>的页面。

<web-view :src="https://****?&longitude=${longitude}&latitude=${latitude}"></web-view>

这个方法弊端很多，不得不抛弃。

• 性能影响&用户体验：很多时候<web-view>内的子页面是不需要该定位数据的，只要当有用到地图组件时，才需要获取定位。这种方式不管要不要，都处理（获取、发送），很影响性能，而且企业微信中获取定位会弹出定位授权提示。
• 重复加载页面，而且会导致<web-view>加载多次，因为获取定位是异步的，参数变化会影响url（src）的变更，触发页面重新加载。

---

web-view相互通信

优化目标是在需要加载地图组件时，向父页面（uniapp）发送请求指令，父页面（uniapp）获取定位信息后，发送给子页面，按需获取。

基本的技术思路就是利用window/uni的postMessage、onmessage来实现相互通信。但实际上由于uniapp面向各种不同的场景，如小程序、移动App、企业微信H5应用，实现方式略有不同，网上各种方案不一定行得通，因此记录一下解决过程。

子页面给父页面（uniapp）发送指令，请求获取定位信息，使用了uniapp提供的一个SDK来实现。

• window.uni.postMessage()方法发送指令信息。

• window.onmessage事件接收消息。

  mounted() {
  // 发送消息指令
  window.uni.postMessage({ data: { type: 'getLocation' } })
  // 等待接收消息
  window.onmessage = (e) => {
  if (e.data?.getLocation) {
  console.log('e.data?.getLocation', e.data.getLocation)
  this.point = e.data?.getLocation
  this.asyncInitMap()
  }
  }
  },

这里的uni是uniapp提供的一个SDK，在程序中引用JS文件。

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

• window.onmessage事件接收消息指令，判断是否约定的指令。

• 获取定位并发送，发送通过this.$refs.webview.iframe.contentWindow.postMessage(res, url)方法发送定位结果给子页面。

• 注意的是，第一个参数为要发送的数据，第二个参数为目标域名，否则会发送失败（不同域名）。

这一步借助了chartGPT（3.5版本）的帮助，当然也是经过多轮对话才找到一点可用的，直接问他uniapp中的webview通信方式，答案也不靠谱。

---

参考资料

• uniapp企业微信应用中的定位问题
• chartGPT

---

️版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址-语雀