关于微信小程序rich-text的使用方法

近期开始写一个电商类型的微信小程序。其中在商品详情页,为了展示商品的图文不得不使用富文本编辑器。
这里简单的描述下小程序rich-text


微信小程序最详细的rich-text使用方法
微信小程序最详细的rich-text使用方法


这是一个前面代码构成,其中rich-text节点中nodes绑定的就是我们的内容
微信小程序最详细的rich-text使用方法

然后在page里面定义html这个参数(注意html类型为字符串)
微信小程序最详细的rich-text使用方法


最后通过在后端返回的数据,在微信生命周期onshow里面设置。如图
微信小程序最详细的rich-text使用方法


这里的str是我定义的一个变量用来存放后台数据,图片的样式通过正则匹配去修改,
需要注意的是,因为我这里有多张图片,在排列时上下之间可能会出现间隙如图示
微信小程序最详细的rich-text使用方法
解决方案就是在正则中给img加上display:block即可;


想了解更多,可以参考微信官方文档https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

相关文章:

  • 2021-09-12
  • 2021-08-29
  • 2022-12-23
  • 2021-12-20
  • 2021-08-27
  • 2021-11-23
  • 2021-10-24
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-01-08
  • 2022-12-23
  • 2021-11-12
  • 2021-04-23
  • 2022-12-23
相关资源
相似解决方案