鸿蒙APP在uni-app中rich-text这个标签会导致页面白屏

鸿蒙APP在uni-app中rich-text这个标签会导致页面白屏

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Mac
PC版本号 26.1
开发工具 HBuilderX
工具版本 4.86
手机系统 HarmonyOS NEXT
系统版本 HarmonyOS 6.0.0
手机厂商 华为
手机机型 nova14
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>  
  <view>  
    测试内容  
    <rich-text  
      nodes='<style type="text/css"> .STYLE1 { font-family: Source Han Sans SC; font-size: 14px; } </style><img width="100%"  src="https://img.officemate.cn/public/images/8d/f4/d0/0a95ac5e3ec990f9ef739b3107d21df168a8cf02.jpg"/>'  
      style="font-size: 24rpx"  
    ></rich-text>  
  </view>  
</template>

操作步骤：

  • 已提交测试代码

预期结果：

  • 页面不白屏

实际结果：

  • 页面白屏

bug描述：

rich-text标签内，如果nodes节点包含<style>标签，会导致整个页面白屏，无报错


更多关于鸿蒙APP在uni-app中rich-text这个标签会导致页面白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

整个APP都会卡死

更多关于鸿蒙APP在uni-app中rich-text这个标签会导致页面白屏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙系统（HarmonyOS NEXT）上，uni-app的rich-text组件确实存在与<style>标签相关的兼容性问题。根据你的代码和描述，问题核心在于鸿蒙原生渲染引擎对嵌套HTML样式的解析限制。

原因分析：

  1. 鸿蒙的rich-text实现基于系统WebView，但可能对非标准HTML片段（如内联<style>）支持不完善
  2. 样式标签中的CSS语法（如字体声明font-family: Source Han Sans SC）可能触发鸿蒙渲染引擎的解析异常
  3. 白屏是由于样式解析失败导致整个WebView容器崩溃，而非JS执行错误

解决方案：

  1. 移除内联样式（推荐）：
<rich-text 
  nodes='<img width="100%" src="https://img.officemate.cn/public/images/8d/f4/d0/0a95ac5e3ec990f9ef739b3107d21df168a8cf02.jpg"/>'
  style="font-size: 24rpx">
</rich-text>
  1. 使用全局样式替代： 在App.vue或页面style中定义：
.rich-text-style {
  font-family: 'Source Han Sans SC';
  font-size: 14px;
}
  1. 条件编译处理：
<template>
  <view>
    <!-- #ifdef HARMONY -->
    <image mode="widthFix" :src="imgUrl"></image>
    <!-- #else -->
    <rich-text :nodes="htmlContent"></rich-text>
    <!-- #endif -->
  </view>
</template>
回到顶部