uni-app HbuilderX4.36 自定义基座样式正常,云打包后样式错乱

uni-app HbuilderX4.36 自定义基座样式正常,云打包后样式错乱

开发环境 版本号 项目创建方式
Windows 24H2 HBuilderX

示例代码:

<template>
<view class="dog_box">
<view class="dog_nav">
<view class="nav_title">
巡回检测
</view>
<view class="nav_opt">
<button class="nav_opt_btn">设置</button>
</view>
</view>
<view class="dog_container">
<view class="aside_left">
<view class="content">
<button class="aside_left_btn" v-for="(item, index) in contentLeftData" :key="index" :class="{
'item_active': index === currentIndex,
'item_disabled': !clickableStates[index]
}" @click="clickableStates[index] ? divClick(index) : null">{{item.name}}</button>
</view>
</view>
<view class="main">
<view class="cadImage">
<view class="title">平面图</view>
<image src="./cad.png"  class="image" />
</view>
<view class="cadBtn">
<view class="content">
<meter value="0.1"></meter> 电量:10% 
<meter value="0.1"></meter> 状态:正在移动
</view>
</view>
</view>
<view class="aside_right">
<view class="content">
<view class="top">
<view class="title">
采集图像参照
</view>
<image src="./cad.png"  class="image" />
<view> </view>
</view>
<view class="btn">
<view class="title">
采集图像一览
</view>
<view class="table">
<uni-table ref="table" emptyText="暂无更多数据">
<uni-tr>
<uni-th width="150" align="center">名字</uni-th>
<uni-th align="center">地点</uni-th>
<uni-th width="204" align="center">时间</uni-th>
</uni-tr>
<uni-tr v-for="(item, index) in tableData" :key="index">
<uni-td>{{ item.name }}</uni-td>
<uni-td>
<view class="name">{{ item.address }}</view>
</uni-td>
<uni-td align="center">{{ item.date }}</uni-td>
</uni-tr>
</uni-table>
</view>
</view>
</view>
</view>
</view>
</view>
</template>  
<script>
export default {
data() {
return {
title: 'Hello',
// 左侧全部按钮
contentLeftData: [{
name: "向目的地移动"
}, // 0
{
name: "暂停移动"
}, // 1
{
name: "继续移动"
}, // 2
{
name: "拍摄照片"
}, // 3
{
name: "执行动作 : 打招呼"
}, // 4
{
name: "执行动作 : 坐下"
}, // 5
{
name: "执行动作 : 坐下恢复"
}, // 6
{
name: "执行动作 : 伸懒腰"
}, // 7
{
name: "执行动作 : 跳舞1"
}, // 8
{
name: "执行动作 : 跳舞2"
}, // 9
{
name: "播放声音 : 播放音乐1"
}, // 10
{
name: "播放声音 : 播放音乐2"
}, // 11
{
name: "播放声音 : 播放音乐3"
}, // 12
{
name: "恢复按钮"
}, // 13
],
clickableStates: [  
true, //  向目的地移动  
false, //  暂停移动  
false, //  继续移动  
true, //  拍摄照片   
true, //  执行动作 : 打招呼  
true, //  执行动作 : 坐下  
true, //  执行动作 : 坐下恢复  
true, //  执行动作 : 伸懒腰    
true, //  执行动作 : 跳舞1  
true, //  执行动作 : 跳舞2  
true, //  播放声音 : 播放音乐1  
true, //  播放声音 : 播放音乐2  
true, //  播放声音 : 播放音乐3  
true, //  恢复按钮  
],  
// 右侧数据  
dataScore: [],  
dog_target_node: 1, //起点  
currentIndex: -1,  
tableData: [{  
"date": "2020-09-01",  
"name": "Dcloud1",  
"address": "①"  
}, {  
"date": "2020-09-01",  
"name": "Dcloud1",  
"address": "①"  
}, {  
"date": "2020-09-01",  
"name": "Dcloud1",  
"address": "①"  
}, {  
"date": "2020-09-01",  
"name": "Dcloud1",  
"address": "①"  
}, {  
"date": "2020-09-01",  
"name": "Dcloud1",  
"address": "①"  
},{  
"date": "2020-09-01",  
"name": "Dcloud1",  
"address": "①"  
}, {  
"date": "2020-09-01",  
"name": "Dcloud1",  
"address": "①"  
}, {  
"date": "2020-09-01",  
"name": "Dcloud1",  
"address": "①"  
}, {  
"date": "2020-09-01",  
"name": "Dcloud1",  
"address": "①"  
}, {  
"date": "2020-09-01",  
"name": "Dcloud1",  
"address": "①"  
},{  
"date": "2020-09-01",  
"name": "Dcloud1",  
"address": "①"  
}, {  
"date": "2020-09-01",  
"name": "Dcloud1",  
"address": "①"  
}, {  
"date": "2020-09-01",  
"name": "Dcloud1",  
"address": "①"  
}, {  
"date": "2020-09-01",  
"name": "Dcloud1",  
"address": "①"  
}, {  
"date": "2020-09-01",  
"name": "Dcloud1",  
"address": "①"  
}]  
}  
},  
onLoad() {  

},  
methods: {  
divClick(index) {  
//let that = this;  
this.currentIndex = index;  

// 点击左侧按钮--'向目的地移动'  
if (index === 0) {  
this.execute_navigation(index)  
// 点击左侧按钮--'暂停移动'  
} else if (index === 1) {  
this.execute_pausenavigation(index)  
// 点击左侧按钮--'继续移动'  
} else if (index === 2) {  
this.execute_recovernavigation(index)  
// 点击左侧按钮--'拍摄照片'  
} else if (index === 3) {  
this.execute_photos()  

// 点击左侧按钮--'执行动作 : 打招呼'  
} else if (index === 4) {  
//判断机器狗运动状态  
// let data = {  
//  target_node: this.dog_target_node,  
//  sport_index: this.sport_index_say_hello,  
//  message: "say_hello",  
// };  
let data = {}  
this.execute_action(index, data);  

// 点击左侧按钮--'执行动作 : 坐下'  
} else if (index === 5) {  
// let data = {  
//  target_node: this.dog_target_node,  
//  sport_index: this.sport_index_sit_down,  
//  message: "sit_down",  
// };  
let data = {}  
this.execute_action(index, data);  

// 点击左侧按钮--'执行动作 : 坐下恢复'  
} else if (index === 6) {  
// let data = {  
//  target_node: this.dog_target_node,  
//  sport_index: this.sport_index_sit_up,  
//  message: "sit_up",  
// };  
let data = {}  
this.execute_action(index, data);  

// 点击左侧按钮--'执行动作 : 伸懒腰'  
} else if (index === 7) {  

// let data = {  
//  target_node: this.dog_target_node,  
//  sport_index: this.sport_index_stretch_legs,  
//  message: "stretch_legs",  
// };  
let data = {}  
this.execute_action(index, data);  

// 点击左侧按钮--'执行动作 : 跳舞1'  
} else if (index === 8) {  
// let data = {  
//  target_node: this.dog_target_node,  
//  sport_index: this.sport_index_dance1,  
//  message: "dance1",  
// };  
let data = {}  
this.execute_action(index, data);  

// 点击左侧按钮--'执行动作 : 跳舞2'  
} else if (index === 9) {  
// let data = {  
//  target_node: this.dog_target_node,  
//  sport_index: this.sport_index_dance2,  
//  message: "dance2",  
// };  
let data = {}  
this.execute_action(index, data);  
// 点击左侧按钮--'播放音乐1 :   
} else if (index === 10) {  
// if (this.isPlaying) {  
//  this.$refs.audioPlayer.pause();  
// } else {  
//  if (this.isStartPlaying) {  
//      this.$refs.audioPlayer.play();  
//  } else { //开始播放  
//      let data = {  
//          target_node: this.dog_target_node,  
//          sport_index: this.sport_index_play_music1,  
//          message: "play_music1",  
//      };  
//      this.execute_play_music(index, data);  
//      this.isStartPlaying = true;  
//  }  
// }  
// this.isPlaying = !this.isPlaying;  
// 点击左侧按钮--'播放音乐2 :   
} else if (index === 11) {  
// let data = {  
//  target_node: this.dog_target_node,  
//  sport_index: this.sport_index_play_music2,  
//  message: "play_music2",  
// };  
// this.execute_play_music(index, data)  
// 点击左侧按钮--'播放音乐3 :   
} else if (index === 12) {  
// let data = {  
//  target_node: this.dog_target_node,  
//  sport_index: this.sport_index_play_music3,  
//  message: "play_music3",  
// };  
// this.execute_play_music(index, data)  
}  
// 恢复按钮1 : 初始化所有按钮的制御状态  
else if (index === 13) {  
this.enabledAction()  
};  
},  
// 开始执行导航任务  
execute_navigation(index) {  
// 导航按钮制御  
this.disabledNavigation(index);  
// 开始刷新狗的位置  
this.get_dog_position_start();  
},  
// 暂停导航任务  
execute_pausenavigation(index) {  

// 导航按钮制御  
this.disabledNavigation(index);  
// 暂停刷新狗的位置  
this.get_dog_position_stop();  
},  
// 恢复/继续 导航任务  
execute_recovernavigation(index) {  
// 导航按钮制御  
this.disabledNavigation(index);  
// 开始刷新狗的位置  
this.get_dog_position_start();  
},  
// 机器狗-导航-按钮制御  
disabledNavigation(index) {  
// index : 0  向目的地移动  
// index : 1  暂停移动  
// index : 2  继续移动  
// 按下-向目的地移动-按钮后, 禁用除了-暂停-按钮之外的所有按钮  
// 按下-暂停-按钮后, 禁用除了-继续-按钮之外的所有按钮  
// 按下-继续-按钮后, 禁用除了-暂停-按钮之外的所有按钮  
//   -向目的地移动-按钮,按下后disabled, 在机器狗状态返回待命后, 解除disabled  

// 禁用动作按钮   
for (let idx = 0; idx < this.clickableStates.length; idx++) {  
this.clickableStates[idx] = false;  
if (index == 0 || index == 1) {  
if (idx == (index + 1)) {  
this.clickableStates[idx] = true;  
}  
} else if (index == 2) {  
if (idx == (index - 1)) {  
this.clickableStates[idx] = true;  
}  
}  
// 因为API侧没有实现, 这里暂时保留一个-恢复-按钮  
// API侧实装后, 这里可以删除  
if (idx == (this.clickableStates.length - 1)) {  
this.clickableStates[idx] = true;  
}  
};  
},  
// 执行左侧列表里面的一系列任务  
execute_action(index, data) {  
//this.disabledAction(index)  
},  
// 机器狗-按钮恢复  
enabledAction() {  
// 启用动作按钮  
for (let idx = 0; idx < this.clickableStates.length; idx++) {  
this.clickableStates[idx] = true;  
if (idx == 2 || idx == 1) {  
this.clickableStates[idx] = false;  
}  
}  
},  
// 执行拍照任务  
execute_photos() {  
// let data = {  
//   target_node: this.dog_target_node,  
// };  
// Message.success("photo start");  
// POST("/go2-patrol/v1/photos", data).then((success) => {  
//   console.log(success, "开始执行拍照动作");  
//   if (success.code == 200) {  
//     console.log(success, "拍照动作执行完毕");  
//     Message.success("拍照成功");  
//     this.get_photo_list(this.dog_target_node)  
//   } else {  
//     Message.error("拍照失败");  
//   }  
// });  
this.currentIndex = -1;  
},  
get_dog_position_start() {  
// 定时更新方法2 : 对应机器狗位置显示  
// 只有在点击了[移动]按钮之后才能才开始不停刷新, 所以设置了开关   
// if (!this.interval2) {  
//  // 如果定时器尚未启动,则启动定时器  
//  this.interval2 = setInterval(this.refreshDogPosition, 5000); // 5秒更新一次  
//  this.interval3 = setInterval(this.getNavigationStatus, 5000); // 5秒更新一次  
// }  
},  
get_dog_position_stop() {  
// 清除-狗导航位置-定时器  
// clearInterval(this.interval2);  
// this.interval2 = null; // 重置-狗导航位置-定时器ID  

// // 清除-狗导航状态-定时器  
// clearInterval(this.interval3);  
// this.interval3 = null; // 重置-狗导航状态-定时器ID  
}  
}  
</script>  
.dog_box {
box-sizing: border-box;
height: 100vh;
width: 750rpx;
background: $dog_bg;
overflow: hidden;

.dog_nav {
background: $dog-nav-bg;
box-sizing: border-box;
height: 40rpx;
width: 100%;
display: flex;
justify-content: space-between;
text-align: center;
align-items: center;
padding: 0px $dog-padding;

.nav_title {
color: white;
font-size: 13.67rpx;
}

.nav_opt {
.nav_opt_btn {
background: $dog-btn;
color: white;
font-size: 7.81rpx;
width: 61rpx;
height: 20rpx;
line-height: 20rpx;
}
}
}

.dog_container {
width: 100%;
height: calc(100vh - 40rpx);
display: flex;

.aside_left {
flex: 2;
background: white;
height: 100%;
overflow: hidden auto;

.content {
.aside_left_btn {
background: $dog-btn;
color: white;
font-size: $dog-font;
width: 90%;
height: 31.25rpx;
line-height: 31.25rpx;
margin-top: 5.86rpx;
}

.item_active {
background: $dog-btn;
}

.item_disabled {
background: $dog-btn-disabled;
}
}
}

.main {
width: 429.69rpx;
height: 100%;
margin: 0 11.72rpx;
box-sizing: border-box;
overflow: hidden auto;
display: flex;
flex-direction: column;

.cadImage {
// margin: $dog-margin;
width: 100%;
height: 257.81rpx;
background: white;
padding: 11.72rpx;
box-sizing: border-box;
margin: 11.72rpx 0px;
border-radius: 5px;
display: flex;
flex-direction: column;

.title{
font-size: 11.72rpx;
font-weight: bold;
}

.image {
width: 390.63rpx;
height: 234.38rpx;
margin: auto;
}
}

.cadBtn {
flex: 1;
display: flex;
flex-direction: column-reverse;

.content {
width: 100%;
height: 23.44rpx;
background: white;
display: flex;
align-items: center;
border-radius: 5px;
margin-bottom: 10px;
}
}
}

.aside_right {
flex: 3;
background: white;
box-sizing: border-box;
padding: $dog-padding;
height: 100%;
overflow: hidden auto;

.content {
display: flex;
flex-direction: column;
height: 100%;
.top {
flex: 2;
display: flex;
flex-direction: column;
.title {
font-size: 11.72rpx;
font-weight: bold;
margin-bottom: 20px;
}

.image {
margin: auto;
width: 117.19rpx;
height: 78.13rpx;
// aspect-ratio: 2 / 1;
}
}

.btn {
flex: 3;
margin-top: $dog-margin;

.title {
font-size: 11.72rpx;
font-weight: bold;
margin-bottom: 7.81rpx;
}

.table {}
}
}
}
}

.aside_left button:last-child {
margin-bottom: 10px;
}

操作步骤:

直接云打包就能复现

预期结果:

每次云打包都会复现

实际结果:

每次云打包都会复现

bug描述:

HbuilderX4.36 为啥自定义基座的时候样式是正常的,云打包以后样式错乱了 。下面上传两张截图 正式打包的和基座的

正式打包 基座


更多关于uni-app HbuilderX4.36 自定义基座样式正常,云打包后样式错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

必现的?多次云打包都是一样的样式错乱效果?HBuilderX创建的项目,还是cli创建的,vue2还是vue3

更多关于uni-app HbuilderX4.36 自定义基座样式正常,云打包后样式错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html


vue2 再就是我感觉可能是我要打包成横屏的原因 我正在查配置横屏应该怎么配置。谢谢您的回复

针对你提到的uni-app在HBuilderX 4.36中自定义基座样式正常,但云打包后出现样式错乱的问题,这通常与样式在不同环境下的解析差异有关。以下是一些可能的原因及对应的代码案例,帮助你定位和解决问题。

1. 样式单位问题

在移动设备上,使用px作为单位可能会导致样式在不同分辨率设备上表现不一致。建议使用vw, vh, rem%等相对单位。

示例代码

/* 使用rem作为单位 */
body {
    font-size: 16px; /* 根元素字体大小设为16px,便于计算 */
}
.container {
    width: 100%;
    height: 5rem; /* 高度为根字体大小的5倍,即80px */
}

2. Flexbox布局差异

不同浏览器对Flexbox属性的支持可能有细微差别。确保你的Flexbox布局在所有目标环境中表现一致。

示例代码

.flex-container {
    display: flex;
    flex-direction: column; /* 垂直排列子元素 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
}

3. CSS变量兼容性

如果你使用了CSS变量,请确保目标平台支持CSS变量。部分老旧设备或浏览器可能不支持。

示例代码(避免使用CSS变量或提供fallback):

:root {
    --main-bg-color: #f0f0f0;
}
body {
    background-color: var(--main-bg-color, #ffffff); /* 提供fallback颜色 */
}

4. 条件编译

检查是否使用了条件编译导致某些样式只在自定义基座中生效。

示例代码

/* #ifdef H5 */
.h5-specific-style {
    color: red;
}
/* #endif */

/* #ifndef H5 */
.non-h5-style {
    color: blue;
}
/* #endif */

5. 外部资源加载问题

确保所有外部样式表和资源(如字体文件)在云打包后能够正确加载。检查路径是否正确,以及是否有CORS(跨源资源共享)问题。

示例代码(确保路径正确):

<link rel="stylesheet" href="/static/css/main.css">

结论

由于无法直接查看你的项目代码,以上提供了一些常见的问题点和解决方案。建议从样式单位、布局方式、CSS变量兼容性、条件编译以及资源加载等方面逐一排查。如果问题依旧存在,可以考虑简化样式逐步排查,或者使用开发者工具远程调试云打包后的应用。

回到顶部