个人博客：柚子青年。
原文链接：微信小程序 - 渲染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‘, text: ‘Hello World!‘ }] }] }
大致就是 引入 rich-text 组件， 传入 nodes 格式的 json 然后进行渲染。
所以我们自己实现的时候也可以按照这种方式。
实现
WXML
<view className="content"> <view wx:for="{{news.wxml}}" wx:key="name" className="{{item.className || ‘‘}}"> <view wx:if="{{item.name === ‘view‘}}">{{item.value}}</view> <view wx:if="{{item.name === ‘image‘}}"> <image src="{{item.value}}" mode="widthFix"></image> </view> <text className="code" wx:if="{{item.name === ‘text‘}}">{{item.value}}</text> </view> </view>
WXSS
.content > view { line-height: 48rpx; margin-bottom: 30rpx; } .content .h1 { font-weight: bold; font-size: 2em; } .... .content .blockquote { padding: 20rpx 30rpx; color: #777; border-left: 4px solid #ddd; background: #fafafa; } .content .code { display: block; font-size: 24rpx; color: #f8f8f2; padding: 32rpx; border-radius: 6rpx; white-space: pre; word-wrap: normal; overflow: auto; }
JavaScript
data: { nodes: [{ name: ‘view‘, className: ‘div_class‘, value: "Hello World!" }] } // name: view 普通文本 image 图片 text 代码片段 // className: 需要添加的 class // value: 值 对应 name 类型 （保留空格换行，建议直接粘贴不用管格式）
后续可能会出具体实现方式，大概。