微信小程序rich-text富文本的用法

关于微信小程序中使用rich-text标签渲染富文本，想把这个富文本内容传递给其他页面。

首先：用普通的方法直接传递是会出错的。item是从接口中拿过来的富文本

wx.navigateTo({
   url: `/pages/commodity-details/commodity-details?item=${item}`,
})

控制台会提示渲染错误

解决办法：用encodeURIComponent转码

wx.navigateTo({
   // item有特殊字符，需转码  encodeURIComponent转码
   url: `/pages/commodity-details/commodity-details?item=${encodeURIComponent(JSON.stringify(item))}`,
})

当然，在接收的地方还要处理一下

 // 接受转码特殊字符需要decodeURIComponent解码
const goodDetails = JSON.parse(decodeURIComponent(options.item));

现在用rich-text标签直接渲染goodDetails 就显示正常了

如果富文本里面有图片应该怎么显示

因为一般接口给出来的图片都是像这样的，需要我们去添加前缀

'/profile/upload/2023/06/10/111_20230610152821A002.png'

解决办法是在富文本中找到<img 然后拿出来处理,“config.domain”就是需要添加的前缀，当然还可以添加一些行内样式。

const = richTextData = goodDetails.replace(/<img [^>]*src=['"]([^'"] )[^>]*>/gi, (match, p1) => {
  return `<img src='https://blog.csdn.net/qq_46665317/article/details/${ config.domain   p1 }' style="max-width:100%;height:auto;display:block;margin:0 auto;" />`
})

richTextData 就是处理好了图片显示问题的rich-text富文本内容了

这篇好文章是转载于：学新通技术网