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
必现的?多次云打包都是一样的样式错乱效果?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变量兼容性、条件编译以及资源加载等方面逐一排查。如果问题依旧存在,可以考虑简化样式逐步排查,或者使用开发者工具远程调试云打包后的应用。