1***@qq.com
1***@qq.com
  • 发布:2022-01-15 22:03
  • 更新:2022-01-15 22:03
  • 阅读:780

uniapp h5端正常 app端报错 cid unmatched at view.umd.min.js:1

分类:uni-app
v3

在页面使用组件的时候,自定义的组件是一个聊天的消息框,有一个属性用来表示消息框靠左还是靠右

<template>  
    <view>  
        <view v-if="type">  
            <view class="message message-right">  
                <view class="message-right-status">  
                    <u-loading-icon v-if="status === 'sending'" size="16"></u-loading-icon>  
                    <u-icon v-if="status === 'fail'" name="error-circle-fill" size="16" color="#fa3534"></u-icon>  
                </view>  
                <view class="content content-right">  
                    {{content}}  
                </view>  
                <view style="height: 80rpx;padding-right: 16rpx;">  
                    <u-avatar v-if="avatar" :src="avatar"></u-avatar>  
                    <u-avatar v-else :text="nickname.charAt(0)" randomBgColor></u-avatar>  
                </view>  
            </view>  
        </view>  

        <view v-else>  
            <view class="message message-left">  
                <view style="height: 80rpx;padding-left: 16rpx;">  
                    <u-avatar v-if="avatar" :src="avatar"></u-avatar>  
                    <u-avatar v-else :text="nickname.charAt(0)" randomBgColor></u-avatar>  
                </view>  
                <view class="content content-left">  
                    {{content}}  
                </view>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
            }  
        },  
        props:{  
            //true时消息在右侧,即发送的消息,false时消息在左侧,即接收的消息  
            type:{  
                type: [Boolean],  
                default: false  
            },  
            nickname:{  
                type: [String,Number],  
                default: '私聊者昵称'  
            },  
            avatar:{  
                type: [String],  
                default: "/static/common/logo.png"  
            },  
            content:{  
                type: [String],  
                default: "消息内容"  
            },  
            status:{  
                type: [String],  
                default: 'none'  
            }  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .message-time{  
        text-align: center;  
        color: #959595;  
        font-size: 26rpx;  
    }  

    .message{  
        width: 100%;  
        display: flex;  
    }  
    .message-left{  
        justify-content: flex-start;  
    }  
    .message-right{  
        justify-content: flex-end;  
    }  
    .message-right-status{  
        display: flex;  
        align-items: flex-end;  
        padding-right: 16rpx;  
    }  

    .content{  
        max-width: 70%;  
        min-width: 7%;  
        margin-top: 40rpx;  
        word-wrap:break-word;  
        word-break:break-all;  
        padding: 14rpx 10rpx 14rpx 18rpx;  
        border-radius: 20rpx;  
        font-size: 32rpx;  
        min-height: 40rpx;  
    }  
    .content-left{  
        margin-left: 4rpx;  
        background-color: #FFFFFF;  
        color: #000000;  
    }  
    .content-right{  
        margin-right: 8rpx;  
        background-color: #3c9cff;  
        color: #FFFFFF;  
    }  
</style>  

在使用v-for把消息遍历出来的时候,给这个组件传type属性,然后在聊天界面,下拉刷新获取历史记录的时候就会报错
cid unmatched at view.umd.min.js:1
TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method. at view.umd.min.js:1

之所以确定是这个属性导致的是因为反复测试了,一个一个属性加上去测试,发现加上这个就不行,猜测是v3编译器对v-if,v-else的不识别还是别的原因吧(看了v3官方发的帖子说是支持v-if,v-else的)
后来通过把一个组件拆成两个(一左一右,不在组件里判断消息框左右)这样就没有报错了

2022-01-15 22:03 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复