这里推荐使用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
请发表评论