uniapp app内嵌h5的通信方式
在uniapp中实现App内嵌H5的通信,可以使用以下方法:
- 使用
uni.navigateTo
打开一个带有Webview的页面,并通过URL传递参数。 - 使用
postMessage
和onMessage
接口进行H5和App之间的消息传递。
以下是使用postMessage
和onMessage
的示例代码:
在H5页面中:
// 发送消息到App
window.parent.postMessage({
action: 'h5Action',
data: {
key: 'value'
}
}, '*');
// 监听App发送的消息
window.addEventListener('message', function(event) {
const action = event.data.action;
const data = event.data.data;
// 处理消息
}, false);
在uniapp App中:
// 监听H5页面发送的消息
onLoad() {
window.addEventListener('message', e => {
const action = e.data.action;
const data = e.data.data;
// 处理消息
}, false);
},
// 发送消息到H5页面
methods: {
sendMessageToH5() {
const webview = this.$scope.$getAppWebview();
webview.postMessage({
action: 'appAction',
data: {
key: 'value'
}
}, '*');
}
}
确保在App和H5页面都正确处理了message
事件,并且在发送消息时指定了正确的接收来源*
或者具体的URL。
评论已关闭