在React Native和Vue中实现H5交互，通常需要使用WebView组件来加载和渲染H5页面。以下是两种框架中实现H5交互的基本步骤和示例代码：
React Native
- 使用
WebView组件加载H5页面。 - 通过
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
- 使用
<iframe>或<webview>标签加载H5页面。 - 通过
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页面中正确处理消息接收，并在发送消息时设置适当的域（* 表示任何域）。
以上代码提供了基本框架，实际应用中可能需要处理更多的细节，例如错误处理、消息验证等。