H5网页与uniapp组件实现双向通信

2022-11-04 07:40:56

在Uni-App中轻松实现H5网页与应用双向通信

简介

Uni-App是一个强大的跨平台开发框架，它允许开发者使用单一代码库构建适用于iOS、Android和H5的应用。在许多情况下，需要在Uni-App应用中集成现有的H5网页，并实现它们与Uni-App组件之间的双向通信。本文将深入探讨如何使用Uni-App的WebView组件实现这一通信，并提供清晰易懂的示例代码。

准备工作

在开始之前，确保以下准备工作已就绪：

已安装最新的Uni-App CLI工具和HBuilderX开发工具。
准备一个需要集成的H5网页，并将其放在项目的指定目录中。

创建Uni-App项目

创建新的Uni-App项目并安装必要的依赖项，可以使用以下命令：

uni-app init my-project

添加WebView组件

在Uni-App项目的根目录下，创建pages.json文件并添加以下内容：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "H5交互"
      }
    }
  ]
}

在pages/index目录下创建index.vue文件，并添加以下代码：

<template>
  <view>
    <web-view src="https://example.com"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webviewHeight: 0
    }
  },
  mounted() {
    this.$refs.webview.webviewHeight = window.innerHeight
  }
}
</script>

实现双向通信

1. H5网页端

在H5网页中添加以下JavaScript代码以发送消息到Uni-App组件：

window.addEventListener('message', function(event) {
  if (event.data.action === 'setHeight') {
    document.documentElement.style.height = event.data.height + 'px'
  }
})

2. Uni-App组件端

在Uni-App组件中添加以下JavaScript代码以接收来自H5网页的消息：

mounted() {
  window.addEventListener('message', (event) => {
    if (event.data.action === 'getHeight') {
      this.$refs.webview.webviewHeight = event.data.height
    }
  })
}