骆驼才子
骆驼才子
  • 发布:2020-06-09 17:59
  • 更新:2024-09-27 11:15
  • 阅读:1672

【报Bug】运行到小程序模拟器部分组件不生成wxss,js文件里面仅生成Component({})一行

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 2.7.9

第三方开发者工具版本号: 1.02.2004020

基础库版本号: 2.9.2

项目创建方式: HBuilderX

示例代码:

<template>
<view class="uni-steps">
<view :class="[direction==='column'?'uni-stepscolumn':'uni-stepsrow']">
<view :class="[direction==='column'?'uni-stepscolumn-text-container':'uni-stepsrow-text-container']">
<view v-for="(item,index) in options" :key="index" :class="[direction==='column'?'uni-stepscolumn-text':'uni-stepsrow-text']">
<text v-if="!Array.isArray(item.title)" :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-stepscolumn-title':'uni-stepsrow-title']">{{item.title}}</text>
<view v-if="Array.isArray(item.title)" :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-stepscolumn-title':'uni-stepsrow-title']">
<text class="texts" v-for="(title,sort) in item.title" :key="sort">{{title}}</text>
</view>
<text :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-stepscolumn-desc':'uni-stepsrow-desc']">{{item.desc}}</text>
</view>
</view>
<view :class="[direction==='column'?'uni-stepscolumn-container':'uni-stepsrow-container']">
<view :class="[direction==='column'?'uni-stepscolumn-line-item':'uni-stepsrow-line-item']" v-for="(item,index) in options" :key="index">
<view :class="[direction==='column'?'uni-stepscolumn-line':'uni-stepsrow-line',direction==='column'?'uni-stepscolumn-line--before':'uni-stepsrow-line--before']" :style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}"></view>
<view :class="[direction==='column'?'uni-stepscolumn-check':'uni-stepsrow-check']" v-if="index === active">
<uni-icons :color="activeColor" type="checkbox-filled" size="14"></uni-icons>
</view>
<view :class="[direction==='column'?'uni-stepscolumn-circle':'uni-stepsrow-circle']" v-else :style="{backgroundColor:index<active?activeColor:deactiveColor}"></view>
<view :class="[direction==='column'?'uni-stepscolumn-line':'uni-stepsrow-line',direction==='column'?'uni-stepscolumn-line--after':'uni-stepsrow-line--after']" :style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}"></view>
</view>
</view>
</view>
</view>
</template>

<script>
import uniIcons from '../uni-icons/uni-icons.vue'

export default {  
    name:'UniSteps',  
    components: {  
        uniIcons  
    },  
    props: {  
        direction: {  
            // 排列方向 row column  
            type: String,  
            default: 'row'  
        },  
        activeColor: {  
            // 激活状态颜色  
            type: String,  
            default: '#1aad19'  
        },  
        deactiveColor: {  
            // 未激活状态颜色  
            type: String,  
            default: '#999999'  
        },  
        active: {  
            // 当前步骤  
            type: Number,  
            default: 0  
        },  
        options: {  
            type: Array,  
            default () {  
                return []  
            }  
        } // 数据  
    },  
    data() {  
        return {  
            test:'测试数据'  
        }  
    }  
}  

</script>

<style scoped>
.uni-steps {
/ #ifndef APP-NVUE /
display: flex;
width: 100%;
/ #endif /
/ #ifdef APP-NVUE /
flex: 1;
/ #endif /
flex-direction: column;
}

.uni-steps__row {  
    /* #ifndef APP-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: column;  
}  

.uni-steps__column {  
    /* #ifndef APP-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: row-reverse;  
}  

.uni-steps__row-text-container {  
    /* #ifndef APP-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: row;  
}  

.uni-steps__column-text-container {  
    /* #ifndef APP-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: column;  
    flex: 1;  
}  

.uni-steps__row-text {  
    /* #ifndef APP-NVUE */  
    display: inline-flex;  
    /* #endif */  
    flex: 1;  
    flex-direction: column;  
}  

.uni-steps__column-text {  
    padding: 6px 0px;  
    border-bottom-style: solid;  
    border-bottom-width: 1px;  
    border-bottom-color: #e5e5e5;  
    /* #ifndef APP-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: column;  
}  

.uni-steps__row-title {  
    font-size: 26rpx;  
    line-height: 16px;  
    text-align: center;  
}  

.uni-steps__column-title {  
    font-size: 26rpx;  
    text-align: left;  
    line-height: 18px;  

    display: flex;  
    flex-direction: row;  
    justify-content: space-between;  
}  

.uni-steps__row-desc {  
    font-size: 12px;  
    line-height: 14px;  
    text-align: center;  
}  

.uni-steps__column-desc {  
    font-size: 24rpx;  
    text-align: left;  
    line-height: 18px;  
}  

.uni-steps__row-container {  
    /* #ifndef APP-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: row;  
}  

.uni-steps__column-container {  
    /* #ifndef APP-NVUE */  
    display: inline-flex;  
    /* #endif */  
    width: 30px;  
    flex-direction: column;  
}  

.uni-steps__row-line-item {  
    /* #ifndef APP-NVUE */  
    display: inline-flex;  
    /* #endif */  
    flex-direction: row;  
    flex: 1;  
    height: 14px;  
    line-height: 14px;  
    align-items: center;  
    justify-content: center;  
}  

.uni-steps__column-line-item {  
    /* #ifndef APP-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: column;  
    flex: 1;  
    align-items: center;  
    justify-content: center;  
}  

.uni-steps__row-line {  
    flex: 1;  
    height: 1px;  
    background-color: #999;  
}  

.uni-steps__column-line {  
    width: 1px;  
    background-color: #999;  
}  

.uni-steps__row-line--after {  
    transform: translateX(1px);  
}  

.uni-steps__column-line--after {  
    flex: 1;  
    transform: translate(0px, 1px);  
}  

.uni-steps__row-line--before {  
    transform: translateX(-1px);  
}  

.uni-steps__column-line--before {  
    height: 6px;  
    transform: translate(0px, -1px);  
}  

.uni-steps__row-circle {  
    width: 5px;  
    height: 5px;  
    border-radius: 100px;  
    background-color: #999;  
    margin: 0px 3px;  
}  

.uni-steps__column-circle {  
    width: 5px;  
    height: 5px;  
    border-radius: 100px;  
    background-color: #999;  
    margin: 4px 0px 5px 0px;  
}  

.uni-steps__row-check {  
    margin: 0px 6px;  
}  

.uni-steps__column-check {  
    height: 14px;  
    line-height: 14px;  
    margin: 2px 0px;  
}  

.texts{  
    margin-right: 10upx;  
    flex: 1;  
}  

</style>

操作步骤:

引用上述组件并运行到小程序模拟器>微信小程序

预期结果:

希望编译出正常的文件

实际结果:

一个没有生成wxss且js文件里面仅生成Component({})一行

bug描述:

两个代码一样的组件,uni-steps,uni-steps2,一个编译正常,一个没有生成wxss且js文件里面仅生成Component({})一行。
如果只引用uni-steps则出现上面的情况,uni-steps2仅用于测试
压缩包是uni-steps,uni-steps2代码,麻烦看下是什么问题,急!

2020-06-09 17:59 负责人:无 分享
已邀请:
骆驼才子

骆驼才子 (作者)

经过本人反复尝试验证,发现当页面引用多个组件的时候hbuilder会将组件的样式合并到页面的wxss文件里面。
如果页面仅引用一个组件那么相应的组件会生成组件的wxss文件,并且组件js文件也会生成相应脚本。
目前的解决办法(不得以而为之)就是单独建一个页面,把没有生成正确的组件引入(注意新建的页面只能引入一个组件)。
希望能帮到大家。。。

DCloud_UNI_GSQ

DCloud_UNI_GSQ

测试未复现你说的现象,能否提供一个完整的测试工程

s***@163.com

s***@163.com

确实发生不能生成wxss文件的问题...页面引用自定义组件,自定义组件内定义的样式不会生成wxss文件.可以联系我,发完整的项目给你.

芜湖一

芜湖一

我也出错了,我微信开发工具卸载了,然后发现这个组件生成的都不对

1***@qq.com

1***@qq.com

现在还有这个问题,人麻了

1***@qq.com

1***@qq.com - 叁拾

人麻了,一晚上就光排这个bug了

  • y***@163.com

    请问这个问题你解决了吗

    2023-07-28 09:46

y***@163.com

y***@163.com

都三年了还有这个问题,到底解决了没有

1***@163.com

1***@163.com

我也出现了。。。。有大神知道怎么解决吗

要回复问题请先登录注册