React Native与Vue的H5交互

在React Native和Vue中实现H5交互，通常需要使用WebView组件来加载和渲染H5页面。以下是两种框架中实现H5交互的基本步骤和示例代码：

React Native

1. 使用WebView组件加载H5页面。
2. 通过postMessage方法在H5和RN之间发送消息。

import React, { useRef } from 'react';
import { WebView } from 'react-native-webview';
 
const H5Interaction = () => {
  const webview = useRef(null);
 
  const handleMessage = (event) => {
    const { data } = event.nativeEvent;
    console.log('Received message from H5:', data);
  };
 
  const sendMessageToH5 = () => {
    webview.current.injectJavaScript(`
      window.postMessage('Hello from React Native');
    `);
  };
 
  return (
    <WebView
      ref={webview}
      source={{ uri: 'https://your-h5-page.com' }}
      onMessage={handleMessage}
    />
  );
};

Vue

1. 使用<iframe>或<webview>标签加载H5页面。
2. 通过window.postMessage在H5和Vue之间发送消息。

<template>
  <iframe
    :src="h5Url"
    @load="sendMessageToH5"
    @message="handleMessage"
  />
</template>
 
<script>
export default {
  data() {
    return {
      h5Url: 'https://your-h5-page.com'
    };
  },
  methods: {
    handleMessage(event) {
      console.log('Received message from H5:', event.data);
    },
    sendMessageToH5() {
      this.$el.contentWindow.postMessage('Hello from Vue', '*');
    }
  }
};
</script>

确保在H5页面中正确处理消息接收，并在发送消息时设置适当的域（* 表示任何域）。

以上代码提供了基本框架，实际应用中可能需要处理更多的细节，例如错误处理、消息验证等。