微信小程序 - 渲染HTML

个人博客：柚子青年。

微信小程序现在已经被广泛应用，开发方式类似 Vue。

阅读本文需要有小程序基础。

rich-text

在渲染 DOM 这一块，小程序没有 Vue 的 v-html 也没有 React 的 dangerouslySetInnerHTML，不过小程序提供了自己的渲染方式 rich-text，详情请看 官方文档。

不过在展示效果上个人觉得是不太满意的。在展示代码的时候，并不会有很好的换行和间隔。网上也有一些第三方组件帮你渲染的，我这边觉得还是不太行，于是就自己大致造了个轮子。

注：本文只提供解决思路不提供具体实现代码

渲染原理

首先要先了解小程序官方渲染方式的原理。

WXML

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

JavaScript

data: {
    nodes: [{
        name: 'div',
        attrs: {
            class: 'div_class',
            style: 'line-height: 60px; color: red;'
        },
        children: [{
            type: 'text',