uni-app render.js 通信问题，在 render.js 视图层里接收逻辑层数据时有时会接收不到
uni-app render.js 通信问题，在 render.js 视图层里接收逻辑层数据时有时会接收不到
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows 11 专业版 | 3.99 | HBuilderX |
产品分类：uniapp/App
PC开发环境操作系统：Windows
HBuilderX类型：正式
手机系统：Android
手机系统版本号：Android 14
手机厂商：华为
手机机型：华为P40pro
页面类型：vue
vue版本：vue2
打包方式：云端
示例代码：
<view class="mapView" id="myMapView" :mapData="mapData" :change:mapData="myMapViews.getMapData"></view>
<script>
import {
mapGetters,
mapState
} from "vuex"
import {
getPrivCity,
} from "@/util/validate.js"
import {getAction} from "@/api/mamage.js"
import {
mapDataMiXin
} from '@/mixins/mapDataMiXin.js'
export default {
name: 'Map',
mixins: [mapDataMiXin],
data() {
return {
mapData: null, // 地图数据
isMapReady:false, // arcgis 准备好了
}
},
computed: {
...mapState({
mainUnit: (state) => state.mainUnit, // 选中的单位数据
unitList:(state)=>state.unitList, // 所有单位数据
layerConfig:(state) => state.layerConfig, // 选中的资源数据
adminResource:(state) => state.adminResource, // 选中的行政资源
landTypeArr:(state) => state.landTypeArr, // 林地类型数据
monitoringDictLayer:(state) => state.monitoringDictLayer, // 活动图层
fireLevelData:(state) => state.fireLevelData, // 火险等级
}),
},
watch:{
// 选中单位数据监听
mainUnit:{
handler(newVal,oldVal){
if(newVal){
// 获取priv
this.getPriv()
// 所有设施设备
this.selectAllData()
}
},deep:true
},
// 所有城市数据
unitList:{
handler(newVal,oldVal){
this.setData(newVal,'unitList')
},deep:true
},
// 选中的资源数据
layerConfig:{
handler(newVal,oldVal){
this.setData(newVal,'layerConfig')
},deep:true
},
// 选中的行政资源
adminResource:{
handler(newVal,oldVal){
this.setData(newVal,'adminResource')
},deep:true
},
// 林地类型数据
landTypeArr:{
handler(newVal,oldVal){
this.setData(newVal,'landTypeArr')
},deep:true
},
// 活的图层
monitoringDictLayer:{
handler(newVal,oldVal){
this.setData(newVal,'monitoringDictLayer')
},deep:true
},
// 火险等级
fireLevelData:{
handler(newVal,oldVal){
this.setData(newVal,'fireLevelData')
},deep:true
},
},
methods: {
...mapGetters(['getCityBasic', 'getMainUnit']),
// 获取priv
getPriv(){
let that = this
let mainUnit = that.getMainUnit()
if(mainUnit){
let priv = getPrivCity(mainUnit.code,that.getCityBasic())
console.log("prive----",priv)
that.setData({priv:priv},'privData')
}
},
// 设置数据
setData(data,type){
let that = this
that.$nextTick(()=>{
let obj = {type:type,data:data}
setTimeout(()=>{
that.mapData = {...obj,timeTemp:new Date()}
},0.5*1000)
})
}
}
}
</script>
<script module="myMapViews" lang="renderjs">
import {
arcgisMiXin
} from '@/mixins/arcgis.js'
export default {
name: 'Map',
mixins: [arcgisMiXin],
data() {
return {
privs: null, // 边界线privs
deviceData: null, // 所有设施设备数据
layerConfigData: null, // 选中的资源数据
allCityData:[], // 所有城市数据
}
},
mounted() {
},
methods: {
// 获取从逻辑层传递过来的数据
getMapData(obj){
let that = this
console.log("传递过来数据",obj)
if(obj && obj.type){
switch(obj.type){
// 边界线要用的
case 'privData':
that.privs = obj.data.priv
console.log("that.privsthat.privs边界线要用的",that.privs)
// 添加城市边界线
that.addCountyBorder()
break
case 'unitList':
// 所有城市数据
that.allCityData = obj.data
break
case 'layerConfig':
// 选中的资源
that.layerConfigData = obj.data
// 控制资源图层显示隐藏
that.clusterLayerShowHide()
break
case 'deviceData':
// 所有设施设备数据
that.deviceData = obj.data
// 初始化资源图层
that.initCustomLayer()
break
case 'adminResource':
// 选中的行政资源
// 处理行政边界图层
that.dealBorderLayer(obj.data)
break
case 'landTypeArr':
// 林地类型数据
// 处理林地类型数据
that.dealLandTypeArr(obj.data)
break
case 'monitoringDictLayer':
// 活的图层数据
// 处理活的图层数据
that.delMonitoringDictLayer(obj.data)
break
case 'fireLevelData':
console.log("火险等级------",obj)
// 火险等级
that.dealFireLevelData(obj.data)
break
}
}
},
}
}
</script>
<style lang="scss" scoped>
.mapView {
width: 100%;
height: 100%;
}
</style>操作步骤：
当逻辑层watch监听有多个数据，都赋值给同一个对象，通过类型区分，在视图层通过类型处理接收到的数据，现在视图层接收的数据不全，有的类型的数据接收不到。
预期结果：
当逻辑层watch监听有多个数据往视图层传递的时候，视图层要能正常接收逻辑层传递的数据。
实际结果：
当逻辑层watch监听有多个数据，都赋值给同一个对象，通过类型区分，在视图层通过类型处理接收到的数据，现在视图层接收的数据不全，有的类型的数据接收不到。
bug描述：
当逻辑层有多个数据传递到视图层的时候，有的时候视图层接收不到逻辑层传递的数据。
在使用 uni-app 开发时，render.js 是用于处理视图层逻辑的脚本文件。在 uni-app 中，视图层和逻辑层是分离的，它们通过特定的通信机制进行数据交互。如果你在 render.js 中接收逻辑层的数据时有时会接收不到，可能是由于以下几个原因导致的：
1. 通信机制问题
uni-app 中视图层和逻辑层的通信是通过 uni.postMessage 和 uni.onMessage 来实现的。如果数据接收不到，可能是通信机制没有正确设置。
- 发送数据：在逻辑层使用
uni.postMessage发送数据。 - 接收数据：在
render.js中使用uni.onMessage监听数据。
确保你在 render.js 中正确监听了消息：
uni.onMessage((data) => {
console.log('Received data from logic layer:', data);
// 处理接收到的数据
});2. 数据发送时机问题
如果逻辑层在 render.js 还未准备好监听消息时就发送了数据，那么 render.js 可能会错过这条消息。确保在 render.js 中监听消息的代码在逻辑层发送数据之前执行。
3. 数据格式问题
确保发送的数据格式是正确的，且符合 uni.postMessage 的要求。uni.postMessage 只能发送 JSON 格式的数据。
uni.postMessage({
data: {
key: 'value'
}
});4. 异步问题
如果逻辑层发送数据的操作是异步的，可能会导致 render.js 在数据发送之前就已经执行了监听代码。确保在数据发送之前，render.js 已经准备好接收数据。
5. 生命周期问题
确保 render.js 中的监听代码在合适的生命周期钩子中执行。例如，在 mounted 或 created 钩子中监听消息。
export default {
mounted() {
uni.onMessage((data) => {
console.log('Received data from logic layer:', data);
// 处理接收到的数据
});
}
};6. 调试工具
使用 uni-app 提供的调试工具（如 HBuilderX 的调试功能）来检查消息是否正常发送和接收。通过调试工具可以更直观地看到通信过程中的问题。
7. 版本问题
确保你使用的 uni-app 版本是最新的，或者至少是稳定的版本。某些旧版本可能存在通信方面的 bug，更新到最新版本可能会解决问题。
8. 其他问题
如果以上方法都无法解决问题，可能是其他未知的 bug 或配置问题。可以尝试在 uni-app 的官方社区或 GitHub 仓库中搜索相关问题，或者提交 issue 寻求帮助。
示例代码
以下是一个简单的示例，展示如何在逻辑层发送数据并在 render.js 中接收数据：
逻辑层（页面或组件）：
uni.postMessage({
data: {
message: 'Hello from logic layer!'
}
});render.js：
uni.onMessage((data) => {
console.log('Received data from logic layer:', data);
// 处理接收到的数据
});