微信小程序渲染富文本 HTML 标签

原生 rich-text 控件

支持标签有限，传入HTML String性能下降。

wxml

<rich-text nodes="{{htmlString}}" bindtap="tap"></rich-text>
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>

js

Page({
  data: {
    htmlString: "<span>Hello World!</span>",
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})

第三方 wxParse

将HTML标签转换成小程序原生控件。

使用方法

• 拷贝wxParse至项目根目录

- wxParse/
  -wxParse.js(必须存在)
  -html2json.js(必须存在)
  -htmlparser.js(必须存在)
  -showdown.js(必须存在)
  -wxDiscode.js(必须存在)
  -wxParse.wxml(必须存在)
  -wxParse.wxss(必须存在)
  -emojis(可选)

• 在页面的js文件中引入wxParse模块

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

• 在页面的js文件中绑定数据

var htmlString = '<div>我是HTML代码</div>';
/**
* 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', htmlString, that, 5);

• 在页面的wxml文件中引入wxParse模板

// 引入模板
<import src="../../wxParse/wxParse.wxml" />
//这里data中article为bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}" />

• 在页面的wxss文件中引入wxParse.css（也可以在app.wxss）

@import "../../wxParse/wxParse.wxss";

项目地址

https://github.com/icindy/wxParse

参考代码

https://github.com/fendoudebb/z-blog-wx