hcwh
hcwh
  • 发布:2024-05-07 11:52
  • 更新:2024-05-07 11:52
  • 阅读:30

【报Bug】uniapp编辑器,组件样式乱的现象 or 无法解析样式的情况

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 4.14

手机系统: Android

手机系统版本号: Android 12

手机厂商: 小米

手机机型: xiaomi

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<template>

    <uni-popup ref="popup" type="center">  
        <view class="bg">  
            <view class="vip-card-container">  
                <view class="title">  
                    开通VIP立享无限次恢复  
                </view>  
                <view class="icon-list">  
                    <view class="item">  
                        <image src="@/static/icon_zp.png" />  
                        <view class="text">  
                            照片找回  
                        </view>  
                    </view>  
                    <view class="item">  
                        <image src="@/static/icon_sp.png" />  
                        <view class="text">  
                            视频查找  
                        </view>  
                    </view>  
                    <view class="item">  
                        <image src="@/static/icon_wd.png" />  
                        <view class="text">  
                            文件速查  
                        </view>  
                    </view>  
                </view>  
                <view class="btn" @click="jumpPage">  
                    立即开通  
                </view>  
                <image class="close" src="@/static/clos.png" @click="closeCard">  

                </image>  
            </view>  
        </view>  

    </uni-popup>  

</template>

<script setup>
import { ref, onMounted,getCurrentInstance } from 'vue';
import { userInfoStore } from "@/store/userInfoStore.js";
import { appInfoStore } from '@/store/appInfoStore.js'
const { proxy } = getCurrentInstance();
const userStore = userInfoStore();
const appInfo = appInfoStore()
const userRef = ref()
const emit = defineEmits(['stopScan'])
const popup = ref();

onMounted(async () => {
await userStore.updateUserInfo();
const isWhite = appInfo.getisWhite()
userRef.value = userStore.getUserInfo()

if (!userRef.value.isVip && !isWhite) {  

open()
}

})

const open = () => {
popup.value.open()
}

// 跳转会员页面

const jumpPage = () => {
emit('stopScan')
proxy.$toPage('/pages/vip/vip')
// toPage('/pages/vip/vip')
}

// 关闭
const closeCard = () => {
uni.reLaunch({
url: '/pages/index/index'
})
if (userRef.value.isVip) {
popup.value.close()
} else {

    uni.reLaunch({  
        url: '/pages/index/index'  
    })  
}  

}

</script>

<style lang="scss" scoped>
.bg {

width: 50vh;  
height: 1086rpx;  
background-image: url('@/static/img_light_bg.png');  
background-size: 100% 100%;  
background-repeat: no-repeat;  
display: flex;  
align-items: center;  

}

.vip-card-container {
// background-color: red;
width: 586rpx;
height: 626rpx;
margin: 0rpx auto;
background-image: url('@/static/img_pop_bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;

.title {  
    margin-top: 120rpx;  
    height: 56rpx;  
    font-family: PingFang HK, PingFang HK;  
    font-weight: 500;  
    font-size: 40rpx;  
    color: #0F244D;  
    line-height: 56rpx;  
    text-align: center;  
    font-style: normal;  
    text-transform: none;  
}  

.icon-list {  
    width: 100%;  
    display: flex;  
    align-items: center;  
    justify-content: space-around;  

    .item {  
        width: 108rpx;  
        height: 160rpx;  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  

        image {  
            width: 108rpx;  
            height: 108rpx;  

        }  

        .text {  

            height: 36rpx;  
            font-family: PingFang HK, PingFang HK;  
            font-weight: 400;  
            font-size: 24rpx;  
            color: #0F244D;  
            line-height: 36rpx;  
            text-align: center;  
            font-style: normal;  
            text-transform: none;  
        }  
    }  
}  

.btn {  
    width: 458rpx;  
    height: 98rpx;  
    background: #EB5352;  
    border-radius: 60rpx 60rpx 60rpx 60rpx;  
    color: white;  
    text-align: center;  
    line-height: 98rpx;  
}  

.close {  
    width: 64rpx;  
    height: 64rpx;  
    position: absolute;  
    bottom: -40rpx;  
    left: 50%;  
    transform: translateX(-50%);  
}  

}
</style>

操作步骤:

把这些图片资源可以注释掉,然后使用新编辑器打开看看吧~ 应该可以复现

预期结果:

图片 无法上传!

实际结果:

我也无法上传图片啊!

bug描述:

真机调试,浏览器,都无法读取components文件夹下面的组件的scss样式,在3.99版本的编辑器的时候,我完成了此组件的开发,开发其他组件,然后最近更新了编辑器为4.14;当我使用此组件的时候,布局乱了,把js代码注释掉了,任何一种可能性都试了一遍,还是不行。 我判断就是 无法读取style,无法解析吧 然后我把编辑器更改为3.99 就成功打开~ 希望推版本的时候 好好看bug!!! md 为了这个bug 我纯纯浪费了半天的时间!!!!

2024-05-07 11:52 负责人:无 分享
已邀请:

要回复问题请先登录注册