一个菜鸟的互联网技术分享博客
您的位置: 主页 > 微信小程序组件之rich-text,转义显示富文本操作
advertisement

微信小程序组件之rich-text,转义显示富文本操作

近期在写一个小程序的时候,有一块是数据是后台富文本填写的,入下图所示:

在这之前,我使用的是wxParse解析富文本但是最大的缺点就是代码配置多,并且无疑多出了一部分源码资源,为了节约时间和精力所以就选择rich-text组件来写了,下面就放相应的代码和截图:
请求接口后端返过来的接口数据如下所示:

wxml部分:
<rich-text nodes="{{myrich}}"></rich-text>

js部分:
(1)先转义方法,代码如下:

  1. escape2Html(str) {  
  2.       var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' }; 
  3.       return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t]; }).replace('<section', '<div').replace('<img', '<img style="max-width:100%;height:auto" ');  
  4.     }  
(2)请求接口赋值数据
const myrich = that.escape2Html(t.data.adopt_desc); 
js部分的局部代码截图如下:


然后就出现了图一的效果了

zhangren.online
上一篇:微信小程序点击轮播图在新页面中全屏预览图片
下一篇:微信小程序使用wxParse解析富文本HTML

您可能喜欢

回到顶部