我们知道小程序的标签是微信限定的，是不支持div、p等等标签。如果我们有一个功能是从后台上传的文章，小程序负责展示，我们从后台拿到的数据一定是一个富文本的字符串。类似一个下图的格式：
image.png
如果那过来直接解析，肯定是不行的，肯定是要把这些标签转化为小程序能够识别的标签。其实有两种办法：
第一种方法是，小程序组件中有一个组件叫rich-text，大概的写法
//wxml内容
<rich-text nodes="{{html}}"></rich-text>
<rich-text nodes="{{str}}"></rich-text>
//js的内容
Page({
data: {
html: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'font-size:20px; background-color:#666;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}],
str:"<div>Hello World!</div>"
}
})
当然，具体的写法还是要参考小程序官方文档
我要具体介绍的是第二种写法：引入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);
模板的引用
// 引入模板
<import src="/wxParse/wxParse.wxml"/>
//这里data中article为bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
