微信小程序中rich-text富文本的用法-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序中rich-text富文本的用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

控制台会提示渲染错误
微信小程序富文本,微信小程序,微信小程序,javascript,数学建模
解决办法：用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='${ config.domain + p1 }' style="max-width:100%;height:auto;display:block;margin:0 auto;" />`
})