柚子青年。

柚子青年。

任何人浪费时间在这件事上都能这样

微信小程序 - 渲染HTML

发布时间:2020-04-04 14:04

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

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

rich-text

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

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

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

渲染原理

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

WXML
  1. <rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
JavaScript
  1. data: {
  2. nodes: [{
  3. name: 'div',
  4. attrs: {
  5. class: 'div_class',
  6. style: 'line-height: 60px; color: red;'
  7. },
  8. children: [{
  9. type: 'text',
  10. text: 'Hello&nbsp;World!'
  11. }]
  12. }]
  13. }

大致就是 引入 rich-text 组件, 传入 nodes 格式的 json 然后进行渲染。

所以我们自己实现的时候也可以按照这种方式。

实现
WXML
  1. <view className="content">
  2. <view wx:for="{{news.wxml}}" wx:key="name" className="{{item.className || ''}}">
  3. <view wx:if="{{item.name === 'view'}}">{{item.value}}</view>
  4. <view wx:if="{{item.name === 'image'}}">
  5. <image src="{{item.value}}" mode="widthFix"></image>
  6. </view>
  7. <text className="code" wx:if="{{item.name === 'text'}}">{{item.value}}</text>
  8. </view>
  9. </view>
WXSS
  1. .content > view { line-height: 48rpx; margin-bottom: 30rpx; }
  2. .content .h1 { font-weight: bold; font-size: 2em; }
  3. ....
  4. .content .blockquote { padding: 20rpx 30rpx; color: #777; border-left: 4px solid #ddd; background: #fafafa; }
  5. .content .code { display: block; font-size: 24rpx; color: #f8f8f2; padding: 32rpx; background-color: #282a36; border-radius: 6rpx; white-space: pre; word-wrap: normal; overflow: auto; }
JavaScript
  1. data: {
  2. nodes: [{
  3. name: 'view',
  4. className: 'div_class',
  5. value: "Hello&nbsp;World!"
  6. }]
  7. }
  8. // name: view 普通文本 image 图片 text 代码片段
  9. // className: 需要添加的 class
  10. // value: 值 对应 name 类型 (保留空格换行,建议直接粘贴不用管格式)

后续可能会出具体实现方式,大概。