uni-app rich-text组件塞入emoji表情部分机型直接出现闪退

请上传一个可复现问题完整的示例工程便于排查问题

itying888 2楼•22 天前

有没有使用过自定义字体

在 uni-app 中使用 rich-text 组件时，如果直接插入 emoji 表情，可能会导致部分机型出现闪退的问题。这通常是因为某些 emoji 表情的编码或渲染方式在某些设备上不被支持，或者 rich-text 组件在处理这些特殊字符时出现了问题。

以下是一些可能的解决方案：

如果 emoji 表情不需要复杂的样式或布局，可以考虑使用 text 组件来显示 emoji，而不是 rich-text。text 组件通常对 emoji 的支持更好。

<text>😊</text>

将 emoji 表情转换为图片，然后使用 image 组件来显示。这样可以避免 emoji 编码和渲染的问题。

<image src="/static/emoji/smile.png" mode="aspectFit"></image>

如果必须使用 rich-text 组件，可以尝试将 emoji 表情转换为 unicode 编码，然后插入到 rich-text 中。

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

export default {
  data() {
    return {
      emojiNodes: '&#128512;' // 例如，😊 的 unicode 编码是 128512
    }
  }
}

可以使用一些第三方库来处理 emoji 表情，例如 twemoji，它可以将 emoji 表情转换为图片，并且支持跨平台。

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

import twemoji from 'twemoji';

export default {
  data() {
    return {
      emojiNodes: twemoji.parse('😊') // 将 emoji 转换为图片
    }
  }
}

如果问题只出现在某些特定机型上，可以尝试检查这些设备的系统版本和浏览器内核版本，看看是否有已知的 emoji 渲染问题。如果有，可以考虑在这些设备上禁用 emoji 或者使用替代方案。

确保你使用的是最新版本的 uni-app，因为新版本可能会修复一些已知的兼容性问题。

如果以上方法都无法解决问题，可以考虑使用 web-view 组件来加载一个包含 emoji 的网页，这样可以绕过 rich-text 组件的限制。

<web-view src="https://example.com/emoji-page"></web-view>

uni-app rich-text组件塞入emoji表情 部分机型直接出现闪退