uni.postmessage
时间: 2023-11-04 18:54:04 浏览: 51
uni.postMessage是一个用于在app和H5页面之间进行通信的方法。在app中,可以通过调用uni.postMessage来向H5页面发送数据。在H5页面中,可以通过监听message事件来接收来自app的消息。具体使用方法如下:
1. 在app中,使用uni.postMessage发送数据到H5页面:
```javascript
this.myUni.webView.postMessage({ data: { action: 'H5来了' } });
```
2. 在H5页面中,通过message事件监听来接收来自app的消息:
```javascript
document.addEventListener('message', function(e) {
console.log('收到消息:', e.data);
});
```
相关问题
uni.postMessage
uni.postMessage是一个用于在H5页面和原生App之间进行通信的方法。它可以在H5页面中使用,通过postMessage方法向原生App发送信息。在H5页面中,可以通过uni.postMessage({ data: { action: 'H5来了' } })来发送信息给原生App。这样原生App就可以通过监听message事件来接收来自H5页面的信息,并进行相应的处理。对于Vue页面,可以在created生命周期中添加window.addEventListener('message', this.handleMessage)来监听message事件,而在beforeDestroy生命周期中移除监听器window.removeEventListener('message', this.handleMessage),以确保在组件销毁时不再监听message事件。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [uniapp 与H5通信实操](https://blog.csdn.net/jkhedge/article/details/128715363)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* [uniapp 使用 webview 触发uni.postMessage](https://blog.csdn.net/qwe_aaaaa/article/details/126286725)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
uni.postMessage 调用机制
uni.postMessage是在uni-app中用于不同页面之间进行通信的方法。它可以将数据发送给其他页面,并在接收页面上触发onUniNViewMessage事件来接收数据。具体的调用机制如下:
1. 在发送数据的页面(nvue页面)中,使用uni.postMessage(data)方法发送数据,其中data只能为JSON格式的数据。
例如,在nvue页面的template部分中添加一个点击事件,当点击时调用uni.postMessage方法发送数据:
```
<template>
<div @click="test">
<text>点击页面发送数据</text>
</div>
</template>
<script>
export default {
methods: {
test(e) {
uni.postMessage({test: "数据",value:"数据"});
}
}
}
</script>
```
2. 在接收数据的页面(app.vue页面)中,使用onUniNViewMessage方法进行监听,当接收到数据时触发该事件,并可以通过e.data获取到发送的数据。
例如,在app.vue页面的script部分中添加onUniNViewMessage方法来监听接收数据的事件:
```
<script>
export default {
onUniNViewMessage: function(e){
console.log("App.vue收到数据")
console.log(JSON.stringify(e.data))
},
onLaunch: function() {
console.log('App Launch');
}
}
</script>
```
这样,当nvue页面中调用uni.postMessage方法发送数据后,app.vue页面中的onUniNViewMessage方法会被触发,并打印出接收到的数据。