c语言 解析html,小程序-解析html

我们知道小程序的标签是微信限定的，是不支持div、p等等标签。如果我们有一个功能是从后台上传的文章，小程序负责展示，我们从后台拿到的数据一定是一个富文本的字符串。类似一个下图的格式：

image.png

如果那过来直接解析，肯定是不行的，肯定是要把这些标签转化为小程序能够识别的标签。其实有两种办法：

第一种方法是，小程序组件中有一个组件叫rich-text，大概的写法

//wxml内容

//js的内容

Page({

data: {

html: [{

name: 'div',

attrs: {

class: 'div_class',

style: 'font-size:20px; background-color:#666;'

},

children: [{

type: 'text',

text: 'Hello World!'

}]

}],

str:"

Hello World!

"

}

})

当然，具体的写法还是要参考小程序官方文档

我要具体介绍的是第二种写法：引入wxParse

wxParse的GitHub地址是https://github.com/icindy/wxParse

下载到本地以后，我们需要用到的文件是

wxParse.js(必须存在)

html2json.js(必须存在)

htmlparser.js(必须存在)

showdown.js(必须存在)

wxDiscode.js(必须存在)

wxParse.wxml(必须存在)

wxParse.wxss(必须存在)

emojis(可选)

在需要使用的view的js中引入wxParse.js

const WxParse = require('/wxParse/wxParse.js');

在需要使用的wxss中引入wxParse.css

@import "/wxParse/wxParse.wxss";

绑定数据

var article = '后台传过来的标签数据';

/**

* WxParse.wxParse(bindName , type, data, target,imagePadding)

* 1.bindName绑定的数据名(必填)

* 2.type可以为html或者md(必填)

* 3.data为传入的具体数据(必填)

* 4.target为Page对象,一般为this(必填)

* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)

*/

var that = this;

WxParse.wxParse('article', 'html', article, that, 5);

模板的引用

// 引入模板

//这里data中article为bindName