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

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

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


微信小程序最详细的rich-text使用方法_第1张图片
微信小程序最详细的rich-text使用方法_第2张图片


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

然后在page里面定义html这个参数(注意html类型为字符串)
这里写图片描述


最后通过在后端返回的数据,在微信生命周期onshow里面设置。如图
这里写图片描述


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


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

你可能感兴趣的:(微信小程序)