用nvue开发map 高德地图
vue父页面 向nvue页面通信，测试发现 android正常，ios无法通信。 见图
hbx版本： 2.9.8.20201119
本来想用uni.$emit 传值的，但是发现 这种方法 nvue页面向 vue页面可以使用，反过来就没有效果了，就采用了postMessage的
xiaojierun
- 发布：2020-11-27 12:04
- 更新：2020-11-27 14:33
- 阅读：584
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 10.15.7
HBuilderX类型： 正式
HBuilderX版本号： 2.9.8
手机系统： iOS
手机系统版本号： iOS 13.1
手机厂商： 苹果
手机机型： iphone
页面类型： nvue
打包方式： 离线
项目创建方式： HBuilderX
示例代码：
操作步骤：
nvue 页面
onReady() {
let that = this;
that.init()
},
methods(){
init(){
let _self = this;
_self.map_nvue = uni.getCurrentSubNVue();
console.log('_self.map_nvue',_self.map_nvue )
_self.map_nvue.onMessage(res => {
let data = res.data;
console.log('ressss',res)
_self.setMapData(data);
});
uni.$on('play', data => {
console.log('data',data);
});
},
}
vue 页面
<template>
<view class="wrapper">
</view>
</template>
<script>
import {
mapState,
mapMutations
} from 'vuex'
export default {
computed: mapState([ 'userCurrentAddress']),
data() {
return {
title: '使用nvue构建地图',
map_nvue: null
};
},
onLoad() {
this.getUserCurrentAddress();
this.map_nvue = uni.getSubNVueById('addressTitleNvue');
console.log('map',this.map_nvue)
// 向nvue页面发送数据
// uni.$emit('mapData',this.userCurrentAddress);
this.map_nvue.postMessage(this.userCurrentAddress);
uni.$emit('play', {
videoPlay: 2
});
// 接收来自nvue页面数据
/* this.map_nvue.onMessage(function(data){
console.log('监听来自所属页面的message::::::::' + JSON.stringify(data));
}) */
},
methods: {
...mapMutations(['getUserCurrentAddress'])
}
}
</script>
<style lang="scss">
</style>
nvue 页面
onReady() {
let that = this;
that.init()
},
methods(){
init(){
let _self = this;
_self.map_nvue = uni.getCurrentSubNVue();
console.log('_self.map_nvue',_self.map_nvue )
_self.map_nvue.onMessage(res => {
let data = res.data;
console.log('ressss',res)
_self.setMapData(data);
});
uni.$on('play', data => {
console.log('data',data);
});
},
}vue 页面
<template>
<view class="wrapper">
</view>
</template>
<script>
import {
mapState,
mapMutations
} from 'vuex'
export default {
computed: mapState([ 'userCurrentAddress']),
data() {
return {
title: '使用nvue构建地图',
map_nvue: null
};
},
onLoad() {
this.getUserCurrentAddress();
this.map_nvue = uni.getSubNVueById('addressTitleNvue');
console.log('map',this.map_nvue)
// 向nvue页面发送数据
// uni.$emit('mapData',this.userCurrentAddress);
this.map_nvue.postMessage(this.userCurrentAddress);
uni.$emit('play', {
videoPlay: 2
});
// 接收来自nvue页面数据
/* this.map_nvue.onMessage(function(data){
console.log('监听来自所属页面的message::::::::' + JSON.stringify(data));
}) */
},
methods: {
...mapMutations(['getUserCurrentAddress'])
}
}
</script>
<style lang="scss">
</style>
预期结果：
onMessage 能通讯成功
onMessage 能通讯成功
实际结果：
onMessage 能通讯成功
onMessage 能通讯成功
bug描述：
最佳回复
subNVue.postMessage(OBJECT)
发送消息，此通讯方式已过时;请使用uni.$emit进行通讯，参考:https://uniapp.dcloud.io/collocation/frame/communication?id=emit
xiaojierun (作者)
已解决了,谢谢
2020-11-27 19:05