个人博客:柚子青年。
微信小程序现在已经被广泛应用,开发方式类似 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',