小程序-解析html

我们知道小程序的标签是微信限定的，是不支持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}}"/>