uni-app 4.14版本HBuilder小程序编译后span样式Bug

uni-app 4.14版本HBuilder小程序编译后span样式Bug

示例代码：

.viewclass span{  
    font-size: 24rpx;  
    color: rgba(0, 0, 0, 0.44);  
    text-decoration: line-through;  
    margin-left:6rpx;  
    font-weight: 400;  
}  
.viewclass p{  
    font-size: 24rpx;  
    font-weight: 400;  
}

操作步骤：

4.14版本 运行到微信开发者工具 和4.08 及3.99版本呈现效果不一致

预期结果：

4.08及3.99版本编译后为

<view class="viewclass">
<view class="_p">234</view>
<lable class="_span">123</label>
</view>

实际结果：

4.14版本编译后为

<view class="viewclass">
<view class="_p">234</view>
<span>123</span>
</view>

实际span的class未生效

bug描述：

css样式未生效

4.14的span未生效存在删除线的样式效果
4.08及3.99的HBuilder版本都是可以生效的


更多关于uni-app 4.14版本HBuilder小程序编译后span样式Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

官方修复了，等下个版本更新吧 ，现在先用4.08版本打包

更多关于uni-app 4.14版本HBuilder小程序编译后span样式Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


plus.runtime.arguments安卓苹果获取参数不一致怎么办 大佬

回复 传播星球: 如何传的hbuilder://?xxx=${123456} 是这样吗

回复 困难总比办法多: 大佬 看这个帖子吧https://ask.dcloud.net.cn/question/190840

在 uni-app 的 4.14 版本中，编译小程序时可能会遇到 span 标签的样式问题。这种问题通常是由于小程序平台的样式解析与 H5 或其他平台不同导致的。以下是一些可能的解决方案和排查步骤：

1. 检查样式作用域

小程序中，某些样式规则可能不会像 H5 那样生效。确保你的样式在小程序中有效：

  • 检查是否有样式被小程序平台忽略（例如 display: inline-block 在小程序中可能表现不同）。
  • 使用 !important 强制应用样式，例如：
    span {
  color: red !important;
}

2. 避免使用 span 标签的嵌套

小程序的渲染机制可能对嵌套的 span 标签支持不完善。尽量减少 span 的嵌套层级，或者使用其他标签（如 view）替代。

3. 使用 rich-text 组件

如果 span 标签用于富文本渲染，可以尝试使用小程序的 rich-text 组件替代：

<template>
  <rich-text :nodes="htmlContent"></rich-text>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '<span style="color: red;">Hello World</span>',
    };
  },
};
</script>

4. 检查样式兼容性

确保你的样式在小程序中兼容。例如：

  • 避免使用 rem，小程序中推荐使用 rpx。
  • 检查 flex 布局在小程序中的表现是否与预期一致。

5. 更新 uni-app 版本

如果问题是由于 uni-app 的 Bug 导致的，尝试更新到最新版本。开发者可能已经修复了相关问题。

6. 自定义组件替代

如果 span 标签的样式问题无法解决，可以尝试自定义一个组件来替代 span 的功能。

7. 调试工具

使用微信开发者工具或其他小程序的调试工具，检查编译后的代码和样式，定位问题根源。

8. 提交 Issue

如果问题确实是由 uni-app 的 Bug 导致的，可以在 uni-app GitHub 仓库 中提交 Issue，附上复现代码和问题描述。

示例代码

以下是一个简单的示例，展示了如何在 uni-app 中使用 span 标签并应用样式：

<template>
  <view>
    <span class="custom-span">Hello World</span>
  </view>
</template>

<style>
.custom-span {
  color: red;
  font-size: 16px;
}
</style>
回到顶部