微信小程序处理html富文本展示

首先来看下最终效果

可以在页面上展示段落，图片，加粗文字等各种网页上的富文本操作

更多细节可以在这个小程序上查看

 

话不多说，往下看

js代码如下

var html = '<p>12321311<span style="text-decoration: underline;">321321321321<span style="text-decoration: line-through;">3213213213213231asdasdasda<img src="http://sgsource.sougewang.com/image/know/30b64859b849008ca2cb83bd3934ea4c.png" /><video controls="controls" width="300" height="150"><source src="http://sgsource.sougewang.com/video/know/4c83a1703c5f8a82efc26519be342748.mp4" type="video/mp4" /></video></span></span></p>'
data: {
    htmlSnip:html.replace(/<section/g, '<div').replace(/\/section>/g, '/div>'),
  },

wxml部分

<rich-text nodes="{{htmlSnip}}"></rich-text>

大功告成，快去试一下吧

标签rich-text就可以处理大部分html标签

如果有什么不明白的可以留言哦