小程序rich-text接收富文本不起作用

Posted 2023-05-01

参考技术A 后台传来的富文本有些并不能被 rich-text 识别以及良好的展现，比如图片大小问题，我们后台传来的含有很多<u>标签，尽管官方文档显示小程序支持，但实践中并不可以，只好通过方法将其删除，还有<被转义成<这些。我们需要将其换成普通字符供 rich-text 识别：

wxml中：

微信小程序|组件-富文本rich-text

1. 效果图

2. wxml代码

<!-- rich-text富文本，可渲染html -->
<view class="page-body">
  <view class="page-section">
    <view class="page-section-title">传入html字符串</view>
    <view class="rich-text-wrp">
      <rich-text nodes="html" bindtap="tap"></rich-text>
    </view>
  </view>

  <view class="page-section">
    <view class="page-section-title">传入节点列表</view>
    <view class="rich-text-wrp">
      <rich-text nodes="nodes" bindtap="tap"></rich-text>
    </view>
  </view>
</view>

3. js代码

Page(
  data: 
    html: '<div class="div_class" style="line-height: 60px; color: red;">Hello&nbsp;World!</div>',
    nodes: [
      name: 'div',
      attrs: 
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      ,
      children: [
        type: 'text',
        text: 'Hello&nbsp;World!'
      ]
    ]
  ,
  tap() 
    console.log('tap')
  
)