划重点！uniapp小程序如何与web-view承载的H5实现通讯

2023-06-04 08:56:20

划重点！详解 Uniapp 小程序与 H5 的通讯机制

一、小程序向 H5 传递参数

Uniapp 小程序可以通过在 URL 后接参数的方式向 H5 页面传递数据。例如：

uni.navigateTo({
  url: 'https://xxxxx.com?params=aaa'
})

H5 页面加载后，可以通过 window.location.href 获取到传递的参数。

二、H5 向小程序发送消息

1. 在 Uniapp 项目中创建模板 HTML 文件

创建一个名为 template 的文件夹。
在 template 文件夹下新建一个名为 index.html 的文件。

2. 在 index.html 中监听小程序消息

<script>
  // 监听小程序发来的消息
  window.addEventListener('message', function (event) {
    // 从事件参数中获取小程序发来的消息
    const message = event.data
    // 处理小程序发来的消息
    console.log(message)
  })

  // 向小程序发送消息
  function sendMessageToApp(message) {
    // 将消息发送给小程序
    window.postMessage(message, '*')
  }
</script>

3. 在 Uniapp 项目的 app.vue 中发送消息

export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    sendMessageToH5() {
      // 向 H5 页面发送消息
      uni.postMessageToWebview({
        data: this.message,
        success: function (res) {
          console.log('消息发送成功')
        },
        fail: function (err) {
          console.log('消息发送失败')
        }
      })
    }
  }
}

4. 在 Uniapp 项目的 index.vue 中显示输入框

<template>
  <view>
    <input type="text" v-model="message" placeholder="请输入要发送的消息" />
    <button @click="sendMessageToH5">发送消息</button>
  </view>
</template>

<script>
import { uni } from '@dcloudio/uni-mp-weixin'

export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    sendMessageToH5() {
      // 向 H5 页面发送消息
      uni.postMessageToWebview({
        data: this.message,
        success: function (res) {
          console.log('消息发送成功')
        },
        fail: function (err) {
          console.log('消息发送失败')
        }
      })
    }
  }
}
</script>