uni-app ios nvue 组件中使用富文本rich-text，设置font-size后更新数据导致崩溃

uni-app ios nvue 组件中使用富文本rich-text，设置font-size后更新数据导致崩溃

产品分类：  
uniapp/App  

PC开发环境操作系统：  
Mac  

PC开发环境操作系统版本号：  
10.15.3  

HBuilderX类型：  
正式  

HBuilderX版本号：  
3.2.16  

手机系统：  
iOS  

手机系统版本号：  
iOS 13.4  

手机厂商：  
苹果  

手机机型：  
iphonex  

页面类型：  
nvue  

vue版本：  
vue3  

打包方式：  
离线  

项目创建方式：  
HBuilderX  

示例代码：
见附件截图

操作步骤：

nvue
list 组件
组件cell 循环变量msglist 数组
cell 中 根据消息类型，加载消息类型组件
组件中有rich-text组件
<rich-text class="gift-text" :nodes="getNoTargetNodes"></rich-text>
class gift-text 中设置了 font-size
以上是基本显示格式
发生崩溃
发送消息，变量msglist添加一个数据，直接导致崩溃

如果不加 class gift-text 中的font-size属性，就不会崩溃


预期结果：

不崩溃，并可设置富文本字体大小


实际结果：

异常崩溃


bug描述：

nvue
list 组件
组件cell 循环变量msglist 数组
cell 中 根据消息类型，加载消息类型组件
组件中有rich-text组件
<rich-text class="gift-text" :nodes="getNoTargetNodes"></rich-text>
class gift-text 中设置了 font-size
以上是基本显示格式
发生崩溃
发送消息，变量msglist添加一个数据，直接导致崩溃

如果不加 class gift-text 中的font-size属性，就不会崩溃


![https:https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211125/ad370af4b5bae2fb996167c261e76d27.png](https:https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211125/ad370af4b5bae2fb996167c261e76d27.png)  

![https:https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211125/83ca7af376fafd8566bbd90cfbdcf2fe.png](https:https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211125/83ca7af376fafd8566bbd90cfbdcf2fe.png)

更多关于uni-app ios nvue 组件中使用富文本rich-text，设置font-size后更新数据导致崩溃的实战教程也可以访问 https://www.itying.com/category-93-b0.html

29 回复

请提供一个测试工程

更多关于uni-app ios nvue 组件中使用富文本rich-text，设置font-size后更新数据导致崩溃的实战教程也可以访问 https://www.itying.com/category-93-b0.html


麻烦看下，是不是我这边使用的方式有误

怎么没有回复了？？？

帮忙看下呗，这个问题，卡进度了。。。谢谢

测试工程见附件

提供的测试工程无法正常运行

我这直接用hbuilderx导入，是能直接运行到ios真机上的啊？

再试试这个

拖入 HX 编译直接报错，请上传一个可以直接运行的示例

报错是你的hbuilderx 没有 compile-dart-sass/node_modules/sass 这个文件（见下一个评论附件截图）

我其他同事遇到过这个问题，在hbuilderx 程序包内容，按截图路径添加就好了

好，我试一下

文件见附件

可以给 richt-text 组件添加一个默认的高度，试试应该就不会闪退了

回复 DCloud_iOS_XHY: 我来试一下

回复 DCloud_iOS_XHY: 还是不行，不知道是不是我添加的不对，麻烦您看下我下面发的截图

感谢反馈，bug已确认

是这么添加的吗？还是会崩溃

我是从原生工程debug发现是 richt-text 缺少样式导致的，至于你提供的工程里面内容太多，我也没看具体是哪里的问题，建议你提交一个简单的示例工程，就一个 richt-text 组件模拟一下交互逻辑，已方便排查

回复 DCloud_iOS_XHY: 提供的工程已经是简单的示例了，逻辑中把用不到的组件都过滤掉了。既然是“我是从原生工程debug发现是 richt-text 缺少样式导致的”这个原因；我的疑问是，上面截图中，我给rich-text添加的样式是否正确？还是我添加的宽高方式不对导致的？

回复 genda_0927: 按照我说的，提交一个 只有一个nvue页面，一个按钮，点击按钮后的逻辑和你现在工程处理的一样，这样更好定位问题

回复 DCloud_iOS_XHY: 试下下面附件的工程

回复 DCloud_iOS_XHY: 下一个版本会优化这个问题吗？不优化的话，我这边就考虑写自定义插件了，

回复 genda_0927: 下个alpha版本会修复，预计今天发

回复 DCloud_iOS_XHY: 正式版大概什么时候？

没用的都删掉了

感兴趣的同学可加qq群 909234997 大家进行讨论。群会不定时更新开发中遇到的坑和解决方案

HX3.3.1+ 版本已修复此问题

这是一个已知的 iOS nvue 富文本渲染问题。当在 rich-text 组件上设置 font-size 样式并通过数据更新触发重新渲染时，iOS 原生渲染引擎可能会因样式计算冲突导致内存访问异常而崩溃。

解决方案：

  1. 使用内联样式替代 CSS 类
    将字体大小直接内联到富文本的节点数据中，避免通过 CSS 类设置：

    <rich-text :nodes="processedNodes"></rich-text>

    在计算属性或方法中处理节点数据时，为文本节点添加 style 属性：

    computed: {
  processedNodes() {
    return this.getNoTargetNodes.map(node => {
      if (node.type === 'text') {
        return {
          ...node,
          style: `font-size: 14px;` // 直接内联样式
        }
      }
      return node
    })
  }
}

  2. 使用 span 包裹文本并设置样式
    如果节点结构允许，可以在富文本节点中使用 span 包裹文本内容：

    const nodes = [{
  name: 'span',
  attrs: { style: 'font-size: 14px;' },
  children: [{ type: 'text', text: '你的文本内容' }]
}]
回到顶部