这里推荐使用rich-text 我觉得蛮简单方便的。如果没有显示记得放view标签里试试。
一、rich-text
微信小程序自带的标签
用法:
nodes 里可以直接传HTML代码,也可以通过变量传,rich-text还可以放在循环里
<rich-text nodes="xxx"></rich-text>
<rich-text nodes="{{xxx}}"></rich-text>
<rich-text nodes="{{item.xxx}}"></rich-text>
二、wxParse插件
1.wxParse代码仓库:https://github.com/icindy/wxParse 下载,

把上图选中的文件夹放入小程序中,(可以放在工具包下、根目录都可以)。
2.在你需要的js文件下引入:(根据自己的路径)
var WxParse = require('../../../wxParse/wxParse.js');
应该还有一种写法 :
import {WxParse} from '../../../wxParse/wxParse.js' (没实验,应该也行得通)
还有需要的wxss中引入:(没有样式可以略)
@import '../../../wxParse/wxParse.wxss';
还有wxml中引入:
<import src="../../../wxParse/wxParse.wxml"/>
3.
/** * WxParse.wxParse(bindName , type, data, target,imagePadding) * 1.bindName绑定的数据名(必填) * 2.type可以为html或者md(必填) * 3.data为传入的具体数据(必填) * 4.target为Page对象,一般为this(必填) * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选) */
3.1 (单个)例子
js中:
var article = "<div> 早</div>";
WxParse.wxParse('article', 'html', article, that,5);
wxml显示:
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
3.2(循环)例子
js中:
1 data: { 2 contentList:[], 3 msgArr:[],//列表中渲染数据的数组 4 msgListArr:[],//这个用来接收每次请求到的数据叠加数组(重要用于上拉加载更多,多次请求) 5 },
contentList数组里的数据我是从后台取的,
我的数据格式:(最初是没有contentCopy[];这个数据正是我们所需要的)

/** * WxParse.wxParseTemArray(temArrayName,bindNameReg,total,that) * 1.temArrayName: 为你调用时的数组名称 * 3.bindNameReg为循环的共同体 如绑定为reply1,reply2...则bindNameReg = 'reply' * 3.total为reply的个数 */

1 let that=this; 2 let contentList=res.data.data; 3 let msgListArr=this.data.msgListArr; 4 5 for(let i=0;i<contentList.length;i++){ 6 WxParse.wxParse('dosetime'+i, 'html', contentList[i].dosetime, that); 7 if(i===contentList.length-1){ 8 WxParse.wxParseTemArray("WxParseListArr",'dosetime',contentList.length,that); 9 } 10 } 11 12 console.log(contentList); 13 console.log(that.data.WxParseListArr); 14 15 let listArr=that.data.WxParseListArr; 16 listArr.forEach((item,index)=>{ 17 contentList[index].contentCopy=item; 18 msgListArr.push(contentList[index]); 19 }) 20 21 console.log('contentList=',contentList); 22 console.log('msgListArr',msgListArr); 23 24 that.setData({ 25 msgArr:msgListArr 26 })
wxml显示:
<template is="wxParse" data="{{wxParseData:item.contentCopy}}" />
基本就这些。
目前遇到的情况:rich-text和插件都没显现 解决方案:rich-text标签或template标签用一个<view></view>包裹起来
第二个问题,就是WxParse有很多个wx:key=“”的警告。去找到插件指定的那个js文件,将里面的key=""替换成key=“unique”
参考:https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
https://blog.csdn.net/weixin_30925411/article/details/99923943