微信小程序 HTML解析方法

这里推荐使用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>

 

具体内容参考小程序官网：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

 

二、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>&nbsp;&nbsp;早</div>"; 
WxParse.wxParse('article', 'html', article, that,5);

wxml显示：

<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

3.2（循环）例子

js中：

data: {
   contentList:[],
   msgArr:[],//列表中渲染数据的数组
   msgListArr:[],//这个用来接收每次请求到的数据叠加数组(重要用于上拉加载更多，多次请求)
  },

contentList数组里的数据我是从后台取的，
我的数据格式:（最初是没有contentCopy[];这个数据正是我们所需要的）

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

 let that=this;
        let contentList=res.data.data;
        let msgListArr=this.data.msgListArr;

        for(let i=0;i<contentList.length;i++){
          WxParse.wxParse('dosetime'+i, 'html', contentList[i].dosetime, that); 
          if(i===contentList.length-1){
            WxParse.wxParseTemArray("WxParseListArr",'dosetime',contentList.length,that);
          }
        }

        console.log(contentList);
        console.log(that.data.WxParseListArr);

        let listArr=that.data.WxParseListArr;
        listArr.forEach((item,index)=>{
          contentList[index].contentCopy=item;
          msgListArr.push(contentList[index]);
        })

        console.log('contentList=',contentList);
        console.log('msgListArr',msgListArr);

        that.setData({
          msgArr:msgListArr
        })

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